Grid utilities define tracks and gaps: grid, grid-cols-3, grid-rows-2, gap-6, col-span-2. Responsive grids layer prefixes: grid-cols-1 md:grid-cols-2 lg:grid-cols-4.
When grid wins
Dashboards, photo galleries, and form layouts with aligned columns benefit from grid’s two-dimensional control—concepts from CSS grid apply unchanged.
Important interview questions and answers
- Q: How do you span two columns?
A:col-span-2on the item; ensure the parent defines enough columns. - Q: grid-cols-3 on mobile?
A: Often too tight—startgrid-cols-1, addmd:grid-cols-3for mobile-first layouts.
Self-check
- Write a class list for a 1-column mobile, 3-column desktop grid with gap-4.
- What utility makes one cell twice as wide in a 4-column grid?
Challenge
Responsive cards
- Start with
grid-cols-1. - Add
md:grid-cols-2 lg:grid-cols-3and resize the preview.
Done when: column count increases as the viewport widens.