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.html 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.