CSS Subgrid Support

Perfect alignment for nested grids - headers, images, prices, and buttons line up beautifully across cards

What is CSS Subgrid?

CSS Subgrid allows nested grids to inherit their parent's grid tracks, enabling perfect alignment across nested content. This is essential for card layouts where you want headers, images, prices, and buttons to align across all cards, even when content has different heights.

Key Benefits

  • Perfect Alignment: Nested content aligns with parent grid tracks
  • Flexible Content: Different content lengths don't break alignment
  • Cleaner Code: No manual height calculations or JavaScript needed
  • Responsive: Maintains alignment across all breakpoints

Common Use Cases

  • Product Cards: Image, title, price, and button alignment
  • Dashboard Widgets: Headers and values align across widgets
  • Complex Forms: Nested fieldsets with aligned labels/inputs
  • Table-like Layouts: Without using actual HTML tables

Example 1: Product Card Grid with Subgrid

The most common use case: product cards where all headers, images, prices, and buttons align perfectly across cards, regardless of title length or description content.

Premium Laptop

$1,299

Tablet Pro with Extended Battery Life

$899

Smartphone

$699

HTML 
<!-- Parent grid with 3 columns and auto rows -->
<div class="slot-layout" data-cols-xs="1" data-cols-md="2" data-cols-lg="3"
     data-auto-rows="auto">

    <!-- Each card spans 4 rows and uses subgrid to align sections -->
    <div class="slot-item card" data-subgrid="rows" data-row-span="4">
        <div class="card-image">...</div>
        <div class="card-header">...</div>
        <div class="card-body">...</div>
        <div class="card-footer">...</div>
    </div>

    <!-- More cards spanning same 4 rows... -->
</div>

How It Works

The parent uses data-auto-rows="auto" to enable automatic row sizing. Each card uses data-subgrid="rows" to inherit the parent's row tracks and data-row-span="4" to span 4 rows (image, header, body, footer). Even though the second card has a longer title, all the prices and buttons align perfectly across all cards because they're using the same row tracks.

Example 2: Dashboard Widgets with Aligned Values

Dashboard layouts where widget values and labels need to align, creating a clean, professional appearance.

Total Revenue
$24,567
This month
Active Users
1,234
Currently online
Conversion Rate
3.24%
Up 0.5% from last week
Avg. Order Value
$156
Per transaction
HTML 
<div class="slot-layout" data-cols-xs="1" data-cols-md="2" data-cols-lg="4"
     data-auto-rows="auto">
    <div class="slot-item widget" data-subgrid="rows" data-row-span="3">
        <div class="widget-header">Total Revenue</div>
        <div class="widget-value">$24,567</div>
        <div class="widget-label">This month</div>
    </div>
    <!-- More widgets... -->
</div>

Example 3: Complex Form with Aligned Labels

Forms where you want labels and inputs to align consistently, even with nested fieldsets.

HTML 
<div class="slot-layout" data-cols-xs="1" data-cols-md="2"
     data-auto-rows="auto">
    <div class="slot-item form-group" data-subgrid="rows" data-row-span="2">
        <label class="form-label">First Name</label>
        <input type="text" class="form-input">
    </div>
    <!-- More form fields... -->
</div>

Comparison: Regular Nested Grid vs Subgrid

See the difference! Without subgrid, each card is an independent grid. With subgrid, all cards share the same grid tracks for perfect alignment.

Without Subgrid

Independent grids - no alignment

📱

Product A

$99

💻

Product B with Longer Title

$149

Notice how the prices don't align

With Subgrid

Shared grid tracks - perfect alignment

📱

Product A

$99

💻

Product B with Longer Title

$149

Prices align perfectly!

How to Use Subgrid with RSL

Row Subgrid for Cards (Most Common)

<!-- Parent grid with auto rows -->
<div class="slot-layout" data-cols-xs="1" data-cols-md="3" data-auto-rows="auto">

    <!-- Each card uses subgrid to align sections -->
    <div class="slot-item card" data-subgrid="rows" data-row-span="4">
        <div class="card-image">...</div>
        <div class="card-header">...</div>
        <div class="card-body">...</div>
        <div class="card-footer">...</div>
    </div>
</div>

Perfect for card grids where images, headers, prices, and buttons align across cards.

Row Subgrid for Dashboard Widgets

<div class="slot-layout" data-cols-xs="1" data-cols-md="4" data-auto-rows="auto">

    <div class="slot-item widget" data-subgrid="rows" data-row-span="3">
        <div class="widget-header">...</div>
        <div class="widget-value">...</div>
        <div class="widget-label">...</div>
    </div>
</div>

Aligns headers, values, and labels across all dashboard widgets.

Row Subgrid for Forms

<div class="slot-layout" data-cols-xs="1" data-cols-md="2" data-auto-rows="auto">

    <div class="slot-item form-group" data-subgrid="rows" data-row-span="2">
        <label class="form-label">...</label>
        <input class="form-input">
    </div>
</div>

Aligns labels and inputs across form fields, even with different label lengths.

Key Data Attributes

  • data-auto-rows="auto" on parent grid - enables auto row sizing
  • data-subgrid="rows" on child items - inherits parent's row tracks
  • data-row-span="N" on child items - spans N rows (supports 2-6)
  • data-subgrid="columns" also available for column alignment
  • data-subgrid="both" for both row and column alignment

Browser Support

CSS Subgrid is supported in all modern browsers as of 2023:

Chrome
117+
Firefox
71+
Safari
16+
Edge
117+

Fallback behavior: If subgrid is not supported, the layout will use regular nested grids (which still work, just without perfect alignment).