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

Applying 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 themd:grid-column-end-4 class is used to specify that it should end at the fourth column.

Tailwind Grid Column Start/End Class Table

Windframe Tailwind blocks

Team

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.