CSS Grid turns a container into a two-dimensional layout system: columns run horizontally, rows run vertically, and their intersections form cells. Rather than letting elements affect one another through normal flow, Grid computes track sizes and item positions inside a defined space. This makes complex page layouts more deliberate and predictable. section 4.1 section 4.1.2
Start with `display: grid`. Its children become grid items, leave ordinary block or inline flow, and are placed by the grid model. The container calculates their sizes and positions; inline children occupy cells instead of line-wrapping normally. section 4.1.1
Place an item by grid lines
Think of grid lines as graph-paper boundaries, numbered from 1. A cell in column 3 and row 2 lies between column lines 3 and 4 and row lines 2 and 3. `grid-column: 3 / 4` and `grid-row: 2 / 3` place an item in that cell; `grid-column: 2 / 4` and `grid-row: 1 / 3` make it span multiple cells. section 4.2.1
Listing 4.1 A grid container
.container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 50px 150px;
}
Use this small container definition to inspect three fixed columns and two fixed rows before placing or spanning items between its numbered lines. section 4.2.1
Track definitions let Grid divide available space without manually calculating every item position:
- Use fixed units, `auto`, `minmax()`, and `fit-content()` to control how tracks size around available space and content. section 4.1 section 4.6
- Use `fr` units to share leftover space after fixed tracks, gaps, padding, and borders are accounted for. section 4.6
- Use `repeat()` with `auto-fit` to collapse unused tracks and redistribute space, or `auto-fill` to retain empty tracks. section 4.6
- Use negative line numbers only against explicit tracks; they do not address auto-generated implicit tracks. section 4.6
Grid is responsive before media queries enter the picture. Fractional tracks, `auto-fit`, and `auto-fill` can adapt a layout to its container size, while `minmax()` supplies bounds for growth and shrinkage. Use Grid when both axes need coordinated control; Flexbox distributes space along one axis at a time. section 6.2.1 section 4.1.4
