În Tailwind CSS, intervalul de rânduri face ca un element să ocupe două sau mai multe rânduri în cadrul grilei. Este folosit pentru a defini numărul de rânduri pe care trebuie să le ocupe/întinde un element. Permite utilizatorilor să ajusteze dimensiunea și poziția elementului grilă pe mai multe rânduri și să creeze diferite aspecte. Mai mult, poate fi folosit pentru a crea layout-uri de grilă flexibile și receptive pentru paginile web.
Această lucrare va exemplifica metoda de a face o întindere de rânduri în Tailwind CSS.
Cum să faci o întindere de rânduri în Tailwind?
Pentru a face rândurile să se întindă în Tailwind, creați un program HTML. Apoi, utilizați „ row-span-
Pentru implementare practică, consultați pașii furnizați:
Pasul 1: Faceți o întindere a coloanelor în programul HTML
Creați un program HTML și utilizați „ row-span-
< corp >
< div clasă = „grid grid-rows-4 grid-flow-col gap-3 m-3 text-center” >
< div clasă = „row-span-3 bg-teal-500 p-5” > 1 < / div >
< div clasă = „bg-teal-500 p-5” > 2 < / div >
< div clasă = „row-span-2 bg-teal-500 p-5” > 3 < / div >
< div clasă = „bg-teal-500 p-5” > 4 < / div >
< div clasă = „bg-teal-500 p-5” > 5 < / div >
< div clasă = „row-span-4 bg-teal-500 p-5” > 6 < / div >
< / div >
< / corp >
Aici, în elementul părinte
- „ grilă ” este utilizată pentru a crea un aspect al grilei.
- „ grilă-rând-4 ” clasa setează numărul rândurilor din grilă la 4.
- „ grid-flow-col ” clasa plasează elementele grilei orizontal în coloane.
- „ decalajul-3 ” clasa stabilește o distanță de 3 unități între fiecare element al grilei.
- „ m-3 clasa ” aplică o marjă de 3 unități în jurul containerului grilă.
- „ centru de text ” clasa setează textul fiecărui element al grilei în centru.
În elementele
- „ rând-span-3 ” clasă specifică faptul că elementul trebuie să se întindă pe 3 rânduri din grilă.
- „ rând-span-2 ” indică faptul că elementul ar trebui să se întinde pe 2 rânduri din grilă.
- „ rând-span-4 ” clasă specifică faptul că elementul trebuie să se întinde pe 4 rânduri din grilă.
- „ bg-teal-500 ” clasa setează culoarea teal pe fundalul elementului grilă.
- „ p-5 ” clasa adaugă o umplutură de 5 unități la conținutul din interiorul articolelor copil.
Pasul 2: Verificați ieșirea
Vizualizați pagina web HTML pentru a verifica dacă intervalul de rânduri a fost aplicat sau nu:
În rezultatul de mai sus, se poate observa că intervalul de rând a fost aplicat cu succes conform căruia a fost specificat.
Concluzie
Pentru a se întinde rândurile în Tailwind, utilizați „ row-span-
” în programul HTML și specificați numărul de rânduri pe care trebuie să le întinde fiecare element. Pentru verificare, vizualizați modificările pe pagina web HTML. Această lucrare a exemplificat metoda de a face o lungime de rânduri în CSS Tailwind.