Using Predefined HTML Classes

Create powerful multi-device layouts quickly and easily with the 12-column, nestable Foundation grid. If you’re familiar with grid systems, you’ll feel right at home. If not, you’ll learn quickly.

Foundation uses box-sizing: border-box so that borders and padding do not affect the overall width of the columns, making the math dead-simple. Since Foundation is mobile-first, we’ll stack content by default. You do have access to an entirely separate small grid to use up to the 768px breakpoint. This means you can create some pretty complex layouts and even drop columns if you want.

Block Grid

Block grids are made from a ul.small-block-grid-# or ul.large-block-grid-#. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.

These have a bit of flexibility since you have access to two separate grids between our built in 768px breakpoint. If you use the small-block-grid only, the grid will keep its spacing and configuration no matter the screen size. If you use large-block-grid only, the list items will stack on top of eachother for small devices. If you use both of those classes combined, you can control the configuration and layout separately for each breakpoint.