Grid
You might say
Arrange these cards in a clean grid that switches to two columns on narrower screens.
Plan rows and columns as one layout systemCSS Grid controls two-dimensional layouts where rows and columns work together. It suits galleries, dashboards, and page regions. Let columns adapt to available space instead of copying one fixed desktop grid onto every screen.
Know first
When to use it
- Responsive card gallery
- Dashboard panels
- Page regions with aligned rows and columns
- Layouts with intentional spanning
When NOT to use it
- Use grid for a simple one-dimensional row
- Hard-code many columns on small screens
- Reorder content visually in a way that breaks reading order
- Create empty tracks only to imitate spacing
Anatomy
Grid
Write display: grid on the parent element
Each defined row or column track
The grid formed by the intersection of rows and columns
The gaps between grid items, declared once for the whole grid
Variants
Repeat
Each column of the card wall is the same width
AutoFill
When the width changes, the number of columns automatically increases or decreases.
Gap
Use gap to uniformly manage row and column spacing
TwoColumns
Overall framework like sidebar + content
Typical use cases
Card gallery
repeat(3, 1fr) three equal columns
Dashboard
auto-fill + minmax, adjust the number of columns according to the available width
Media grid
grid-template-columns: 2fr 1fr
Visit trends
Registered user
8,921Conversion rate
4.6%Page shell
grid-template-columns: 120px 1fr
Further reading