Tailwind CSS 60 🎨 CSS Grid Subgrid Integration and Deep Nested Layout Alignment - KandZ

A nested grid has always been a separate grid. When a grid item becomes a grid container, its rows and columns are its own. The child tracks do not know about the parent tracks, and the content inside the child cannot align with the parent’s columns. Subgrid changes this. It lets a nested grid adopt the parent’s tracks instead of defining new ones, so the child’s items sit on the same lines as the parent’s items. Tailwind exposes this through grid-cols-subgrid and grid-rows-subgrid, and the result is the feature that finally solves deep nested alignment without hacks, without JavaScript, and without manual track sizing .

Key point: A subgrid is a grid item that is also a grid container. It must span the parent tracks it wants to adopt, and it must declare subgrid on the axis it wants to inherit. The tracks are shared, but the line numbers restart inside the subgrid, so the child’s col-start-1 refers to the subgrid’s first line, not the parent’s .

Why subgrid exists

The nested alignment problem. A card inside a page grid has its own internal layout. The card’s title, image, and text are aligned to the card’s grid, not the page’s. If the page has a 12-column grid and the card spans columns 3 through 8, the card’s internal columns do not line up with the page’s columns. The card looks like it is on its own grid, because it is.

The hacks. Before subgrid, aligning nested content with the parent grid required fixed widths, calc() expressions, or JavaScript. Each hack was fragile, and each broke when the parent’s tracks changed. The nested grid had no access to the parent’s computed sizes.

The gap problem. A nested grid has its own gap. When the nested grid is placed inside the parent, the gaps do not match. The child’s items are spaced by the child’s gap, and the parent’s items are spaced by the parent’s gap. Subgrid inherits the parent’s gap by default, so the spacing is consistent .

The line-name problem. A parent grid can name its lines. Before subgrid, the names were lost at the boundary. The child could not use col-start-[main-content] because the name was not visible inside the child. Subgrid passes the line names down, so the child can place its items on named lines .

The component problem. A component should not know where it is placed. A card that spans columns 3 through 8 should not hardcode the column numbers. With subgrid, the card declares col-span-6 and grid-cols-subgrid, and its internal items align to whatever columns the card occupies. The component is portable .

The table problem. A data table with a header row and data rows needs the columns to align. Without subgrid, each row is a separate grid, and the columns do not line up. With subgrid, each row is a subgrid that inherits the parent’s column tracks, and the alignment is automatic .

a. The subgrid utilities

Tailwind provides two utilities for subgrid: grid-cols-subgrid and grid-rows-subgrid. Each sets the corresponding grid-template property to subgrid.

The column subgrid

grid-cols-subgrid sets grid-template-columns: subgrid. The element adopts the parent’s column tracks.

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 grid grid-cols-subgrid gap-4">
    <div class="col-span-2">Aligned</div>
  </div>
</div>

The parent has four columns. The child spans two of them and becomes a subgrid. The child’s items are placed on the parent’s lines 1 through 3, which correspond to the two columns the child occupies.

The row subgrid

grid-rows-subgrid sets grid-template-rows: subgrid. The element adopts the parent’s row tracks.

<div class="grid grid-rows-3 gap-4">
  <div class="row-span-2 grid grid-rows-subgrid gap-4">
    <div class="row-span-2">Aligned rows</div>
  </div>
</div>

The child spans two rows and inherits the parent’s row tracks. Its items are placed on the parent’s row lines.

The two-dimensional subgrid

An element can inherit both axes.

<div class="grid grid-cols-4 grid-rows-3 gap-4">
  <div class="col-span-2 row-span-2 grid grid-cols-subgrid grid-rows-subgrid gap-4">
    <div class="col-span-2 row-span-2">Aligned</div>
  </div>
</div>

The child inherits both the column and row tracks from the parent.

The span requirement

A subgrid must span the tracks it wants to inherit. The col-span-* or row-span-* utility on the subgrid item determines how many parent tracks it occupies.

<div class="grid grid-cols-12">
  <!-- The subgrid spans 6 columns. -->
  <div class="col-span-6 grid grid-cols-subgrid">
    <!-- The subgrid has 6 columns, inherited from the parent. -->
    <div class="col-span-3">Half of the subgrid</div>
  </div>
</div>

Without the span, the subgrid has no parent tracks to inherit, and the subgrid value has no effect .

The line number reset

Inside the subgrid, the line numbers restart. The subgrid’s first line is line 1, even if the subgrid starts at the parent’s line 5 .

<div class="grid grid-cols-12">
  <div class="col-span-6 grid grid-cols-subgrid">
    <!-- col-start-1 is the subgrid's first line, not the parent's. -->
    <div class="col-start-1 col-span-2">First two columns of the subgrid</div>
  </div>
</div>

The subgrid’s items use the subgrid’s local line numbers. This makes the component portable: the same subgrid placed at different parent positions uses the same local line numbers.

The gap inheritance

The subgrid inherits the parent’s gap on the subgridded axis. A gap-4 on the parent applies to the subgrid’s tracks as well .

<div class="grid grid-cols-4 gap-6">
  <div class="col-span-2 grid grid-cols-subgrid">
    <!-- The subgrid's columns have the parent's 6-unit gap. -->
  </div>
</div>

The gap can be overridden with a different value, but the default is the parent’s gap.

The `contents` utility

The contents utility makes a wrapper element “transparent” to the grid. The wrapper’s children become direct grid items of the parent .

<div class="grid grid-cols-4 gap-4">
  <div class="contents">
    <div class="col-span-2">Item 1</div>
    <div class="col-span-2">Item 2</div>
  </div>
</div>

The contents wrapper does not generate a box. Its children are placed on the parent’s grid lines. This is useful for semantic wrappers that should not affect the layout.

b. The alignment patterns

Subgrid solves specific alignment problems. The patterns below are the ones that appear most often.

The table alignment

A table with a header row and data rows needs the columns to align. Each row is a subgrid that inherits the parent’s column tracks .

<div class="grid grid-cols-[1fr_auto_auto_auto] gap-x-4">
  <div class="col-span-full grid grid-cols-subgrid gap-x-4 font-semibold">
    <span>Description</span>
    <span>Quantity</span>
    <span>Price</span>
    <span>Total</span>
  </div>
  <div class="col-span-full grid grid-cols-subgrid gap-x-4">
    <span>Widget</span>
    <span>2</span>
    <span>$10</span>
    <span>$20</span>
  </div>
</div>

The header and the row are both subgrids. The columns align because they share the parent’s tracks. Changing the content in any cell does not break the alignment .

The card alignment

A grid of cards where the title, body, and footer must align across cards uses row subgrid. Each card spans the parent’s rows and inherits the row tracks .

<div class="grid grid-cols-3 grid-rows-[auto_1fr_auto] gap-4">
  <article class="row-span-3 grid grid-rows-subgrid gap-4">
    <h2>Title</h2>
    <p>Body that may be longer or shorter.</p>
    <button>Action</button>
  </article>
</div>

The card’s title, body, and footer align with the other cards’ rows because all the cards share the parent’s row tracks. The body row is 1fr, so the cards stretch to the same height.

The form alignment

A form with labels and inputs in a grid uses subgrid to align the labels and inputs across rows.

<div class="grid grid-cols-[auto_1fr] gap-4">
  <div class="contents">
    <label>Name</label>
    <input />
  </div>
  <div class="contents">
    <label>Email</label>
    <input />
  </div>
</div>

The contents utility makes the wrapper transparent, so the label and input are placed directly on the parent’s grid lines. The labels align in the first column, and the inputs align in the second.

The nested component alignment

A component that spans multiple parent columns uses column subgrid to align its internal items with the parent’s columns.

<div class="grid grid-cols-12 gap-4">
  <header class="col-span-full grid grid-cols-subgrid gap-4">
    <div class="col-span-3">Logo</div>
    <nav class="col-span-6">Navigation</nav>
    <div class="col-span-3">Actions</div>
  </header>
</div>

The header spans all 12 columns and becomes a subgrid. Its children are placed on the parent’s 12-column grid, so the logo, navigation, and actions align with the page’s columns .

The deep nesting

Subgrid can be nested multiple levels deep. Each level inherits from its parent, and the tracks propagate down.

<div class="grid grid-cols-12 gap-4">
  <div class="col-span-6 grid grid-cols-subgrid gap-4">
    <div class="col-span-3 grid grid-cols-subgrid gap-4">
      <div class="col-span-1">Deep</div>
    </div>
  </div>
</div>

The innermost item is placed on the outer grid’s column 1, even though it is three levels deep. The tracks are inherited at each level .

c. Caveats and browser support

Subgrid is supported in all modern browsers, but there are a few caveats.

The browser support

Subgrid is supported in Chrome 117+, Firefox 71+, and Safari 16+ . The feature is production-ready in every major browser, and no polyfill is needed .

The Safari overflow bug

Safari has a bug where overflow: hidden on a subgrid element prevents the subgrid from working. The element behaves as if it does not have subgrid applied . The fix is to avoid combining overflow-hidden with subgrid, or to use a wrapper.

The implicit grid restriction

A subgrid does not create implicit tracks. If the subgrid has more items than the inherited tracks can hold, the extra items are placed in the last track . The subgrid’s track count is fixed by the parent’s tracks and the subgrid’s span.

The line-number reset

The line numbers restart inside the subgrid. A component that uses col-start-1 inside a subgrid is referring to the subgrid’s first line, not the parent’s. This is the intended behavior, but it can surprise a developer who expects the parent’s line numbers to continue .

The gap override

The subgrid inherits the parent’s gap by default. A different gap can be set on the subgrid, but the change affects the subgrid’s items only, not the parent’s tracks. The gap between the subgrid and the parent’s items is still the parent’s gap.

The `overflow` interaction

The Safari bug means that overflow: hidden on a subgrid breaks the subgrid. If the subgrid needs to clip its content, the clip must be on a wrapper, not on the subgrid itself .

The performance

Subgrid reuses the parent’s already-computed track sizing. It does not add meaningful layout cost compared to a regular grid .

The Tailwind support

Tailwind v4 supports grid-cols-subgrid and grid-rows-subgrid. The utilities compile to the native grid-template-columns: subgrid and grid-template-rows: subgrid .

Complete Example Session

<!-- ============================================
     PART 1: THE BASIC COLUMN SUBGRID
     ============================================ -->

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 grid grid-cols-subgrid gap-4">
    <div class="col-span-1">Item 1</div>
    <div class="col-span-1">Item 2</div>
  </div>
</div>

<!-- The child spans 2 columns and becomes a subgrid. -->
<!-- Its items are placed on the parent's columns 1 and 2. -->

<!-- ============================================
     PART 2: THE ROW SUBGRID
     ============================================ -->

<div class="grid grid-rows-3 gap-4">
  <div class="row-span-2 grid grid-rows-subgrid gap-4">
    <div class="row-span-1">Row 1</div>
    <div class="row-span-1">Row 2</div>
  </div>
</div>

<!-- The child spans 2 rows and inherits the row tracks. -->

<!-- ============================================
     PART 3: THE TABLE ALIGNMENT
     ============================================ -->

<div class="grid grid-cols-[1fr_auto_auto_auto] gap-x-4">
  <div class="col-span-full grid grid-cols-subgrid gap-x-4 font-semibold">
    <span>Description</span>
    <span>Quantity</span>
    <span>Price</span>
    <span>Total</span>
  </div>
  <div class="col-span-full grid grid-cols-subgrid gap-x-4">
    <span>Widget</span>
    <span>2</span>
    <span>$10</span>
    <span>$20</span>
  </div>
</div>

<!-- The header and row are subgrids. The columns align. -->

<!-- ============================================
     PART 4: THE CARD ALIGNMENT
     ============================================ -->

<div class="grid grid-cols-3 grid-rows-[auto_1fr_auto] gap-4">
  <article class="row-span-3 grid grid-rows-subgrid gap-4">
    <h2>Title</h2>
    <p>Body.</p>
    <button>Action</button>
  </article>
  <article class="row-span-3 grid grid-rows-subgrid gap-4">
    <h2>Title</h2>
    <p>Longer body that wraps.</p>
    <button>Action</button>
  </article>
  <article class="row-span-3 grid grid-rows-subgrid gap-4">
    <h2>Title</h2>
    <p>Body.</p>
    <button>Action</button>
  </article>
</div>

<!-- The cards share the parent's row tracks. -->
<!-- The titles align, the bodies align, the buttons align. -->

<!-- ============================================
     PART 5: THE HEADER ALIGNMENT
     ============================================ -->

<div class="grid grid-cols-12 gap-4">
  <header class="col-span-full grid grid-cols-subgrid gap-4">
    <div class="col-span-3">Logo</div>
    <nav class="col-span-6">Navigation</nav>
    <div class="col-span-3">Actions</div>
  </header>
</div>

<!-- The header spans all 12 columns and becomes a subgrid. -->
<!-- The logo, nav, and actions align with the page's columns. -->

<!-- ============================================
     PART 6: THE CONTENTS UTILITY
     ============================================ -->

<div class="grid grid-cols-[auto_1fr] gap-4">
  <div class="contents">
    <label>Name</label>
    <input />
  </div>
  <div class="contents">
    <label>Email</label>
    <input />
  </div>
</div>

<!-- The contents wrapper is transparent. -->
<!-- The label and input are placed on the parent's grid lines. -->

<!-- ============================================
     PART 7: THE DEEP NESTING
     ============================================ -->

<div class="grid grid-cols-12 gap-4">
  <div class="col-span-6 grid grid-cols-subgrid gap-4">
    <div class="col-span-3 grid grid-cols-subgrid gap-4">
      <div class="col-span-1">Deep</div>
    </div>
  </div>
</div>

<!-- The innermost item is on the outer grid's column 1. -->

<!-- ============================================
     PART 8: THE GAP INHERITANCE
     ============================================ -->

<div class="grid grid-cols-4 gap-6">
  <div class="col-span-2 grid grid-cols-subgrid">
    <div class="col-span-1">Item 1</div>
    <div class="col-span-1">Item 2</div>
  </div>
</div>

<!-- The subgrid's columns have the parent's gap-6. -->

<!-- ============================================
     PART 9: THE LINE NUMBER RESET
     ============================================ -->

<div class="grid grid-cols-12">
  <div class="col-span-6 grid grid-cols-subgrid">
    <!-- col-start-1 is the subgrid's first line. -->
    <div class="col-start-1 col-span-2">First two columns</div>
  </div>
</div>

<!-- The line numbers restart inside the subgrid. -->

<!-- ============================================
     PART 10: THE COMPLETE PATTERN
     ============================================ -->

<!--
1. The parent grid defines the tracks.
2. The subgrid item spans the tracks it wants to inherit.
3. The subgrid item declares grid-cols-subgrid or grid-rows-subgrid.
4. The subgrid's items are placed on the parent's tracks.
5. The gap is inherited by default.
6. The line numbers restart inside the subgrid.
7. The component is portable because it uses local line numbers.
-->

The ten parts showed the basic column subgrid, the row subgrid, the table alignment, the card alignment, the header alignment, the contents utility, the deep nesting, the gap inheritance, the line number reset, and the complete pattern.

Quick Reference

The Subgrid Utilities

Utility	CSS	Effect
`grid-cols-subgrid`	`grid-template-columns: subgrid`	Inherit column tracks
`grid-rows-subgrid`	`grid-template-rows: subgrid`	Inherit row tracks

The Span Requirement

Axis	Span Utility	Subgrid Utility
Columns	`col-span-*`	`grid-cols-subgrid`
Rows	`row-span-*`	`grid-rows-subgrid`
Both	Both spans	Both subgrids

Browser Support

Browser	Minimum Version
Chrome	117
Firefox	71
Safari	16
Edge	117

The Alignment Patterns

Pattern	Axis	Utilities
Table	Columns	`col-span-full grid-cols-subgrid`
Card	Rows	`row-span-* grid-rows-subgrid`
Form	Columns	`contents`
Header	Columns	`col-span-full grid-cols-subgrid`

The Caveats

Caveat	Cause	Fix
No effect	No span	Add `col-span-*`
Safari bug	`overflow: hidden`	Use a wrapper
No implicit tracks	Subgrid restricts placement	Ensure enough tracks
Line numbers reset	Intended behavior	Use local line numbers

Best Practices

✅ Do This:

<!-- Span the parent tracks before applying subgrid. -->
<div class="col-span-6 grid grid-cols-subgrid">  <!-- ✅ -->

<!-- Use the parent's gap by default. -->
<div class="grid grid-cols-4 gap-6"><div class="col-span-2 grid grid-cols-subgrid">  <!-- ✅ -->

<!-- Use contents for semantic wrappers. -->
<div class="contents"><label /><input /></div>  <!-- ✅ -->

<!-- Use subgrid for table alignment. -->
<div class="col-span-full grid grid-cols-subgrid">  <!-- ✅ -->

<!-- Use local line numbers inside the subgrid. -->
<div class="col-start-1 col-span-2">  <!-- ✅ -->

❌ Don’t Do This:

<!-- Don't apply subgrid without a span. -->
<div class="grid grid-cols-subgrid">  <!-- ❌ No parent tracks -->

<!-- Don't combine overflow-hidden with subgrid in Safari. -->
<div class="overflow-hidden grid grid-cols-subgrid">  <!-- ❌ Safari bug -->

<!-- Don't expect the line numbers to continue. -->
<div class="col-start-5">  <!-- ⚠️ Refers to the subgrid's line 5 -->

<!-- Don't assume the subgrid creates implicit tracks. -->
<!-- Extra items go to the last track.  -->  <!-- ❌ -->

Common Pitfalls

Pitfall	Why It Happens	Fix
Subgrid has no effect	Missing span	Add `col-span-*`
Safari layout breaks	`overflow: hidden`	Use a wrapper
Items overflow	No implicit tracks	Reduce items or increase span
Line numbers wrong	Reset inside subgrid	Use local numbers
Gap mismatch	Gap override	Use the parent’s gap

Real-World Examples

1. Basic Column Subgrid

<div class="grid grid-cols-4"><div class="col-span-2 grid grid-cols-subgrid">...</div></div>

2. Row Subgrid

<div class="grid grid-rows-3"><div class="row-span-2 grid grid-rows-subgrid">...</div></div>

3. Table Alignment

<div class="col-span-full grid grid-cols-subgrid gap-x-4">...</div>

4. Card Alignment

<article class="row-span-3 grid grid-rows-subgrid gap-4">...</article>

5. Header Alignment

<header class="col-span-full grid grid-cols-subgrid gap-4">...</header>

6. Form Alignment

<div class="contents"><label /><input /></div>

7. Deep Nesting

<div class="col-span-6 grid grid-cols-subgrid"><div class="col-span-3 grid grid-cols-subgrid">...</div></div>

8. Gap Inheritance

<div class="grid grid-cols-4 gap-6"><div class="col-span-2 grid grid-cols-subgrid">...</div></div>

9. Line Number Reset

<div class="col-start-1 col-span-2">...</div>

10. The Span Requirement

<div class="col-span-6 grid grid-cols-subgrid">...</div>

Visual

The Nested Grid Problem

┌────────────────────────────────────────────────────────────┐
│  WITHOUT SUBGRID                                           │
│                                                            │
│  Parent grid: [col1][col2][col3][col4]                     │
│                                                            │
│  ┌─────────────────────┐                                   │
│  │  Card (spans 2)     │                                   │
│  │  ┌──────┐ ┌──────┐  │                                   │
│  │  │Item 1│ │Item 2│  │  ← The card's own grid            │
│  │  └──────┘ └──────┘  │    Does not align with the parent. │
│  └─────────────────────┘                                   │
│                                                            │
│  The card's items do not align with the parent's columns.  │
└────────────────────────────────────────────────────────────┘

With Subgrid

┌────────────────────────────────────────────────────────────┐
│  WITH SUBGRID                                              │
│                                                            │
│  Parent grid: [col1][col2][col3][col4]                     │
│                                                            │
│  ┌─────────────────────┐                                   │
│  │  Card (spans 2)     │                                   │
│  │  ┌──────┐ ┌──────┐  │  ← The card's grid is a subgrid.  │
│  │  │Item 1│ │Item 2│  │    Its items align with the       │
│  │  └──────┘ └──────┘  │    parent's columns 1 and 2.      │
│  └─────────────────────┘                                   │
│                                                            │
│  The card's items align with the parent's columns.         │
└────────────────────────────────────────────────────────────┘

The Table Alignment

┌────────────────────────────────────────────────────────────┐
│  TABLE WITH SUBGRID                                        │
│                                                            │
│  <div class="grid grid-cols-[1fr_auto_auto_auto]">          │
│    <div class="col-span-full grid grid-cols-subgrid">      │
│      <span>Description</span>                              │
│      <span>Quantity</span>                                 │
│      <span>Price</span>                                    │
│      <span>Total</span>                                    │
│    </div>                                                  │
│    <div class="col-span-full grid grid-cols-subgrid">      │
│      <span>Widget</span>                                   │
│      <span>2</span>                                        │
│      <span>$10</span>                                      │
│      <span>$20</span>                                      │
│    </div>                                                  │
│  </div>                                                    │
│                                                            │
│  ┌──────────────┬──────────┬───────┬───────┐              │
│  │ Description  │ Quantity │ Price │ Total │              │
│  ├──────────────┼──────────┼───────┼───────┤              │
│  │ Widget       │ 2        │ $10   │ $20   │              │
│  └──────────────┴──────────┴───────┴───────┘              │
│                                                            │
│  The columns align because both rows share the parent's    │
│  column tracks.                                            │
└────────────────────────────────────────────────────────────┘

The Line Number Reset

┌────────────────────────────────────────────────────────────┐
│  LINE NUMBER RESET                                         │
│                                                            │
│  Parent grid (12 columns):                                 │
│  ┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐        │
│  │ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │ 9 │10 │11 │12 │        │
│  └───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘        │
│                                                            │
│  Subgrid (spans 6 columns, starting at parent line 3):     │
│  ┌───┬───┬───┬───┬───┬───┐                                 │
│  │ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │  ← Local line numbers           │
│  └───┴───┴───┴───┴───┴───┘                                 │
│                                                            │
│  col-start-1 inside the subgrid is the subgrid's line 1,   │
│  which is the parent's line 3.                             │
│                                                            │
│  The local numbering makes the component portable.         │
└────────────────────────────────────────────────────────────┘

Summary

Item	Value
`grid-cols-subgrid`	Inherit column tracks
`grid-rows-subgrid`	Inherit row tracks
Span	Required before applying subgrid
Line numbers	Restart inside the subgrid
Gap	Inherited from the parent
Browser support	Chrome 117+, Firefox 71+, Safari 16+
Safari bug	`overflow: hidden` breaks subgrid
Implicit tracks	Not created by subgrid
`contents`	Transparent wrapper for grid items

Key takeaways:

Subgrid lets a nested grid adopt the parent’s tracks. The child’s items are placed on the parent’s lines, so the alignment is automatic. No fixed widths, no calc(), no JavaScript.
The subgrid must span the tracks it inherits. The col-span-* or row-span-* utility on the subgrid item determines how many parent tracks it occupies. Without the span, the subgrid has no tracks to inherit.
The line numbers restart inside the subgrid. The subgrid’s first line is line 1, even if the subgrid starts at the parent’s line 5. This makes the component portable, because the same subgrid placed at different parent positions uses the same local line numbers.
The gap is inherited from the parent. The subgrid’s tracks are spaced by the parent’s gap. A different gap can be set on the subgrid, but the default is consistent.
Subgrid solves the table alignment problem. The header and data rows share the parent’s column tracks, so the columns align automatically. Changing the content in any cell does not break the alignment .
Subgrid solves the card alignment problem. The cards share the parent’s row tracks, so the titles, bodies, and footers align across cards. The body row is 1fr, so the cards stretch to the same height.
The contents utility is complementary. A wrapper with contents is transparent to the grid. Its children become direct grid items of the parent. This is useful for semantic wrappers that should not affect the layout .
Subgrid is supported in all modern browsers. Chrome 117+, Firefox 71+, Safari 16+. No polyfill is needed . The one caveat is the Safari overflow: hidden bug, which requires a wrapper.
Subgrid is production-ready. The feature has been in all major browsers since 2023, and it is the correct tool for nested alignment. The Tailwind utilities make it a single class.

Remember: Subgrid is the feature that makes nested grids align with their parents. A grid item that spans the parent’s tracks and declares grid-cols-subgrid or grid-rows-subgrid adopts the parent’s tracks. Its items are placed on the parent’s lines, and the alignment is automatic. The line numbers restart inside the subgrid, so the component is portable. The gap is inherited, so the spacing is consistent. The feature is supported in all modern browsers, and Tailwind exposes it through two utilities. The result is a layout where a table’s columns align, a card’s rows align, and a component’s internals align with the page grid, all without hacks, without JavaScript, and without manual track sizing.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!