Tailwind CSS, eilučių ilgis leidžia elementui užimti dvi ar daugiau tinklelio eilučių. Jis naudojamas norint apibrėžti eilučių skaičių, kurį elementas turi užimti / apimti. Tai leidžia vartotojams koreguoti tinklelio elemento dydį ir padėtį keliose eilutėse bei kurti skirtingus išdėstymus. Be to, jis gali būti naudojamas kuriant lanksčius ir reaguojančius tinklalapių tinklelio išdėstymus.
Šis įrašas parodys metodą, kaip sukurti eilutes „Tailwind CSS“.
Kaip padaryti eilučių tarpą tailwind?
Jei norite, kad eilutės tęstųsi „Tailwind“, sukurkite HTML programą. Tada naudokite „ row-span-
Norėdami praktiškai įgyvendinti, peržiūrėkite pateiktus veiksmus:
1 veiksmas: padarykite stulpelio tarpą HTML programoje
Sukurkite HTML programą ir naudokite „ row-span-
< kūnas >
< div klasė = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div klasė = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div klasė = 'bg-teal-500 p-5' > 2 < / div >
< div klasė = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div klasė = 'bg-teal-500 p-5' > 4 < / div >
< div klasė = 'bg-teal-500 p-5' > 5 < / div >
< div klasė = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / kūnas >
Čia, pirminiame
- “ tinklelis “ klasė naudojama tinklelio išdėstymui sukurti.
- “ tinklelis-eilė-4 “ klasė nustato eilučių skaičių tinklelyje į 4.
- “ grid-flow-col “ klasė tinklelio elementus deda horizontaliai į stulpelius.
- “ tarpas-3 ” klasė nustato 3 vienetų atstumą tarp kiekvieno tinklelio elemento.
- “ m-3 ” klasė aplink tinklelio konteinerį taiko 3 vienetų paraštę.
- “ teksto centras “ klasė nustato kiekvieno tinklelio elemento tekstą į centrą.
Vaikų
- “ eilutės tarpas-3 “ klasė nurodo, kad elementas turėtų apimti 3 tinklelio eilutes.
- “ eilutės tarpas-2 “ klasė nurodo, kad elementas turėtų apimti 2 tinklelio eilutes.
- “ eilutės tarpas-4 “ klasė nurodo, kad elementas turėtų apimti 4 tinklelio eilutes.
- “ bg-teal-500 “ klasė nustato melsvą spalvą tinklelio elemento fone.
- “ p-5 ” klasė prideda 5 vienetų užpildymą antrinių elementų turiniui.
2 veiksmas: patikrinkite išvestį
Peržiūrėkite HTML tinklalapį ir patikrinkite, ar eilučių intervalas buvo pritaikytas, ar ne:
Aukščiau pateiktame išvestyje galima pastebėti, kad sėkmingai pritaikytas eilučių intervalas, pagal kurį jis buvo nurodytas.
Išvada
Jei norite, kad eilučių apimtis būtų Tailwind, naudokite „ row-span-
“ HTML programoje ir nurodykite eilučių skaičių, kurį turėtų apimti kiekvienas elementas. Norėdami patikrinti, peržiūrėkite pakeitimus HTML tinklalapyje. Šis įrašas parodė metodą, kaip sukurti eilutes „Tailwind CSS“.