Grid column start / end

Class reference

# Spanning columns

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

<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.

<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.