I Tailwind CSS gör radspann att ett element upptar två eller flera rader i rutnätet. Den används för att definiera antalet rader ett element ska uppta/spänna. Det tillåter användare att justera rutnätsobjektets storlek och position över flera rader och skapa olika layouter. Dessutom kan den användas för att skapa flexibla och responsiva rutnätslayouter för webbsidor.
Den här uppskrivningen kommer att exemplifiera metoden för att skapa ett radspann i Tailwind CSS.
Hur får man rader att sträcka sig i medvind?
För att få raderna att sträcka sig i Tailwind, gör ett HTML-program. Använd sedan ' rad-span-
För praktisk implementering, kolla in de medföljande stegen:
Steg 1: Gör kolumnspann i HTML-programmet
Skapa ett HTML-program och använd ' rad-span-
< kropp >
< div klass = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div klass = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div klass = 'bg-teal-500 p-5' > 2 < / div >
< div klass = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div klass = 'bg-teal-500 p-5' > 4 < / div >
< div klass = 'bg-teal-500 p-5' > 5 < / div >
< div klass = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / kropp >
Här, i det överordnade
- ' rutnät ” klass används för att skapa en rutnätslayout.
- ' rutnät-rad-4 ” klass sätter radnumret i rutnätet till 4.
- ' rutnät-flöde-kol ” klass placerar rutnätsobjekten horisontellt i kolumner.
- ' gap-3 ” klass anger ett avstånd på 3 enheter mellan varje rutnätsobjekt.
- ' m-3 ” klass tillämpar en marginal på 3 enheter runt gallerbehållaren.
- ' text-center ” klass sätter texten för varje rutnätsobjekt till mitten.
I de underordnade
- ' rad-span-3 ” klass anger att elementet ska sträcka sig över 3 rader i rutnätet.
- ' rad-span-2 ” klass indikerar att elementet ska sträcka sig över 2 rader i rutnätet.
- ' rad-span-4 ” klass anger att elementet ska sträcka sig över 4 rader i rutnätet.
- ' bg-teal-500 ” klass ställer in den kricka färgen till bakgrunden av rutnätsobjektet.
- ' p-5 ” klass lägger till en utfyllnad av 5 enheter till innehållet i de underordnade -objekten.
Steg 2: Verifiera utdata
Visa HTML-webbsidan för att kontrollera om radintervallet har tillämpats eller inte:
I ovanstående utgång kan det observeras att radspannet har tillämpats framgångsrikt enligt vilket det specificerades.
Slutsats
För att få raderna att sträcka sig i Tailwind, använd ' rad-span-
” i HTML-programmet och ange antalet rader varje element ska sträcka sig över. För verifiering, se ändringarna på HTML-webbsidan. Den här uppskrivningen har exemplifierat metoden för att skapa rader i Tailwind CSS.