CSS grid arranges elements in rows and columns. Use it when parts of a page need to align across both directions: a heading can span the page, while a main region and sidebars occupy tracks beneath it. Items can fill one cell or span several, and the grid can have precisely defined sizes or grow to fit its contents. section 5.0 section 5.2
Set `display: grid` on a container; its children become grid items. Define tracks with `grid-template-columns` and `grid-template-rows`, then use `gap` to separate them. For example, `grid-template-columns: 1fr 1fr 1fr` creates three equal-width columns. `300px 1fr` instead pairs a fixed column with one that fills the remaining space. section 5.1
Listing 5.2 Laying out a basic grid
.grid {
display: grid; #1
grid-template-columns: 1fr 1fr 1fr; #2
grid-template-rows: 1fr 1fr; #3
gap: 0.5em; #4
}
.grid > * {
background-color: darkgray;
color: white;
padding: 2em;
border-radius: 0.5em;
}
The six-item example connects a three-column, two-row template to the rendered boxes and shows where the gap is declared. section 5.1
A grid line borders a track; a row or column is a track. Where one row and one column overlap is a cell, and a rectangular span of cells is an area. These distinctions matter when placing page regions: in a two-column, four-row layout, a heading and navigation each span both columns, while the main region spans two rows beside stacked sidebar tiles. A cell may also be left empty for whitespace. Grid items in this layout are direct children of the container, rather than elements nested to form separate rows and columns. section 5.2
Listing 5.4 Applying a top-level page layout using grid
*,
::before,
::after {
box-sizing: border-box;
}
:root {
--gap-size: 1.5rem;
}
body {
background-color: #709b90;
font-family: Helvetica, Arial, sans-serif;
}
.stack > * + * {
margin-block-start: 1.5em;
}
.container {
display: grid;
grid-template-columns: 2fr 1fr; #1
grid-template-rows: repeat(4, auto); #2
gap: var(--gap-size);
max-inline-size: 1080px;
margin-inline: auto;
}
header,
nav {
grid-column: 1 / 3; #3
grid-row: span 1; #4
}
.main {
grid-column: 1 / 2; #5
grid-row: 3 / 5; #5
}
.sidebar-top {
grid-column: 2 / 3; #5
grid-row: 3 / 4; #5
}
.sidebar-bottom {
grid-column: 2 / 3; #5
grid-row: 4 / 5; #5
}
.tile {
padding: 1.5em;
background-color: #fff;
}
.tile > :first-child {
margin-top: 0;
}
The page-layout listing shows `2fr 1fr` columns, repeated rows, and numbered grid lines used to place spanning regions. section 5.2
Grid and flexbox solve different alignment problems. Grid describes a two-dimensional layout first, then places items into it; a grid item's content can affect the size of its entire track. Flexbox arranges items along one dimension and lets their content play a greater role in their widths. A practical page can use grid for its main regions and flexbox for a horizontal navigation menu. section 5.2.2
For responsive columns, redefine a grid's tracks at a breakpoint, or use `auto-fit` or `auto-fill` so the number of columns follows available space. One card layout starts as stacked blocks on small screens, then applies `repeat(auto-fit, minmax(300px, 1fr))` at larger widths. Choose breakpoints when the design's columns become too narrow, rather than targeting a particular device. section 7.2.3 section 17.2.1
