How to Inspect and Debug CSS Subgrid Layouts in Safari Web Inspector

In complex web layouts\u2014such as product comparison tables, card grids with varying text lengths, and multi-tier dashboard cards\u2014aligning internal child elements across neighboring cards has historically been one of CSS\u2019s most notorious limitations. While standard CSS Grid (display: grid) aligns direct children within parent tracks, nested grandchildren or child containers establish their own independent grid tracks, breaking horizontal alignment between sibling elements. With CSS Grid Level 2, the subgrid value allows nested grids to adopt and share their parent container\u2019s track sizing and line definitions. Safari on macOS includes native, comprehensive Subgrid inspection and overlay tools directly within Safari Web Inspector.

Understanding CSS Subgrid Architecture

When an element becomes a subgrid, it delegates its track definitions to its parent grid container:

• grid-template-columns: subgrid: The nested grid inherits parent column lines and widths across the columns it spans.
• grid-template-rows: subgrid: The nested grid adopts parent row tracks, allowing headers, body paragraphs, and action buttons inside adjacent cards to line up horizontally regardless of varying content height.
• Track Span Requirements: A subgrid must span two or more tracks of its parent grid (e.g., grid-row: span 3) to inherit corresponding parent tracks.
• Gaps and Margins: Subgrids can either inherit parent grid gaps (default) or define independent gap rules that offset child lines while maintaining track alignment.

Opening Safari Web Inspector and Selecting Grid Containers

To inspect and debug subgrid layouts in Safari:

1. Open Safari on macOS.
2. Enable developer tools via Safari > Settings > Advanced > Show features for web developers.
3. Right-click the card layout or table structure and choose Inspect Element (or press Option + Command + I).
4. In the Elements DOM tree, locate the parent grid container.

Notice the interactive badges in the DOM tree:

• Parent grid containers are marked with a purple grid badge.
• Nested subgrid containers display a distinct subgrid badge.

Enabling Visual Grid and Subgrid Overlays

To visualize how parent tracks map into child subgrids:

1. Click the grid badge next to the parent element in the DOM tree. Safari renders semi-transparent grid lines, track numbers, and gap shading directly over the live webpage.
2. Next, click the subgrid badge on the child element. Safari renders a secondary overlay with distinct dashed lines showing the child\u2019s inherited tracks.
3. In the right sidebar, switch to the Layout tab.
4. Under Grid Overlays, verify that both the parent grid and the subgrid checkboxes are enabled.
5. Check Show Track Sizes and Show Line Numbers to inspect computed pixel and fractional (fr) widths across columns.

Debugging Row Alignment Across Sibling Cards

Consider a standard three-column card grid where each card contains a title, description, and button:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto 1fr auto;
  gap: 24px;
}

.card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
}

Inside Safari Web Inspector:

• Verify that each .card element declares grid-row: span 3. If the span declaration is missing or set to span 1, WebKit cannot map the three internal rows, causing subgrid tracks to collapse.
• Inspect the description track (row 2). Because it is sized as 1fr in the parent grid, all cards expand harmoniously to match whichever card has the longest text description, keeping the footer buttons in row 3 perfectly aligned at the bottom across all three columns.

Diagnosing Subgrid Overflows and Fallback Behaviors

If subgrid styling fails or elements overlap unexpectedly, inspect the Styles panel for common pitfalls:

• Missing display: grid: A container declaring grid-template-columns: subgrid must also declare display: grid. Without it, WebKit ignores the subgrid template.
• Independent Gaps: If you declare a custom row-gap on the subgrid that differs from the parent, WebKit offsets items from parent tracks. In the Layout tab, verify whether gap is inherited or overridden.
• Named Grid Lines: Parent grid line names (e.g., [header-start], [content-end]) pass through to the subgrid, allowing nested elements to position themselves using parent line names.