Rozpätie riadkov v CSS Tailwind spôsobí, že prvok zaberie dva alebo viac riadkov v mriežke. Používa sa na definovanie počtu riadkov, ktoré by mal prvok zaberať/rozsah. Umožňuje používateľom upraviť veľkosť a polohu položky mriežky vo viacerých riadkoch a vytvárať rôzne rozloženia. Okrem toho sa dá použiť na vytváranie flexibilných a citlivých rozložení mriežky pre webové stránky.
Tento zápis bude príkladom metódy na vytvorenie rozsahu riadkov v CSS Tailwind.
Ako urobiť rozpätie riadkov v Tailwinde?
Ak chcete, aby sa riadky v Tailwinde rozprestierali, vytvorte program HTML. Potom použite „ row-span-
Pre praktickú implementáciu si pozrite poskytnuté kroky:
Krok 1: Vytvorte rozpätie stĺpcov v programe HTML
Vytvorte HTML program a použite „ row-span-
< telo >
< div trieda = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div trieda = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div trieda = 'bg-teal-500 p-5' > 2 < / div >
< div trieda = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div trieda = 'bg-teal-500 p-5' > 4 < / div >
< div trieda = 'bg-teal-500 p-5' > 5 < / div >
< div trieda = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / telo >
Tu v nadradenom prvku
- “ mriežka ” sa používa na vytvorenie rozloženia mriežky.
- “ mriežka-riadok-4 ” nastaví počet riadkov v mriežke na 4.
- “ grid-flow-col ” trieda umiestňuje položky mriežky vodorovne do stĺpcov.
- “ medzera-3 ” trieda nastavuje vzdialenosť 3 jednotiek medzi každou mriežkou.
- “ m-3 ” trieda aplikuje okraj 3 jednotiek okolo mriežkového kontajnera.
- “ textové centrum ” nastaví text každej položky mriežky na stred.
V podriadených prvkoch
- “ riadok-rozpätie-3 ” class určuje, že prvok by sa mal rozprestierať cez 3 riadky v mriežke.
- “ riadok-rozpätie-2 ” označuje, že prvok by sa mal rozprestierať cez 2 riadky v mriežke.
- “ riadok-rozpätie-4 ” class určuje, že prvok by sa mal rozprestierať cez 4 riadky v mriežke.
- “ bg-teal-500 ” nastaví modrozelenú farbu na pozadie položky mriežky.
- “ p-5 ” trieda pridáva výplň 5 jednotiek k obsahu vnútri podriadených položiek .
Krok 2: Overte výstup
Pozrite si webovú stránku HTML a overte, či sa použilo rozpätie riadkov alebo nie:
Vo vyššie uvedenom výstupe je možné pozorovať, že rozpätie riadkov bolo úspešne aplikované podľa toho, ako bolo špecifikované.
Záver
Ak chcete, aby sa riadky v Tailwinde rozprestierali, použite „ row-span-
” v programe HTML a zadajte počet riadkov, ktoré by mal obsahovať každý prvok. Na overenie si zmeny pozrite na webovej stránke HTML. Tento zápis je príkladom metódy na vytvorenie rozpätia riadkov v CSS Tailwind.