Tailwind CSS piedāvā režģa sistēmu, kas lietotājiem ļauj sadalīt tīmekļa lapu kolonnās un rindās, izmantojot grid-cols un grid-rows utilītas. Tas nodrošina arī režģa kolonnas sākuma un beigu utilītas, lai kontrolētu elementu izmērus un izvietojumu režģa kolonnās. Šīs utilītas ļauj lietotājiem norādīt elementa sākuma un beigu pozīcijas režģa izkārtojumā.
Šajā rakstā ir izskaidrota metode, kā iestatīt kolonnu sākuma vai beigas konkrētajā n-tajā režģa rindiņā Tailwind CSS.
Kā panākt, lai kolonnas sākas vai beidzas n-tajā režģa līnijā Tailwind?
Lai kolonnas sāktu vai beigtos ar n-to režģa līniju programmā Tailwind, izmantojiet “ col-start-
1. darbība: norādiet režģa elementu sākuma un beigu pozīcijas HTML programmā
Izveidojiet HTML programmu un izmantojiet ' col-start-
< ķermeni >
< h1 klasē = 'text-2xl text-center' >
Tailwind CSS — kolonnas sākums / Beigas
h1 >
< div klasē = 'grid grid-cols-4 sprauga-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 >
ķermeni >
Šeit, vecākelementā
- ' režģis ” tiek izmantots, lai izveidotu režģa izkārtojumu.
- ' režģis-cols-4 ” klase norāda, ka režģī jābūt 4 vienāda izmēra kolonnām.
- ' sprauga-3 ” klase nosaka 3 vienību atstarpi starp katru režģa vienumu.
- ' m-3 ” klase pievieno 3 vienību rezervi ap režģa konteineru.
Iekšējos bērnu
- ' col-start-2 ” rekvizīts norāda, ka režģa vienums sākas ar 2. kolonnu.
- ' col-span-2 ” norāda, ka režģa vienums aizņem 2 kolonnas.
- ' col-start-1 ” tiek izmantots, lai sāktu režģa vienumu no 1. kolonnas.
- ' col-end-3 ” norāda, ka režģa vienums beidzas ar 3. kolonnu.
- ' col-start-3 ” norāda, ka režģa vienums sākas no otrās kolonnas.
- ' col-end-5 ” rekvizīts beidz režģa vienumu 5. slejā.
- ' col-span-3 ” norāda, ka režģa vienums aizņem 3 kolonnas.
- ' bg-teal-500 ” iestata zilganu krāsu uz visu režģa vienumu fonu.
- ' p-5 ” pievieno 5 vienību polsterējumu saturam režģa vienumu iekšpusē.
2. darbība: pārbaudiet izvadi
Lai pārliecinātos, ka ir lietotas režģa kolonnas sākuma un beigu pozīcijas, skatiet HTML tīmekļa lapu:
Iepriekš minētā izvade norāda, ka režģa kolonnas sākuma un beigu pozīcijas ir veiksmīgi lietotas, saskaņā ar kurām tās tika norādītas.
Secinājums
Lai kolonnas sāktu vai beigtos n-tajā režģa līnijā programmā Tailwind, “ col-start-