Experiment with CSS subgrid to align nested grid items with parent tracks using visual controls.
CSS Subgrid Playground makes the relationship between parent and nested tracks visible. Its controls let you vary the parent grid, the nested grid's span, and the axis that uses subgrid, then observe whether inner items share the parent's track boundaries. The important surprise is that subgrid is axis-specific. Using grid-template-columns: subgrid adopts the relevant parent columns but does not adopt its rows. Also, a nested grid spanning only part of its parent receives only that portion of the parent's track structure.
When a nested grid uses subgrid on an axis, it does not define an independent track list on that axis. Its tracks correspond to the parent tracks covered by the nested grid item's placement and span. This shared geometry is what lets content in separate nested containers align to common parent column or row boundaries.
Columns and rows can use subgrid independently. A container may inherit parent columns while defining its own rows, inherit parent rows while defining its own columns, or use subgrid on both axes. Changing how many parent tracks the container spans changes the inherited track range available for placing its children.
No. It uses the parent tracks only on the axis declared as subgrid and only across the area spanned by the nested grid item. A child covering three parent columns receives that corresponding three-track range, not unrelated columns elsewhere in the parent. The other axis remains independent unless it also uses subgrid.
Yes. Set grid-template-columns to subgrid and define the row tracks normally on the nested grid. The reverse arrangement is also valid: rows can follow the parent while columns remain independently defined. This distinction is useful when only one direction needs alignment across neighboring nested components.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.