Zurb Foundation 6 – Grid System

To help understand Zurb Foudation I viewed the tutorials on the Zurb Foundation website. It is quite difficult to get to grips with at first but once I worked through various examples it became clearer. It uses a grid system as explained below based on rows and columns and is mobile-first which means code for small screen comes first with larger devices inheriting these styles with the option to customize larger screen if necessary.

 Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns. Then add elements with a column class within that row. Specify the widths of each column with the small-#, .medium-#, and .large-# classes.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The previous rows are displayed as below:

 

 

 

 

 

 

 

 

Small Grids

Small grids expand to large screens easier than large grids cram into small screens.

 Medium Grid

Medium sized screens will inherit styles from small, unless you specify a different layout using the medium grid classes.

Nesting – It is possible to nest grids as below:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Source Zurb Foundation 6

Advertisements