Tailwind CSS siūlo tinklelio sistemą, leidžiančią vartotojams padalyti tinklalapį į stulpelius ir eilutes, naudojant tinklelio stulpelius ir tinklelio eilutes. Jame taip pat pateikiamos tinklelio stulpelio pradžios ir pabaigos priemonės, leidžiančios valdyti elementų dydį ir išdėstymą tinklelio stulpeliuose. Šios priemonės leidžia vartotojams nurodyti elemento pradžios ir pabaigos pozicijas tinklelio išdėstyme.
Šiame straipsnyje bus paaiškinta, kaip padaryti, kad stulpeliai prasidėtų arba baigtųsi konkrečioje n-toje tinklelio eilutėje „Tailwind CSS“.
Kaip padaryti, kad stulpeliai prasidėtų arba baigtųsi n-ojoje tinklelio linijoje „Tailwind“?
Jei norite, kad „Tailwind“ stulpeliai prasidėtų arba baigtųsi n-toje tinklelio eilutėje, naudokite „ col-start-
1 veiksmas: HTML programoje nurodykite tinklelio elementų pradžios ir pabaigos vietas
Sukurkite HTML programą ir naudokite „ col-start-
< kūnas >
< h1 klasė = 'text-2xl text-center' >
Tailwind CSS – stulpelio pradžia / Galas
h1 >
< div klasė = 'grid grid-cols-4 tarpas-3 m-3' >
< div klasė = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div klasė = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div klasė = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div klasė = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div klasė = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
kūnas >
Čia, pirminiame
- “ tinklelis “ naudojamas tinklelio išdėstymui sukurti.
- “ tinklelis-stulpeliai-4 ” klasė nurodo, kad tinklelyje turi būti 4 vienodo dydžio stulpeliai.
- “ tarpas-3 ” klasė nustato 3 vienetų atstumą tarp kiekvieno tinklelio elemento.
- “ m-3 ” klasė aplink tinklelio konteinerį prideda 3 vienetų paraštę.
Vidiniuose antriniuose
- “ col-start-2 “ ypatybė nurodo, kad tinklelio elementas prasideda 2 stulpeliu.
- “ col-span-2 “ rodo, kad tinklelio elementas užima 2 stulpelius.
- “ col-start-1 “ naudojamas tinklelio elementui pradėti nuo 1 stulpelio.
- “ col-end-3 “ nurodoma, kad tinklelio elementas baigiasi 3 stulpeliu.
- “ col-start-3 “ rodo, kad tinklelio elementas prasideda nuo antrojo stulpelio.
- “ col-end-5 “ ypatybė baigia tinklelio elementą 5 stulpelyje.
- “ col-span-3 “ nurodoma, kad tinklelio elementas užima 3 stulpelius.
- “ bg-teal-500 “ nustato melsvą spalvą visų tinklelio elementų fone.
- “ p-5 “ prideda 5 vienetų užpildymą tinklelio elementų turiniui.
2 veiksmas: patikrinkite išvestį
Norėdami įsitikinti, kad tinklelio stulpelio pradžios ir pabaigos pozicijos buvo pritaikytos, peržiūrėkite HTML tinklalapį:
Aukščiau pateikta išvestis rodo, kad tinklelio stulpelio pradžios ir pabaigos pozicijos buvo sėkmingai pritaikytos, pagal kurias jos buvo nurodytos.
Išvada
Kad stulpeliai prasidėtų arba baigtųsi n-toje tinklelio eilutėje „Tailwind“, „ col-start-