Pico’s grid class enables a minimal auto-fit column layout—direct children become equal-width columns on wide viewports and stack below ~768px. It is intentionally small: not a 12-column Bootstrap-style system.
When to use grid
- Feature trio, pricing cards, or stats row with similar columns
- Prototypes where flex utility frameworks feel heavy
- Inside
main.containerafter semantic structure is correct
For complex breakpoints and offsets, reach for CSS Grid in your own stylesheet or a utility track like Tailwind. Pico’s grid is a shortcut, not a full layout engine.
Important interview questions and answers
- Q: Why doesn’t Pico ship a 12-column grid?
A: A full grid utility set can exceed Pico’s entire CSS size—against the project goal of staying class-light. - Q: Is
gridavailable in classless Pico?
A: No. The classless build relies on semantic containers;gridis part of the optional class API.
Self-check
- What happens to
gridchildren on narrow viewports? - When would you choose custom CSS Grid over Pico’s
grid?
Challenge
Optional grid
- Add Pico
gridwith threearticlechildren. - Resize—columns should reflow using Pico defaults.
Done when: three cards reflow without Bootstrap-style column classes.