Tailwind CSS
/Intermediate
Column & Row Span
Definition
Utilities for controlling how many columns or rows a single grid item should stretch across.
Explain Like I'm New
If you have a 3-column grid, but you want a massive 'Featured Image' to stretch all the way across the top, you use `col-span-3`. It tells that specific item to merge 3 cells together into one giant cell.
Real World Example
A newspaper layout where the main headline article spans 2 columns, while the minor articles next to it only span 1 column.
Common Use Cases
- •Bento layouts
- •Feature highlights
- •Complex forms
Interactive Example
Interview Questions
basic
- If a parent is `grid-cols-4`, what class makes a child take up half the grid?
intermediate
- What does `col-span-full` do?