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 expand to large screens easier than large grids cram into small screens.
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