Grid Template Columns

Usage

Use the grid-cols-{n} utilities to create grids with n equally sized columns.

1
2
1
2
3

Responsive

To control the columns of a grid at a specific breakpoint, add a {screen}: prefix to any existing grid-template-columns utility.

1
2
1
2
3

Grid Column Span

Usage

Use the col-span-{n} utilities to make an element span n columns.

1
2

Starting and ending lines

Usage

Use the col-start-{n} and col-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the col-span-{n} utilities to span a specific number of columns.

Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7.

1
2
3
4