Responsive CSS Flexbox Grid Framework (Masonry Supported)

Containers

Container are the most basic layout element and are required our grid system. Choose from a responsive, fixed-width container or fluid-width.

Fixed-width container

Fluid-width container

Basics

The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They’re also equal height by default.

...
...
...
...
...
...
...
...
...
...
...
...

Auto-layout

Use breakpoint-specific column classes for equal-width columns. Add any number of a column classes for each breakpoint you need and every column will be the same width.

Equal-width

of 2
of 2
of 4
of 4
of 4
of 5
of 5
of 5
of 5
of 5

One column width

of 3
of 3
of 3
of 3
of 3
of 3
of 4
of 4
of 4
of 4

Variable with content

Variable width content
1 of 3
1 of 3
1 of 3
Variable width content
1 of 3
1 of 3
1 of 3
Variable width content

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

of 3
of 3
of 3
of 3
of 3
of 3
of 3
of 3
of 3
of 3
of 3
of 3

Horizontal alignment

of 2
of 2
of 2
of 2
of 2
of 2

Around

of 2
of 2
of 2
of 2
of 2
of 2

Between

of 2
of 2
of 2
of 2
of 2
of 2

Nesting

To nest the content with the grid, add a new .row and set of .col-sm-* columns within an existing .col-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that all 12 available columns).

of 1
of 2
of 2

Responsive

This grid framework includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

Breakpoints

For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column.

of 4
of 4
of 4
of 4
of 2
of 2

Stacked to horizontal

Using a single set of .col-sm-* classes, can you create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (*sm).

of 2
of 2
of 3
of 3
of 3
of 4
of 4
of 4
of 4

Mix and match

Don’t want your columns to simply stack in some grid tiers, use a combination of different classes for each tier as needed.

of 2
of 2
of 2
of 2
of 3
of 3
of 3

Sass mixins

When using our source Sass files, you have the option of using sass variables and mixins to create custom and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the numbers of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above.

Mixins

Mixins are used in conjunction with the grid variables to generate CSS for individual grid columns.

Examples

You can modify the variables to your own custom values, or just use the mixins with their default values. Here a example of using the default settings to create a two-column layout with a gap between.