Grid

MooGrid is a mobile first and full responsive grid with, it doesn't have fixed width, but you can set one if needed.

The grid can be any block, just need to specify the moo-grid class:

<div class="moo-grid"></div>

Each element grid must defined using moo-cell class. It will have 4 cells in phone, 8 in tablet and 12 in desktop.

<div class="moo-cell moo-cell--*-col">cell</div>

Where * is a number from 1 to 12 depending on the device used.

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
1/3**
3
1/3**
4
4
4
6
6
12

** 1/3 means phone/desktop

You can specify multiple sizes for a cell based on current device

<div class="moo-cell moo-cell--3-col moo-cell--4-col-phone">1/3</div>
<div class="moo-cell moo-cell--3-col moo-cell--4-col-phone">1/3</div>
<div class="moo-cell moo-cell--3-col moo-cell--4-col-phone">1/3</div>

Grid gapping

To remove the gapping between elements use the modifier --no-space.

<div class="moo-grid moo-grid--no-space"></div>


1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
1/3
3
1/3
4
4
4
6
6
12

** 1/3 means phone/desktop

Cell Alignment

You can change the cells alignment adding the align modifier (--center/--right) in the moo-grid element.

<div class="moo-grid moo-grid--center">
<div class="moo-cell moo-cell--2-col">2</div>
<div class="moo-cell moo-cell--2-col">2</div>
</div>

2
2

<div class="moo-grid moo-grid--right">
<div class="moo-cell moo-cell--2-col">2</div>
<div class="moo-cell moo-cell--2-col">2</div>
</div>

1
2

Cell vertical size

You make all cells grow vertically to have the same height based in the biggest value using the modifier --vgrow

<div class="moo-grid moo-grid--vgrow">
<div class="moo-cell moo-cell--6-col">2</div>
<div class="moo-cell moo-cell--6-col">2</div>
</div>

2
2
2
2
2
2