În CSS Grid clasic, elementele copil din interiorul unui card nu puteau să își alinieze înălțimile cu elementele corespondente din alte carduri vecine dacă lungimea textului varia. Cu Subgrid (clasele grid-rows-subgrid și grid-cols-subgrid), copiii moștenesc direct liniile de grilă ale părintelui principal.
Tabel de prețuri cu rânduri aliniate milimetric prin Subgrid
<!-- Grila principală definește 3 carduri pe coloane: -->
<div class="grid grid-cols-3 gap-6">
<!-- Fiecare card ocupă 3 rânduri și aplică subgrid pe rânduri: -->
<div class="grid grid-rows-subgrid row-span-3 p-6 bg-white rounded-2xl shadow">
<h3 class="text-xl font-bold">Plan Standard</h3>
<p class="text-gray-600 text-sm">Descriere scurtă pe o singură linie.</p>
<button class="bg-blue-600 text-white rounded-lg py-2 mt-auto">Alege</button>
</div>
<div class="grid grid-rows-subgrid row-span-3 p-6 bg-white rounded-2xl shadow">
<h3 class="text-xl font-bold">Plan Enterprise pentru Echipe Mari</h3>
<p class="text-gray-600 text-sm">
Descriere lungă care se întinde pe 4 rânduri de text... Datorită Subgrid,
butoanele tuturor cardurilor vor rămâne perfect aliniate pe aceeași linie orizontală!
</p>
<button class="bg-blue-600 text-white rounded-lg py-2 mt-auto">Alege</button>
</div>
</div>
Întrebări & Exemple de Cod:
Subgrid în Tailwind CSS Grid: Alinierea Perfectă a Elementelor ImbricateAi o nelămurire despre utilizarea comenzii
Subgrid în Tailwind CSS Grid: Alinierea Perfectă a Elementelor Imbricatesau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.