Grid

Use a mobile-first twelve column CSS grid to build responsive layouts.

Enable grid behavior

Use the .grid class to enable CSS Grid behavior. The grid uses display: grid; and a twelve column template.

.grid

<div class="grid">
	<div class="col-12">.grid</div>
</div>

Add columns

By applying the class col-* with a number between 1 and 12, you can choose the column width.

Below are three columns, each using .col-4. Since the grid has twelve columns, three items with four columns each fill one row.

.col-4

<div class="grid">
	<div class="col-4">.col-4</div>
	<div class="col-4">.col-4</div>
	<div class="col-4">.col-4</div>
</div>

Different column widths

Combine different column widths to create custom layouts.

.col-6

.col-3

<div class="grid">
	<div class="col-6">.col-6</div>
	<div class="col-3">.col-3</div>
	<div class="col-3">.col-3</div>
</div>

Full width columns

Use .col-12 to make an element span the full grid width.

.col-12

.col-6

<div class="grid">
	<div class="col-12">.col-12</div>
	<div class="col-6">.col-6</div>
	<div class="col-6">.col-6</div>
</div>

Responsive grid

By applying the class col-[breakpoint]-* with a number between 1 and 12, you can choose the column width for a specific screen width.

Below the md breakpoint, .col-12 applies and each item takes the full width. From md and up, .col-md-4 applies and the items are shown as three columns.

.col-12 .col-md-4

<div class="grid">
	<div class="col-12 col-md-4">.col-12 .col-md-4</div>
	<div class="col-12 col-md-4">.col-12 .col-md-4</div>
	<div class="col-12 col-md-4">.col-12 .col-md-4</div>
</div>

Responsive layout example

Combine multiple responsive column utilities to build layouts that adapt across breakpoints.

.col-12 .col-md-8

.col-12 .col-md-4

.col-12 .col-md-6

<div class="grid">
	<div class="col-12 col-md-8">.col-12 .col-md-8</div>
	<div class="col-12 col-md-4">.col-12 .col-md-4</div>
	<div class="col-12 col-md-6">.col-12 .col-md-6</div>
	<div class="col-12 col-md-6">.col-12 .col-md-6</div>
</div>

Available column classes

Base column utilities:

.col-1
.col-2
.col-3
.col-4
.col-5
.col-6
.col-7
.col-8
.col-9
.col-10
.col-11
.col-12

Responsive column utilities follow the same pattern:

.col-sm-1 ... .col-sm-12
.col-md-1 ... .col-md-12
.col-lg-1 ... .col-lg-12
.col-xl-1 ... .col-xl-12
.col-xxl-1 ... .col-xxl-12

Previous: Utilities

← Flex

Next: Utilities

Borders →

Menu