`CSS Subgrid (grid-template-columns: subgrid)` în CSS

CSS Grid (Layout bidimensional) CSS Grid Level 2

Ghid complet pentru CSS Subgrid: alinierea perfectă a elementelor imbricate la liniile grilei părinte pentru carduri, antete și subsoluri consistente.

Sintaxă CSS

grid-template-columns: subgrid; grid-template-rows: subgrid;

CSS Subgrid (introdus în CSS Grid Level 2) rezolvă cea mai mare limitare a specificației Grid inițiale: faptul că un element copil cu display: grid își crea o grilă complet independentă, pierzând orice aliniere cu liniile grilei părinte.

Prin setarea grid-template-rows: subgrid sau grid-template-columns: subgrid, elementul copil „moștenește” și folosește direct pistele (tracks) definite de părinte. Acest lucru permite, de exemplu, ca toate cardurile dintr-un rând să aibă titlurile, descrierile și butoanele aliniate milimetric pe orizontală, indiferent de lungimea textului.

Alinierea automată a rândurilor în carduri cu Subgrid

/* 1. Containerul părinte definește grila cu 3 coloane */
.container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* 2. Fiecare card se întinde pe 3 rânduri ale părintelui și adoptă subgrid */
.card {
    display: grid;
    /* Cardul se întinde peste 3 rânduri virtuale ale grilei părinte */
    grid-row: span 3;
    /* Moștenește cele 3 rânduri ale părintelui: Titlu | Corp | Buton */
    grid-template-rows: subgrid;
    
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-title {
    font-size: 1.25rem;
}

.card-body {
    color: #475569;
}

.card-footer {
    align-self: end; /* Butonul stă întotdeauna perfect jos */
}

De ce este Subgrid superior soluțiilor vechi

Fără înălțimi fixe artificiale: Nu mai este nevoie să impui min-height pe titlu sau descriere pentru ca butoanele să stea pe aceeași linie.
Comportament responsiv nativ: Dacă o descriere se întinde pe 4 rânduri de text, rândul respectiv se mărește sincronizat pe toate cardurile vecine din același rând.
Suport de producție: Este suportat în toate browserele moderne majore (Chrome 117+, Firefox 71+, Safari 16+, Edge 117+).