CSS Grid arranges the direct children of a container in rows and columns. Use it for layout, from a whole page to a small component. Keep tables for tabular data rather than using them to position page content. section 2.1 section 5.6
Start with a grid container
Suppose a page’s <main> contains a header, article, and aside. Start with `main { display: grid; }`. The browser creates a one-column grid and enough rows for its children, so the page may look unchanged at first. Inspect the container in browser developer tools to see the grid. Use `display: inline-grid` instead when the grid itself should be an inline-level box. section 2.1 section 2.2
Add only the controls the layout needs:
- Define track sizes with `grid-template-columns` and `grid-template-rows`. The `fr` unit provides a flexible length; `repeat()` avoids repeating equal track definitions; `minmax()` sets minimum and maximum sizes. section 2.7
- Name locations with `grid-template-areas`, then assign children with `grid-area`. Use `gap` to create space between cells. section 2.7
- Leave placement unspecified when automatic placement does the job. On narrow screens, this can keep items stacked; media queries can change the layout as space grows. section 5.2.1 section 5.2
Grid can also align content. For example, `body { display: grid; place-items: center; }` centers its child elements within their grid cells. `place-items` combines `align-items` and `justify-items`. section 5.2.1
Listing 8.22 Description list styles
dl {
display: grid;
gap: .5rem;
grid-template-columns: auto max-content; #1
padding: 0 1rem;
}
dd { text-align: right; }
This checkout-cart description list uses `display: grid`, two columns, and a gap. Its children fill available cells automatically, without individual placement rules. section 8.3.2
Visual placement should not disrupt the logical order of the source. Check keyboard tab order in developer tools when a rearranged grid might make navigation confusing. section 2.7
