Technical1 min read
Flawless Card Layouts with CSS Subgrid
The most elegant way to lock titles, images, and buttons in nested cards: Subgrid.
CSS Grid was fantastic, but synchronizing sub-elements across adjacent cards previously required brittle JavaScript calculations or fixed heights.
Interactive Comparison & Subgrid Live Demo
Test the interactive visualizer below to toggle Subgrid on/off and see how card buttons lock to the exact same baseline:
Interactive CSS Subgrid Comparison
See the live difference between standard Grid and Subgrid
Core Principles and Component Architecture in Modern Web Design
Concise summary snippet.
Performance
Modern CSS Subgrid feature keeping buttons pinned to the bottom and headers aligned regardless of text length.
Font Sizes
Golden ratio and modular scale for readability.
With Subgrid active: Every card's header, description, and button lock to the same horizontal track.
How Subgrid Works
grid-template-rows: subgrid; completely fixes this. Now card components with varying title lengths or descriptions naturally align to the parent grid rows.
CSS
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: auto 1fr auto;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}