Tailwind CSS-is paneb reaulatus elemendi hõivama ruudustikus kaks või enam rida. Seda kasutatakse ridade arvu määratlemiseks, mida element peaks hõivama/ulatuva. See võimaldab kasutajatel kohandada ruudustiku üksuse suurust ja asukohta mitmes reas ning luua erinevaid paigutusi. Lisaks saab seda kasutada veebilehtede paindlike ja tundlike ruudustikupaigutuste loomiseks.
See kirjutis näitab Tailwind CSS-i ridade ulatuse muutmise meetodit.
Kuidas teha taganttuules ridade vahekaugust?
Selleks, et read Tailwindis ulatuksid, looge HTML-programm. Seejärel kasutage ' rida-vahemik-
Praktiliseks rakendamiseks vaadake esitatud samme:
1. samm: muutke HTML-programmis veeru ulatus
Looge HTML-programm ja kasutage ' rida-vahemik-
< keha >
< 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 >
< / keha >
Siin, emaelemendis
- “ võre ” klassi kasutatakse ruudustikupaigutuse loomiseks.
- “ grid-rida-4 ” klass määrab ruudustiku ridade numbriks 4.
- “ grid-flow-col ” klass paigutab ruudustiku üksused horisontaalselt veergudesse.
- “ vahe-3 ” klass määrab iga ruudustiku elemendi vahele 3 ühikut.
- “ m-3 ” klass rakendab võrgukonteineri ümber 3 ühiku suurust varu.
- “ tekstikeskus ” klass seab iga ruudustiku elemendi teksti keskele.
Alamelementides
- “ rida-vahemik-3 ” klass määrab, et element peaks ruudustikus olema üle 3 rea.
- “ rida-span-2 ” klass näitab, et element peaks ulatuma ruudustiku 2 reast.
- “ rida-vahemik-4 ” klass määrab, et element peaks ruudustikus olema üle 4 rea.
- “ bg-teal-500 ” klass määrab sinakaspruuni värvi ruudustiku elemendi taustale.
- “ p-5 ” klass lisab alamüksuste sisule 5-ühikulise täidise.
2. samm: kontrollige väljundit
Vaadake HTML-i veebilehte, et kontrollida, kas reavahemik on rakendatud või mitte:
Ülaltoodud väljundis on näha, et reavahemik, mille järgi see määrati, on edukalt rakendatud.
Järeldus
Ridade katmiseks Tailwindis kasutage ' rida-vahemik-
” utiliit HTML-programmis ja määrake ridade arv, mida iga element peaks hõlmama. Kontrollimiseks vaadake muudatusi HTML-i veebilehel. See kirjutis on näide Tailwind CSS-is ridade ulatuse muutmise meetodist.