Styling & CSS · Layout
CSS Grid
Also called: Grid, Grid layout, display: grid
Divides an area into a grid of rows and columns, then places elements into the cells. Good for two-dimensional layouts where both rows and columns need to line up.
In detail
Give a parent element display: grid, then use grid-template-columns to define how many columns there are and how wide each one is. repeat(3, 1fr) means three equal columns, and 240px 1fr means a fixed 240px on the left with the rest going to the right. gap sets the space between cells, and grid-column: span 2 makes a child span two columns.
Grid is great at "two-dimensional" layouts: card walls, photo galleries, the multiple panels of a dashboard, and full-page frames like "sidebar + top bar + content." The common pattern repeat(auto-fill, minmax(200px, 1fr)) lets the container width decide how many cards fit per row, so it's responsive without writing any media queries.
How it differs from Flex: Flex lays things out along one line, while Grid aligns rows and columns at the same time. Use Grid for the page frame, and Flex for a row of small elements inside it.
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-grid- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026