When several elements need to form rows and columns, apply `display: grid` to their parent. That element becomes a grid container, and its direct children become grid items. The container uses normal block behavior and fills the available width; `inline-grid` instead flows inline and takes only the width it needs. section 5.1
Start with six boxes
A parent with `display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.5em` lays out six child boxes in three equal columns and two rows. Each `fr` assigns a share of the available space; `gap` separates the boxes. Columns can also mix fixed and flexible widths, such as `300px 1fr`. section 5.1
A grid template defines tracks—rows and columns—between grid lines. Where a row and column overlap is a cell; a rectangular group of cells is an area. These distinctions matter when an item must span more than one cell. 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;
}
See a top-level page grid with a wide main column, a narrow sidebar, and items assigned to particular rows and columns. section 5.2
The template need not anticipate every item. Tracks declared with `grid-template-*` form the explicit grid; placing an item beyond them creates implicit tracks. These default to `auto`, but the container can size them with `grid-auto-rows` or `grid-auto-columns`. A photo portfolio can therefore define its columns while gaining new rows as more images flow in. section 5.4
Container-level alignment offers another choice when tracks do not fill the container: `justify-content` and `align-content` place or distribute the tracks horizontally and vertically. For responsive columns, apply `display: grid` inside a media query only when the available width makes side-by-side items comfortable; below that breakpoint, let them stack in normal flow. section 5.6 section 7.2.3
A grid container ordinarily organizes its direct children. When content inside those children must align across cards, subgrid lets an inner grid use its parent grid’s lines. Check support before relying on it: subgrid is newer and has not been as broadly supported as grid. section 5.5
