Într-un layout cu mai multe carduri, titlurile, descrierile și butoanele pot ajunge la înălțimi diferite. CSS Subgrid rezolvă o parte din această problemă: un element copil poate prelua liniile grilei definite de containerul părinte, astfel încât zonele similare să se alinieze între coloane.
Cum funcționează Subgrid?
Într-un grid obișnuit, fiecare componentă își calculează propriile rânduri. Cu grid-template-rows: subgrid sau grid-template-columns: subgrid, copilul participă la structura grilei părinte pe axa aleasă. Astfel, rândurile interne pot avea aceleași limite, chiar dacă informațiile din carduri sunt diferite.
Exemplu pentru o listă de carduri
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}În acest exemplu, fiecare card ocupă trei rânduri ale grilei părinte. Titlul, textul și zona de acțiune pot fi aliniate cu elementele corespondente din celelalte carduri. Structura exactă trebuie adaptată la HTML și la numărul de rânduri pe care îl folosește componenta.
Când merită folosit?
- Grile de produse cu titluri de lungimi diferite.
- Carduri de servicii cu butoane pe aceeași linie.
- Panouri de prezentare și comparații.
- Componente reutilizabile în care alinierea trebuie păstrată.
Subgrid nu înlocuiește toate tehnicile Grid sau Flexbox. Pentru un singur rând de elemente, Flexbox poate rămâne mai simplu. Verifică și compatibilitatea browserelor pe care le folosește publicul site-ului și păstrează un fallback atunci când proiectul o cere.
Detaliile vizuale contează
Un layout bine aliniat face paginile mai ușor de parcurs. Aceeași atenție la structură ajută și în proiectele de personalizare a spațiilor, unde poți descoperi stickere decorative pentru proiecte de amenajare și personalizare.
Subgrid este un instrument precis pentru sisteme de componente. Folosit acolo unde există o grilă comună, reduce ajustările artificiale și simplifică CSS-ul.
