# CSS Grid — Allowed

This gauge covers the promoted Grid chapter after Phase 7.

## Learning goal

Build two-dimensional layouts with explicit tracks, deliberate placement, responsive track repetition, and clear item/content alignment while preserving logical source order.

## Inherited tools

Everything allowed through `../phase7/allowed.md` remains available.

## Document metadata

- `meta` with `charset="UTF-8"`
- `meta` with `name="viewport"` and `content="width=device-width, initial-scale=1.0"`

## Grid foundations

- `display: grid`
- `grid-template-columns`
- `grid-template-rows`
- `gap`, `row-gap`, and `column-gap`

## Placement properties

- `grid-column`
- `grid-row`
- `grid-template-areas`
- `grid-area`

Line-based placement may use positive line numbers, negative end lines, and `span`. Named areas must form complete rectangles.

## Track functions and keywords

- `repeat()`
- `minmax()`
- `auto-fit`
- `auto-fill`
- Track sizes may use inherited units plus `fr`, `auto`, `min-content`, and `max-content`

## Alignment properties

- `justify-items`: `stretch`, `start`, `end`, `center`
- `align-items`: `stretch`, `start`, `end`, `center`
- `justify-content`: `start`, `end`, `center`, `stretch`, `space-between`, `space-around`, `space-evenly`
- `align-content`: `start`, `end`, `center`, `stretch`, `space-between`, `space-around`, `space-evenly`

## Learning rules

1. Grid properties affect the direct children of a grid container.
2. Columns run on the inline axis; rows run on the block axis.
3. Track lines number the boundaries around tracks, starting at 1.
4. `grid-column` and `grid-row` place an item by its start and end lines; `span` states how many tracks it covers.
5. `grid-area` may place an item into a named template area. Keep the DOM in a meaningful reading order.
6. `repeat()` removes repeated track declarations; `minmax()` gives a track a lower and upper size.
7. `auto-fit` collapses empty repeated tracks, while `auto-fill` preserves them.
8. `justify-items` and `align-items` align items inside their grid areas.
9. `justify-content` and `align-content` align the entire track collection and require spare container space to show an effect.

## Not allowed

- JavaScript
- Media queries and inline styles
- Grid auto-placement controls not listed here (`grid-auto-flow`, `grid-auto-columns`, and `grid-auto-rows`)
- Item-specific Grid alignment (`justify-self`, `align-self`, and `place-self`)
- Grid alignment shorthands (`place-items` and `place-content`)
- Any HTML tag or CSS property not inherited or listed above

## Pages

- `01-grid-tracks.html` — Grid foundations, columns, rows, and gaps
- `02-grid-placement.html` — line placement and spans
- `03-grid-areas.html` — named template areas and source order
- `04-track-functions.html` — `repeat()` and `minmax()`
- `05-responsive-grid.html` — `auto-fit` versus `auto-fill`
- `06-item-alignment.html` — item alignment inside cells
- `07-content-alignment.html` — track collection alignment
- `08-full-bleed-breakout.html` — four-track gutter breakout (rule 36)

## Rules to lean on

Rules 2, 10–12, 54–59, 72–80, 88, and 89–98.