Brutalist Framework

Grid

Responsive grid

The grid structure is pretty simple!

Basic Structure

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

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 m6

col s12 m12 l6

col s12 m6

col s12 m6

Download

Version 1.0