Check out our free templates made with AI and polished to perfection in Windframe

Get now
Last updated: 6 August 2025

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.


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:

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

Item 1
items 2
items 3
items 4
items 5

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:

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

Interaction States (hover/focus)

These utilities rarely make sense with hover/focus, but technically possible:

html
<div class="col-start-1 hover:col-start-2 transition-all duration-300">
Hover shifts it one column right
</div>

Only use this if you're intentionally animating layout shifts.

Arbitrary Value Usage

Use bracket notation to assign custom grid lines:

html
<div class="col-start-[6] col-end-[9]">
Starts at grid line 6, ends before 9
</div>

Useful for advanced CSS Grid setups where named lines or high indices are involved.

Customization in tailwind.config.js

Tailwind doesn't limit you here — col-start-{n} goes up to span 13 by default (1 to 13). But you can extend it:

js
// tailwind.config.js
module.exports = {
theme: {
extend: {
gridColumnStart: {
'14': '14',
},
gridColumnEnd: {
'14': '14',
}
}
}
}

Real UI Component Example

Let's build a simple pricing layout where the featured plan is centered using grid column placement.

html
<div class="grid grid-cols-12 gap-4 p-6">
<!-- Basic Plan -->
<div class="col-start-1 col-end-5 bg-white p-6 shadow">Basic</div>
<!-- Featured Plan -->
<div class="col-start-5 col-end-9 bg-blue-100 p-6 shadow-lg scale-105">Pro (Featured)</div>
<!-- Premium Plan -->
<div class="col-start-9 col-end-13 bg-white p-6 shadow">Premium</div>
</div>

Preview

Basic
Pro (Featured)
Premium

Featured plan is centered from column 5 to 8. Cleanly separates layout using grid column control.

Best Practices

  • Use grid-cols-{n} to define a clear column layout before using col-start/col-end.

  • Don't hardcode complex spans unless you're designing for fixed widths.

  • Use auto if layout flexibility is important.

  • Combine with row-start/row-end for full layout control.

Tailwind Grid Column Start/End Class Table

ClassProperties
col-auto grid-column: auto;
col-span-1grid-column: span 1 / span 1;
col-span-2grid-column: span 2 / span 2;
col-span-3grid-column: span 3 / span 3;
col-span-4grid-column: span 4 / span 4;
col-span-5grid-column: span 5 / span 5;
col-span-6grid-column: span 6 / span 6;
col-span-7grid-column: span 7 / span 7;
col-span-8grid-column: span 8 / span 8;
col-span-9grid-column: span 9 / span 9;
col-span-10grid-column: span 10 / span 10;
col-span-11grid-column: span 11 / span 11;
col-span-12grid-column: span 12 / span 12;
col-start-fullgrid-column: 1 / -1;
col-start-1grid-column-start: 1;
col-start-2grid-column-start: 2;
col-start-3grid-column-start: 3;
col-start-4grid-column-start: 4;
col-start-5grid-column-start: 5;
col-start-6grid-column-start: 6;
col-start-7grid-column-start: 7;
col-start-8grid-column-start: 8;
col-start-9grid-column-start: 9;
col-start-10grid-column-start: 10;
col-start-11grid-column-start: 11;
col-start-12grid-column-start: 12;
col-start-13grid-column-start: 13;
col-start-autogrid-column-start: auto;
col-end-1 grid-column-end: 1;

📚 Ready to Keep Going?

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites! 

Build from scratch or select prebuilt tailwind templates