How to Inspect CSS Subgrid Alignment and Sizing in Safari Web Inspector

Traditional CSS Grid layouts constrain track definitions exclusively to direct children of the grid container. When child cards contain multiple nested elements (such as titles, varying-length descriptions, author metadata, and action buttons), achieving consistent vertical alignment across neighbouring cards previously required rigid fixed heights or fragile JavaScript calculations. The CSS Grid Level 2 Subgrid specification (grid-template-columns: subgrid and grid-template-rows: subgrid) allows nested grids to adopt the track sizing and alignments of their parent grid. Safari Web Inspector provides specialized grid overlay visualization to inspect and debug subgrid structures.

Understanding Subgrid Mechanics: Adopting Parent Tracks

Subgrid establishes a direct relationship between parent and child grid structures:

• grid-template-rows: subgrid: The nested grid inherits the row tracks defined by the outer parent grid container for the span of rows it occupies.
• grid-row: span 4: Instructs the card to participate in 4 discrete rows of the parent grid (e.g., Row 1: Header, Row 2: Subtitle, Row 3: Content Body, Row 4: Footer Button).
• Independent Track Sharing: A child can declare a subgrid along its row axis while defining an independent, non-subgrid track layout along its column axis (or vice versa).
• Shared Gap Inheritance: The subgrid automatically inherits the parent container’s gap properties unless explicitly overridden.

Implementing Multi-Card Subgrid Alignments in Modern CSS

Here is a complete responsive card layout using CSS subgrid to align card headers and action buttons perfectly across all cards:

/* 1. Parent Grid Container */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: start;
}

/* 2. Card item spanning 4 rows and declaring row subgrid */
.card-item {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* 3. Nested card elements aligned across all cards */
.card-badge {
    grid-row: 1;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0071e3;
    text-transform: uppercase;
}

.card-title {
    grid-row: 2;
    margin: 0;
    font-size: 1.25rem;
}

.card-description {
    grid-row: 3;
    margin: 0;
    color: #4b5563;
    line-height: 1.5;
}

.card-action {
    grid-row: 4;
    margin-top: 12px;
    align-self: end;
}

Inspecting Subgrid Overlays in Safari Web Inspector

Safari on macOS provides dedicated tools to visualize inherited subgrid lines and verify row boundaries:

1. Open Safari, navigate to your webpage, and open Web Inspector via Option+Command+I.
2. In the Elements DOM tree, locate the parent grid element (.card-grid). Notice the small grid badge adjacent to the element tag.
3. Click the grid badge to toggle the parent grid overlay on the page viewport. Safari highlights the track columns and rows with colored dashed lines.
4. Expand the parent node in the DOM tree and locate a child element declaring grid-template-rows: subgrid. Notice the distinct subgrid badge next to the child node.
5. Click the subgrid badge. Safari overlays the inherited subgrid tracks in a distinct contrasting colour, displaying row numbers and alignment lines.
6. In the Styles panel, inspect the grid-template-rows: subgrid declaration. Confirm that Safari does not flag any syntax warnings or invalid track fallback rules.

Diagnosing Subgrid Pitfalls in Web Inspector

• Span Mismatch: If a child declares grid-row: span 3 but contains 4 child elements, the 4th element is forced into an implicit track outside the subgrid, disrupting layout alignment. Ensure the span value matches the total number of nested element rows.
• Overridden Gaps: If a subgrid specifies a custom row-gap that differs from the parent, Safari Web Inspector indicates a track offset warning, as elements may not align flush across columns.
• Margins and Padding: Remember that padding on the subgrid container offsets the first and last inherited tracks relative to the outer container.