Foundation - Building Semantically

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

Rows

The grid-row() mixin is used to create a row.

.container {
   @include grid-row;
}

Columns

The grid-column() mixin is used to create a column. The width of the column can be defined in number of ways.

.container {
   @include grid-column;
   //sets 100% column count

   @include grid-column(3);
   //sets column count 25%

   @include grid-column(25%);
   //set percentage for column count

   @include grid-column(1 of 7);
   //custom fraction is set for columns
}

The grid column can also be accessed as a function. The percentage value is given without any grid column CSS.

.main-content {
   width: grid-column(1 of 7);
}

Multiple Grids

The $grid-column-count sets numbers of columns to all grids by default. It can be overridden within an instance of row.

.container {
   @include grid-row(16) {
      .main-content {
         @include grid-column(5);
      }
      .sidebar {
         @include grid-column(11);
      }
   }
}

Without outputting any row CSS, you can temporarily change the grid context using grid-context() mixin. Pairing with breakpoint() mixin you can make the grid responsive.

@include grid-context(7) {
   .sidebar {
      @include grid-column(4);
   }
}