Grid Column Start / End ​

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

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="col-span-2">
    <!-- ... -->
  </div>
</div>

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

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

<div class="col-span-2 md:col-span-6">
  <!-- ... -->
</div>

<div class="col-span-2 md:col-span-6">
  <!-- ... -->
</div>

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