Grid column start / end

Utilities for controlling how elements are sized and placed across grid columns


Class reference

ClassProperties
col-autogrid-column: auto;
col-span-1grid-column: span 1 / span 1;
col-span-2grid-column: span 2 / span 2;
col-span-3grid-column: span 3 / span 3;
col-span-4grid-column: span 4 / span 4;
col-span-5grid-column: span 5 / span 5;
col-span-6grid-column: span 6 / span 6;
col-span-7grid-column: span 7 / span 7;
col-span-8grid-column: span 8 / span 8;
col-span-9grid-column: span 9 / span 9;
col-span-10grid-column: span 10 / span 10;
col-span-11grid-column: span 11 / span 11;
col-span-12grid-column: span 12 / span 12;
col-span-fullgrid-column: 1 / -1;
col-start-1grid-column-start: 1;
col-start-2grid-column-start: 2;
col-start-3grid-column-start: 3;
col-start-4grid-column-start: 4;
col-start-5grid-column-start: 5;
col-start-6grid-column-start: 6;
col-start-7grid-column-start: 7;
col-start-8grid-column-start: 8;
col-start-9grid-column-start: 9;
col-start-10grid-column-start: 10;
col-start-11grid-column-start: 11;
col-start-12grid-column-start: 12;
col-start-13grid-column-start: 13;
col-start-autogrid-column-start: auto;
col-end-1grid-column-end: 1;
col-end-2grid-column-end: 2;
col-end-3grid-column-end: 3;
col-end-4grid-column-end: 4;
col-end-5grid-column-end: 5;
col-end-6grid-column-end: 6;
col-end-7grid-column-end: 7;
col-end-8grid-column-end: 8;
col-end-9grid-column-end: 9;
col-end-10grid-column-end: 10;
col-end-11grid-column-end: 11;
col-end-12grid-column-end: 12;
col-end-13grid-column-end: 13;
col-end-autogrid-column-end: auto;

# Spanning columns

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

1
2
3
4
5
6
7
<div class="grid grid-cols-3 gap-4">
<div class="...">1</div>
<div class="...">2</div>
<div class="...">3</div>
<div class="**col-span-2** ...">4</div>
<div class="...">5</div>
<div class="...">6</div>
<div class="**col-span-2** ...">7</div>
</div>

# Starting and ending lines

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
<div class="grid grid-cols-6 gap-4">
<div class="col-start-2 col-span-4 ..."></div>
<div class="col-start-1 col-end-3 ..."></div>
<div class="col-end-7 col-span-2 ..."></div>
<div class="col-start-1 col-end-7 ..."></div>
</div>

# Responsive

To control the column placement of an element at a specific breakpoint, add a {screen}: prefix to any existing grid-column utility. For example, use md:col-span-6 to apply the col-span-6 utility at only medium screen sizes and above.

For more information about Elements’ responsive design features, check out the Responsive Design documentation.