See postitus käsitleb täielikku protseduuri Tailwindis veergude vahe lisamiseks.
Kuidas lisada taganttuules veergude vahele tühimikku?
Tailwindis veergude vahe lisamiseks kasutage sisseehitatud ' vahe-{size} ” utiliit. See määrab täisarvu väärtuse, mis tähistab veergude vahet horisontaalselt ja vertikaalselt. Teeme selle ülesande praktiliselt ära toodud näidete abil.
Projekti faili struktuur
' vahe-{size} ” utiliiti saab rakendada kõigis Tailwindi projektides, mis järgivad antud failistruktuuri:
Alustame esimese näitega.
Näide 1: kasutage ridade ja veergude vahele sama vahe lisamiseks utiliiti „vahe-{size}”
See näide kasutab utiliiti „gap-{size}”, et lisada sama tühimik antud veergude vahele horisontaalselt ja vertikaalselt.
HTML-kood
Ülevaade järgmisest koodist:
< pea >
< link href = '/dist/output.css' rel = 'laadileht' >
< / pea >
< keha >
< h1 klass = 'text-3xl font-bold text-center underline text-orange-600' > Tere tulemast Linuxhinti! < / h1 >< br >
< div klass = 'mx-2 grid grid-cols-3 gap-4' >
< div klass = 'ääris-2 piir-oranž-600' > Esimene õpetus < / div >
< div klass = 'ääris-2 piir-oranž-600' > Teine õpetus < / div >
< div klass = 'ääris-2 piir-oranž-600' > Kolmas õpetus < / div >
< div klass = 'ääris-2 piir-oranž-600' > Neljas õpetus < / div >
< div klass = 'ääris-2 piir-oranž-600' > Viies õpetus < / div >
< div klass = 'ääris-2 piir-oranž-600' > Kuues õpetus < / div >
< div klass = 'ääris-2 piir-oranž-600' > Seitsmes õpetus < / div >
< div klass = 'ääris-2 piir-oranž-600' > Kaheksas õpetus < / div >
< / div >
Ülaltoodud koodiridades:
- Kõigepealt linkige peamine CSS-fail ' /dist/output.css 'olemasoleva HTML-failiga' index.html ' kasutades ' ” sildi jaotises „pea”.
- Järgmisena loob jaotis 'keha' elemendi '
', mis kasutab ' Fondi suurus ”, “ Fondi kaal ”, “ Teksti joondamine ”, “ Teksti kaunistamine ', ja ' Teksti värv ” Vastavalt taganttuule klassid.
- Pärast seda lisatakse element '', mis rakendab ' võre utiliit, et määrata selle sisu määratud arvus ruudustiku paigutustes, marginaal ' klassi horisontaalse veerise määramiseks ja ' lõhe ” utiliit, et lisada veergude vahele määratud vahe.
- Elemendi „
” osasse on lisatud veel kaheksa „” elementi, mis kasutavad „ Piiri laius ' ja ' Äärise värv ” klassid vastavalt.Väljund
Käivitage ülaltoodud HTML-kood reaalajas serveris ja analüüsige väljundit:
Nagu näha, lisab väljund mõlemas mõõtmes veergude vahel määratud vahe.
Näide 2: kasutage ridade ja veergude vahele eraldiseisva vahe lisamiseks utiliiti „gap-{size}”
' vahe-{size} utiliiti saab rakendada ka mõõtmetega 'x(horizontal)' ja 'y(vertikaalne)' ridade jaoks 'gap-x-{size}' ja 'gap-y-{size}' veergude jaoks, et lisada lõhe nende vahel eraldi.Vaatame selle praktilist rakendamist.
HTML-kood
< pea >
Vaadake antud koodi:
< link href = '/dist/output.css' rel = 'laadileht' >
< / pea >
< keha >
< div klass = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div klass = 'ääris-2 piir-oranž-600' >Esimene õpetus< / div >
< div klass = 'ääris-2 piir-oranž-600' >Teine õpetus< / div >
< div klass = 'ääris-2 piir-oranž-600' >Kolmas õpetus< / div >
< div klass = 'ääris-2 piir-oranž-600' >Neljas õpetus< / div >
< div klass = 'ääris-2 piir-oranž-600' >Viies õpetus< / div >
< div klass = 'ääris-2 piir-oranž-600' >Kuues õpetus< / div >
< div klass = 'ääris-2 piir-oranž-600' >Seitsmes õpetus< / div >
< div klass = 'ääris-2 piir-oranž-600' >Kaheksas õpetus< / div >
< / div >
< keha >Siin on ' vahe-x-{size} utiliit lisab vahe ridade ja vahe-y-{size} ” lisab veergude vahele määratud vahe iseseisvalt.
Väljund
Ülaltoodud tulemus kinnitab, et ridade ja veergude vahelist lünka rakendatakse vastavalt.
Järeldus
Tailwind CSS pakub sisseehitatud vahe-{size} ” utiliit veergude vahe lisamiseks. Seda saab kasutada ka ridade ja veergude vahe lisamiseks eraldi, kasutades ' vahe-x-{size} ' ja ' vahe-y-{size} ” kommunaalteenused. See postitus andis täieliku protseduuri Tailwindis veergude vahe lisamiseks.
- Elemendi „