Grid

Responsive grids

There are two responsive grids included: default and FlexBox!

Default Grid

It goes like this:


								.container
  .row
    .col .s12 .m12 .l12

Container is optional, as it centers the page. By not using the container class, the rows will be the full width of the window. The maximum number of columns is 12.

.s12 = 12 columns (full width) on small devices
.m6 = 6 columns (half width) on medium devices
.l4 = 4 columns (1/3 width) on large devices

Flexbox Grid

We've also included Flexbox grid. Learn about it here:
FlexboxGrid.com

Let's take a look at the grid. Re-size your window to see it in action.

Full Width: On all screen sizes.

col s12 m12 l12

Three columns: Becomes half width on medium devices, and full-width on small devices.

col s12 m6 l4
col s12 m6 l4
col s12 m6 l4

Nesting: Yes, you can nest within other layouts. Below, we have a two-column layout within another two-column layout.

col s12 m12 l6

col s12 m6

col s12 m12 l6

col s12 m6

Flexbox Fusion Example

Here, we are using the Flexbox grid, combined with the default grid.

Flexbox Full-width
col-xs-12

Flexbox Left Column
col-xs-12 col-md-6

Flexbox Right Column
col-xs-12 col-md-6

Default 2-column layout wrapped within full-width flexbox
col-xs-12

col s12 m6