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.
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.
The medium grid has the same number of columns as the large grid and the small grid. You can use them together or individually. Use them together to control columns for each view. You can use its to distinguish the tablet device from the specified breakpoint.
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.
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.