Check out our free templates made with AI and polished to perfection in Windframe
Get nowTailwind 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:
<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.
Interaction States (hover/focus)
These utilities rarely make sense with hover/focus, but technically possible:
<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:
<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:
// tailwind.config.jsmodule.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.
<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
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
Class | Properties |
---|---|
col-auto | grid-column: auto; |
col-span-1 | grid-column: span 1 / span 1; |
col-span-2 | grid-column: span 2 / span 2; |
col-span-3 | grid-column: span 3 / span 3; |
col-span-4 | grid-column: span 4 / span 4; |
col-span-5 | grid-column: span 5 / span 5; |
col-span-6 | grid-column: span 6 / span 6; |
col-span-7 | grid-column: span 7 / span 7; |
col-span-8 | grid-column: span 8 / span 8; |
col-span-9 | grid-column: span 9 / span 9; |
col-span-10 | grid-column: span 10 / span 10; |
col-span-11 | grid-column: span 11 / span 11; |
col-span-12 | grid-column: span 12 / span 12; |
col-start-full | grid-column: 1 / -1; |
col-start-1 | grid-column-start: 1; |
col-start-2 | grid-column-start: 2; |
col-start-3 | grid-column-start: 3; |
col-start-4 | grid-column-start: 4; |
col-start-5 | grid-column-start: 5; |
col-start-6 | grid-column-start: 6; |
col-start-7 | grid-column-start: 7; |
col-start-8 | grid-column-start: 8; |
col-start-9 | grid-column-start: 9; |
col-start-10 | grid-column-start: 10; |
col-start-11 | grid-column-start: 11; |
col-start-12 | grid-column-start: 12; |
col-start-13 | grid-column-start: 13; |
col-start-auto | grid-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!
