Subgrid Card Layout Demo - Online CSS Subgrid

CSS Subgrid is a feature of CSS Grid Layout (Level 2) that lets a grid item inherit the grid track definitions from its parent grid container. When you set grid-template-rows: subgrid or grid-template-columns: subgrid on a child grid item, the child's tracks align precisely with the parent's tracks. This is game-changing for card layouts, where you want internal elements (titles, descriptions, buttons) to stay aligned across cards in the same row.

Subgrid is supported in all modern browsers as of late 2024: Chrome 117+ (Sept 2023), Firefox 71+ (Dec 2019), Safari 16+ (Sept 2022), and Edge 117+. It's now considered Baseline Widely Available. For older browsers, you can use @supports (grid-template-rows: subgrid) to provide a fallback.

Use subgrid when you need card content to align across sibling cards in a grid row — for example, keeping all "Add to Cart" buttons at the same vertical position regardless of title length. Flexbox is great for single-axis alignment within a card (like pushing a button to the bottom), but it can't coordinate alignment between sibling cards. Subgrid solves exactly that cross-card alignment problem.

No significant performance impact. Subgrid is a native CSS feature handled by the browser's layout engine — it's not a JavaScript polyfill. The layout calculations are optimized and generally comparable to regular grid. In fact, subgrid can reduce the need for JavaScript-based alignment hacks, resulting in cleaner and faster code.

Yes! Subgrid can be chained through multiple nested grid containers. A grandchild can inherit tracks from its grandparent, provided each intermediate container also uses subgrid. This enables deeply nested components (like a card within a section within a page layout) to all share the same grid rhythm.

Without subgrid, each card is an independent formatting context — its internal rows are sized based solely on its own content. With subgrid, the card's rows are shared with sibling cards. The parent grid determines the row height based on the maximum content across all cards in that row. This ensures that Row 1 (titles) is the same height for all cards, Row 2 (descriptions) aligns, and so on.