CSS Grid is the part of CSS for laying out a page or section in rows and columns at the same time, like a table you can draw freely. You define the grid on a container, then place items into its cells or let them flow in automatically. All major browsers have supported it since 2017.
How grid tracks and areas work
Setting display: grid on an element makes it a grid container. grid-template-columns and grid-template-rows define the tracks. The fr unit shares out leftover space, so grid-template-columns: 1fr 2fr makes the second column twice as wide as the first. gap sets the gutters.
Items can span several tracks (grid-column: span 2) or be placed by line numbers. For whole-page structure, grid-template-areas lets you name regions such as header, sidebar, main and footer, and draw the layout as text. Subgrid, now supported across major browsers, lets a nested element line its contents up with the parent grid's tracks.
An example: a responsive photo gallery
A wedding photographer wants a portfolio that shows as many columns as fit. One line handles it: grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)). On a phone that gives one column, on a tablet two or three, on a wide monitor five, with every photo the same width and evenly spaced, and no media queries at all. A featured image can span two columns and two rows to break up the rhythm.
Where Grid fits next to flexbox
Grid sets out structure first and fits content into it, in two dimensions. Flexbox arranges a single line and lets content sizes lead. Card galleries, pricing tables that must align across columns, and overall page skeletons are Grid's territory; the row of buttons inside each card is usually flexbox. Grid in CSS is also distinct from the design idea of a grid system, though it is a natural way to implement one.
For a business site, Grid is why galleries, product listings and service tiles can stay neat at every screen width without separate mobile and desktop versions.
Common CSS Grid mistakes
- Visual order that differs from source order. Placing items out of sequence confuses keyboard and screen-reader users, who follow the HTML order.
- Fixed column widths in pixels, which overflow small screens; prefer
frandminmax(). - Mixing up auto-fill and auto-fit. auto-fill keeps empty tracks, auto-fit collapses them so items stretch.
- Using Grid for a simple one-line row where flexbox is shorter and clearer.
Related terms
- Flexbox: the one-dimensional companion layout.
- Grid system: the design concept of columns and gutters.
- Responsive design: what auto-fill grids make easy.
- CSS: the language Grid is part of.