The Grid

We've edited the grid to use 24 columns so that we have more flexibility for positioning. Foundation's default is 12 columns. As long as you can count to twenty four and can do some basic maths you should be fine working with this amount of columns.

...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...

Columns in a row do not have to add up to 24. The final column will always be floated right. Add class end to the last column if you do not want it to float right.


Nesting

You can nest rows inside existing rows. A nested row is made up of 24 columns, and not the columns of its parent (like Bootstrap). This means that if your parent changes you do not need to rename the nested columns too.

16
16 Nested
16 Nested Again
8
8
8

Offsets

2
22
1
20, offset 2
1
18, offset 4
1
16, offset 6

Centred Columns

6 centered
12 centered
18 centered
22 centered

Source Ordering

4
20, last
6
18, last
8
8, last
10
10, last
12
12, last

Small Grid

The small grid has the same number of columns as the large grid. You can use them together or individually. Use them together to control columns for each view. If you use only small grid classes, this will carry over to the large view. If you use only large grid classes, the small view will show the columns stacked on top of each other.

4
20, last
6
18, last

Block Grids

These grids do not require rows or even numbers of elements to display correctly, making them ideal for content when we don't know the number of columns that are rendered. We have changed the number of block grid elements from the default 12 to 24.

  • block 1
  • block 2
  • block 3
  • block 4
  • block 5
  • block 6
  • block 7
  • block 8
  • block 1
  • block 2
  • block 3
  • block 4
  • block 5
  • block 6
  • block 7
  • block 8
  • block 1
  • block 2
  • block 3
  • block 4
  • block 5
  • block 6
  • block 7
  • block 8