Advanced CSS Grid
Choose Design > Layout > Advanced > Display > grid on the container.
Define Tracks
- Grid — CSS
gridshorthand for explicit tracks and implicit behavior. - Grid Template — CSS
grid-templateshorthand for explicit rows, columns, and named areas. Emitted after Grid, so overlapping settings win.
Enter values without property names or semicolons. auto / 2fr 1fr defines an automatic row and 2:1 columns; auto / minmax(0, 1fr) defines one column. Named areas do not assign children automatically.
Spacing and Alignment
- Gap / Row Gap — Track spacing / row override.
- Justify Items — Horizontal cell alignment: Start, End, Center, Stretch.
- Align Items — Vertical cell alignment: those choices plus Baseline.
- Justify Content / Align Content — Horizontal/vertical track distribution within free space: Start, End, Center, Stretch, Space Around, Space Between, Space Evenly.
- Text Align — Inherited Left, Center, or Right.
Implicit Tracks
- Grid Auto Columns / Grid Auto Rows — Sizes of additional columns/rows.
- Grid Auto Flow — Row, Column, Row Dense, or Column Dense placement. Dense fills earlier gaps and can change visual order.
Implicit settings do not replace explicit tracks. Use responsive track definitions to change column counts.
