Tailwind CSS
/Advanced
Responsive Grid
Definition
Using breakpoints specifically with CSS Grid `grid-cols-*` to create complex wrapping data layouts without writing media queries.
Explain Like I'm New
The fastest way to build an image gallery. Start with `grid-cols-1` for phones. Jump to `sm:grid-cols-2` for big phones. Jump to `md:grid-cols-3` for iPads. Jump to `lg:grid-cols-4` for laptops. The browser does all the complex math perfectly.
Real World Example
An Airbnb search results page. On a phone, you see 1 house per row. On a massive monitor, you see 5 houses per row.
Common Use Cases
- •Product listings
- •Photo galleries
- •Data dashboards
Interactive Example
Interview Questions
basic
- If you write `<div class="grid grid-cols-1 md:grid-cols-3">`, how many items will fit on one row on a tablet (md) screen?
intermediate
- How can you make a specific 'Featured Item' span across all columns on mobile, but only span 2 columns on desktop?