Tailwind CSS Grid Column Start / End

The col-start-{n} and col-end-{n} classes are used to declare the start and end positions of a grid item within a grid column. By default, the number n can range from 1 to the maximum number of columns that have been defined using the grid-template-columns property.

Syntax

<div class="grid grid-cols-3 gap-4">
  <!-- grid item with start column at 1 and end column at 2 -->
  <div class="col-start-1 col-end-2">...</div>
</div>

Example

<div class="grid grid-cols-3 gap-4">
  <div class="col-start-1 col-end-2 bg-gray-200 p-4">Column 1</div>
  <div class="col-start-2 col-end-3 bg-gray-300 p-4">Column 2</div>
  <div class="col-start-3 col-end-4 bg-gray-400 p-4">Column 3</div>
</div>

Output

Explanation

In the above example, we have created a 3-column grid using the grid-cols-3 class. We have then created three div elements inside this grid, each with a unique background color and some padding.

Using the col-start-{n} and col-end-{n} classes, we have positioned these grid items within the grid columns. The first column (Column 1) has a start position of 1 and an end position of 2, which means it spans across the first column only. The second column (Column 2) has a start position of 2 and an end position of 3, which means it spans across the second column only. The third column (Column 3) has a start position of 3 and an end position of 4, which means it spans across the third column only.

Use

The col-start-{n} and col-end-{n} classes can be used to position grid items within grid columns. They are particularly useful when you have a large grid with many columns, and you want to specify exactly which columns a particular grid item should span across.

Important Points

• The col-start-{n} and col-end-{n} classes rely on the grid-template-columns property to determine the maximum number of columns in the grid.
• If you don't specify an end position using col-end-{n}, the grid item will span until the end of the grid.
• You can also use negative values with col-start-{n} and col-end-{n} to position grid items starting from the end of the grid.

Summary

The col-start-{n} and col-end-{n} classes are used to position grid items within grid columns. They are particularly useful when you have a large grid with many columns, and you want to specify exactly which columns a particular grid item should span across.