Foundation - The Grid

Description

Foundation grid system scales up to 12 columns through the page. Grid systems are used to create page layouts through a series of rows and columns that house your content.

Grid Options

The below table tells briefly about how the Foundation grid system works in multiple devices.

	Small devices Phones(<640px)	Medium devices Tablets(>=640px)	Large devices Laptops & Desktops(>=1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Class prefix	.small-*	.medium-*	.large-*
Number of columns	12	12	12
Nestable	Yes	Yes	Yes
Offsets	Yes	Yes	Yes
Column ordering	Yes	Yes	Yes

Basic Structure of a Foundation Grid

Following is basic structure of Foundation grid:

<div class="row">
  <div class="small-*"></div>
  <div class="medium-*"></div>
  <div class="large-*"></div>
</div>
<div class="row">
  ...
</div>

• First, create a row class to create horizontal groups of columns.
• Content should be placed within the columns, and only columns may be the immediate children of rows.
• Grid columns are created by specifying the number of twelve available columns you wish to span. For example, for four equal columns we would use .large-3

Following are the three classes used in the Foundation grid system:

S.N.	Basic Grid classes & Description
1	Large The large-* class is used for the large devices.
2	Medium The medium-* class is used for the medium devices.
3	Small small-* class is used for the small devices.

Advanced

Following are the advanced grid format used in Foundation.

S.N.	Advanced Grids & Description
1	Combined Column/Row The column and row class are used on the same element to get the full width column to use as container.
2	Nesting We can nest the grid columns inside another columns.
3	Offsets Using large-offset-* or small-offset-* class, you can move the columns to the right.
4	Incomplete Rows Foundation floats the last element automatically to the right when the rows do not include columns up to 12.
5	Collapse/Uncollapse Rows Using the media query size include the collapse and uncollapse class to the row element to show the paddings.
6	Centered Columns Including the class small-centered to column, you can make the column at the center.
7	Source Ordering Source ordering class is used to shift the columns between the breakpoint.
8	Block Grids Block-grid is used to split the content.

Building Semantically

Using the set of SASS mixins, a grid CSS is generated which is used to build your own semantic grid. For more information click here

SASS Reference

Following are the SASS reference for grid used in Foundation.

S.N.	Basic Grids & Description
1	Variables Using the sass variables we can modify the default styles of this component.
2	Mixins The final CSS output is build using the mixin.