Šajā ziņojumā ir aprakstīta visa procedūra, lai pievienotu atstarpi starp kolonnām programmā Tailwind.
Kā pievienot atstarpi starp kolonnām aizmugurējā vējā?
Lai programmā Tailwind pievienotu atstarpi starp kolonnām, izmantojiet iebūvēto “ atstarpe-{size} ” lietderība. Tas norāda vesela skaitļa vērtību, kas attēlo atstarpi starp kolonnām horizontāli un vertikāli. Praktiski veiksim šo uzdevumu, izmantojot minētos piemērus.
Projekta faila struktūra
' atstarpe-{size} ” utilītu var ieviest jebkurā no Tailwind projektiem, kas atbilst dotajai faila struktūrai:
Sāksim ar pirmo piemēru.
1. piemērs: izmantojiet utilītu “gap-{size}”, lai pievienotu tādu pašu atstarpi starp rindām un kolonnām
Šajā piemērā tiek izmantota utilīta “gap-{size}”, lai pievienotu to pašu atstarpi horizontāli un vertikāli starp norādītajām kolonnām.
HTML kods
Pārskats par šādu kodu:
< galvu >
< saite href = '/dist/output.css' rel = 'stila lapa' >
< / galvu >
< ķermeni >
< h1 klasē = 'text-3xl font-bold text-center pasvītrot tekstu-oranžs-600' > Laipni lūdzam Linuxhint! < / h1 >< br >
< div klasē = 'mx-2 grid grid-cols-3 gap-4' >
< div klasē = 'border-2 border-orange-600' > Pirmā apmācība < / div >
< div klasē = 'border-2 border-orange-600' > Otrā apmācība < / div >
< div klasē = 'border-2 border-orange-600' > Trešā apmācība < / div >
< div klasē = 'border-2 border-orange-600' > Ceturtā apmācība < / div >
< div klasē = 'border-2 border-orange-600' > Piektā apmācība < / div >
< div klasē = 'border-2 border-orange-600' > Sestā apmācība < / div >
< div klasē = 'border-2 border-orange-600' > Septītā apmācība < / div >
< div klasē = 'border-2 border-orange-600' > Astotā apmācība < / div >
< / div >
<ķermenis<
Iepriekš minētajās koda rindās:
- Vispirms saistiet galveno CSS failu ' /dist/output.css ' ar esošo HTML failu ' index.html ' izmantojot '
” tagu sadaļā “galva”. - Pēc tam sadaļā “body” tiek izveidots elements “
”, kas izmanto “ Fonta izmērs ”, “ Fonta svars ”, “ Teksta līdzināšana ”, “ Teksta dekorēšana ”, un “ Teksta krāsa ” Attiecīgi Tailwind klases.
- Pēc tam tiek pievienots elements “”, kas piemēro “ režģis utilīta, lai iestatītu tā saturu norādītajā režģa izkārtojumu skaitā, starpība ” klase, lai iestatītu horizontālo piemali, un “ plaisa ” utilīta, lai pievienotu norādīto atstarpi starp kolonnām.
- “
” elementa pamatteksta sadaļā ir iekļauti vēl astoņi “” elementi, kas izmanto “ Robežas platums ” un „ Apmales krāsa ” nodarbības, attiecīgi.Izvade
Palaidiet iepriekš minēto HTML kodu tiešraides serverī un analizējiet izvadi:
Kā redzams, izvade atbilstoši pievieno norādīto atstarpi starp kolonnām abās dimensijās.
2. piemērs: izmantojiet utilītu “gap-{size}”, lai neatkarīgi pievienotu atstarpi starp rindām un kolonnām
' atstarpe-{size} ” utilītu var ieviest arī ar izmēriem “x(horizontal)” un “y(vertical)” kā “gap-x-{size}” rindām un “gap-y-{size}” kolonnām, lai pievienotu plaisa starp tām atsevišķi.Apskatīsim tā praktisko īstenošanu.
HTML kods
< galvu >
Apskatiet norādīto kodu:
< saite href = '/dist/output.css' rel = 'stila lapa' >
< / galvu >
< ķermeni >
< div klasē = 'mx-2 grid grid-cols-4 gap-x-4 Gap-y-6' >
< div klasē = 'border-2 border-orange-600' >Pirmā apmācība< / div >
< div klasē = 'border-2 border-orange-600' >Otrā apmācība< / div >
< div klasē = 'border-2 border-orange-600' >Trešā apmācība< / div >
< div klasē = 'border-2 border-orange-600' >Ceturtā apmācība< / div >
< div klasē = 'border-2 border-orange-600' >Piektā apmācība< / div >
< div klasē = 'border-2 border-orange-600' >Sestā apmācība< / div >
< div klasē = 'border-2 border-orange-600' >Septītā apmācība< / div >
< div klasē = 'border-2 border-orange-600' >Astotā apmācība< / div >
< / div >
< ķermeni >Šeit “ sprauga-x-{izmērs} utilīta pievieno atstarpi starp rindām un atstarpe-y-{size} ” neatkarīgi pievieno norādīto atstarpi starp kolonnām.
Izvade
Iepriekš minētais rezultāts apstiprina, ka atstarpe starp rindām un kolonnām tiek piemērota atbilstoši.
Secinājums
“Tailwind CSS” nodrošina iebūvētu “ atstarpe-{size} ” utilīta, lai pievienotu atstarpi starp kolonnām. To var arī izmantot, lai atsevišķi pievienotu atstarpi starp rindām un kolonnām, izmantojot “ sprauga-x-{izmērs} ” un „ atstarpe-y-{size} ” komunālie pakalpojumi. Šajā ziņojumā tika sniegta pilnīga procedūra, lai pievienotu atstarpi starp kolonnām programmā Tailwind.
- “