Tailwind CSS rindu span liek elementam aizņemt divas vai vairākas rindas režģī. To izmanto, lai noteiktu rindu skaitu, kuras elementam ir jāaizņem/pārklāj. Tas ļauj lietotājiem pielāgot režģa vienuma izmēru un pozīciju vairākās rindās un izveidot dažādus izkārtojumus. Turklāt to var izmantot, lai izveidotu elastīgus un atsaucīgus režģa izkārtojumus tīmekļa lapām.
Šis raksts ilustrēs metodi, kā izveidot rindu diapazonu Tailwind CSS.
Kā izveidot rindu laidumu aizmugurējā vējā?
Lai rindiņas aptvertu programmā Tailwind, izveidojiet HTML programmu. Pēc tam izmantojiet ' rinda-span-
Praktiskai ieviešanai pārbaudiet norādītās darbības:
1. darbība: izveidojiet kolonnu platumu HTML programmā
Izveidojiet HTML programmu un izmantojiet ' rinda-span-
< ķermenis >
< 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 >
< / ķermenis >
Šeit, vecākelementā
- ' režģis ” klase tiek izmantota, lai izveidotu režģa izkārtojumu.
- ' režģis-rinda-4 ” klase iestata rindu numuru režģī uz 4.
- ' grid-flow-col ” klase ievieto režģa elementus horizontāli kolonnās.
- ' sprauga-3 ” klase nosaka 3 vienību atstarpi starp katru režģa vienumu.
- ' m-3 ” klase piemēro 3 vienību rezervi ap režģa konteineru.
- ' teksta centrs ” klase iestata katra režģa vienuma tekstu centrā.
Bērnu
- ' rinda-span-3 ” klase norāda, ka elementam ir jāietver 3 režģa rindas.
- ' rinda-span-2 ” klase norāda, ka elementam ir jāietver 2 režģa rindas.
- ' rinda-span-4 ” klase norāda, ka elementam ir jāietver 4 režģa rindas.
- ' bg-teal-500 ” klase iestata zilganzaļo krāsu uz režģa elementa fona.
- ' p-5 ” klase pievieno 5 vienību pildījumu saturam, kas atrodas bērnu vienumu iekšpusē.
2. darbība: pārbaudiet izvadi
Skatiet HTML tīmekļa lapu, lai pārbaudītu, vai rindu diapazons ir lietots vai nē:
Iepriekš minētajā izvadā var novērot, ka rindu laidums ir veiksmīgi piemērots, saskaņā ar kuru tas tika norādīts.
Secinājums
Lai rindas atrastos Tailwind režīmā, izmantojiet “ rinda-span-
” utilītu HTML programmā un norādiet rindu skaitu, kas jāietver katram elementam. Lai veiktu pārbaudi, skatiet izmaiņas HTML tīmekļa lapā. Šis raksts ir piemērs metodei, kā izveidot rindu laidumu Tailwind CSS.