Squares Grid

Automatic Columns

The class: column inside class: row get an automatic width of the row

<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>

The Grid

If you give width to column, add class small-x for small devices | medium-x for medium devices | large-x for large devices

The grid is made up of 12 columns

<div class="row"> <div class="column medium-6"></div> <div class="column medium-6"></div> </div> <div class="row"> <div class="column small-6 medium-6 align-middle-center">6</div> <div class="column small-6 medium-6 align-middle-center">6</div> </div> <!-- Col-4 --> <div class="row"> <div class="column small-4 medium-4 align-middle-center">4</div> <div class="column small-4 medium-4 align-middle-center">4</div> <div class="column small-4 medium-4 align-middle-center">4</div> </div> <!-- Col-3 --> <div class="row"> <div class="column small-3 medium-3 align-middle-center">3</div> <div class="column small-3 medium-3 align-middle-center">3</div> <div class="column small-3 medium-3 align-middle-center">3</div> <div class="column small-3 medium-3 align-middle-center">3</div> </div> <!-- Col 2 --> <div class="row"> <div class="column small-2 medium-2 align-middle-center">2</div> <div class="column small-2 medium-2 align-middle-center">2</div> <div class="column small-2 medium-2 align-middle-center">2</div> <div class="column small-2 medium-2 align-middle-center">2</div> <div class="column small-2 medium-2 align-middle-center">2</div> <div class="column small-2 medium-2 align-middle-center">2</div> </div> <!-- Col 1 --> <div class="row"> <div class="column small-1 medium-1 align-middle-center">1</div> <div class="column small-1 medium-1 align-middle-center">1</div> <div class="column small-1 medium-1 align-middle-center">1</div> <div class="column small-1 medium-1 align-middle-center">1</div> <div class="column small-1 medium-1 align-middle-center">1</div> <div class="column small-1 medium-1 align-middle-center">1</div> <div class="column small-1 medium-1 align-middle-center">1</div> <div class="column small-1 medium-1 align-middle-center">1</div> <div class="column small-1 medium-1 align-middle-center">1</div> <div class="column small-1 medium-1 align-middle-center">1</div> <div class="column small-1 medium-1 align-middle-center">1</div> <div class="column small-1 medium-1 align-middle-center">1</div> </div>
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
2
10
7
5

Alignment

Align-center

<div class="row align-center"> <div class="column medium-2"></div> <div class="column medium-2"></div> <div class="column medium-2"></div> </div>

Align-left

<div class="row align-left"> <div class="column medium-2"></div> <div class="column medium-2"></div> <div class="column medium-2"></div> </div>

Align-Right

<div class="row align-right"> <div class="column medium-2"></div> <div class="column medium-2"></div> <div class="column medium-2"></div> </div>

Align-justify

<div class="row align-justify"> <div class="column medium-2"></div> <div class="column medium-2"></div> <div class="column medium-2"></div> </div>

Align-spaced

<div class="row align-spaced"> <div class="column medium-2"></div> <div class="column medium-2"></div> <div class="column medium-2"></div> </div>

Align-self-middle | align-self-bottom | align-self-top

<div class="row align-spaced"> <div class="column medium-2 align-self-middle"></div> <div class="column medium-2 align-self-bottom"></div> <div class="column medium-2 align-self-top"></div> </div>
middle
bottom
top

Align-top

<div class="row align-top"> <div class="column medium-2"></div> <div class="column medium-2"></div> <div class="column medium-2"></div> </div>

Align-bottom

<div class="row align-bottom"> <div class="column medium-2"></div> <div class="column medium-2"></div> <div class="column medium-2"></div> </div>

Align-middle

<div class="row align-middle"> <div class="column medium-2"></div> <div class="column medium-2"></div> <div class="column medium-2"></div> </div>

Align-middle-left | align-middle-right | align-middle-center

<div class="row align-middle-left"> <div class="column medium-4"></div> </div> <div class="row align-middle-right"> <div class="column medium-4"></div> </div> <div class="row align-middle-center"> <div class="column medium-4"></div> </div>

Align-top-left | Align-top-right | Align-top-center

<div class="row align-top-left"> <div class="column medium-4"></div> </div> <div class="row align-top-right"> <div class="column medium-4"></div> </div> <div class="row align-top-center"> <div class="column medium-4"></div> </div>

Align-bottom-left | Align-bottom-right | Align-bottom-center

<div class="row align-bottom-left"> <div class="column medium-4"></div> </div> <div class="row align-bottom-right"> <div class="column medium-4"></div> </div> <div class="row align-bottom-center"> <div class="column medium-4"></div> </div>

Utility: Totaly center & childrens

<div class="row totaly-center"> <div class="column medium-4">Child</div> </div> <div class="row totaly-center childrens-too"> <div class="column medium-4">Child</div> </div> <div class="row totaly-center"> <div class="column medium-4">Child</div> </div> Other utilities: .display-flex: give flex-box to some elements without flex .flex-column: give direction column and flex to element .flex-row: give direction row and flex to element