Tailwind Grid Column Start/End

The tailwind grid-column-{start/end} utility classes allow you to control the starting and ending positions of grid items within a grid container along the horizontal axis. With Tailwind's grid-column-start and grid-column-end classes, you can easily define the placement of grid items within a grid layout.

How to apply Tailwind Grid Column Start/End

To apply column start and end positions to a grid item, you can use the tailwind col-{start/end}-{line} utility classes, where {start/end} represents the desired start and end positions, and {line}represents the line number or name of the grid track. Here's an example:

<div class="grid grid-cols-3">
  <div class="bg-green-500 col-start-1 col-end-3">Item 1</div>
  <div class="bg-green-300">Item 2</div>
  <div class="bg-green-300">Item 3</div>
  <div class="bg-green-500 col-start-1 col-end-3">Item 4</div>
  <div class="bg-green-300">Item 5</div>
</div>

Preview

Responsive Tailwind Grid Column Start/End

Tailwind CSS allows you to apply column start and end positions responsively at different breakpoints. To use responsive tailwind grid column start/end classes, you can append the breakpoint prefix to the utility classes. For example, md:grid-column-start-2 sets the start position to the second column starting from the medium breakpoint and above. Here's an example:

<div class="grid grid-cols-2 md:grid-cols-3">
  <div class="bg-gray-200 md:col-start-2 md:col-end-4">Item 1</div>
  <div class="bg-gray-200">Item 2</div>
  <div class="bg-gray-200">Item 3</div>
</div>

In the above example, a grid container with 2 columns by default (grid-cols-2) and 3 columns starting from the medium breakpoint and above (md:grid-cols-3) is created. Themd:grid-column-start-2 class is applied to the first grid item (Item 1) to specify that it should start at the second column from the medium breakpoint, and the md:grid-column-end-4 class is used to specify that it should end at the fourth column.

Tailwind Grid Column Start/End Class Table

📚 Ready to Keep Going?

• Tailwind Grid Column