Tässä viestissä käsitellään täydellistä menettelyä sarakkeiden välisen aukon lisäämiseksi Tailwindissä.
Kuinka lisätä rakoa sarakkeiden väliin Tailwindissä?
Lisää tailwindin sarakkeiden väliin sisäänrakennettua ' aukko-{koko} ”apuohjelma. Se määrittää kokonaislukuarvon, joka edustaa sarakkeiden välistä rakoa vaaka- ja pystysuunnassa. Tehdään tämä tehtävä käytännössä esitettyjen esimerkkien avulla.
Projektin tiedostorakenne
' aukko-{koko} ”-apuohjelma voidaan toteuttaa missä tahansa Tailwind-projektissa, joka noudattaa annettua tiedostorakennetta:
Aloitetaan ensimmäisestä esimerkistä.
Esimerkki 1: Käytä 'gap-{size}' -apuohjelmaa lisätäksesi saman välin rivien ja sarakkeiden väliin
Tässä esimerkissä käytetään 'gap-{size}' -apuohjelmaa saman raon lisäämiseksi vaaka- ja pystysuunnassa annettujen sarakkeiden väliin.
HTML-koodi
Yleiskatsaus seuraavaan koodiin:
< pää >
< linkki href = '/dist/output.css' rel = 'tyylitaulukko' >
< / pää >
< kehon >
< h1 luokkaa = 'teksti-3xl font-bold text-center alleviivaus teksti-oranssi-600' > Tervetuloa Linuxhintiin! < / h1 >< br >
< div luokkaa = 'mx-2 grid grid-cols-3 gap-4' >
< div luokkaa = 'reuna-2 border-oranssi-600' > Ensimmäinen opetusohjelma < / div >
< div luokkaa = 'reuna-2 border-oranssi-600' > Toinen opetusohjelma < / div >
< div luokkaa = 'reuna-2 border-oranssi-600' > Kolmas opetusohjelma < / div >
< div luokkaa = 'reuna-2 border-oranssi-600' > Neljäs opetusohjelma < / div >
< div luokkaa = 'reuna-2 border-oranssi-600' > Viides opetusohjelma < / div >
< div luokkaa = 'reuna-2 border-oranssi-600' > Kuudes opetusohjelma < / div >
< div luokkaa = 'reuna-2 border-oranssi-600' > Seitsemäs opetusohjelma < / div >
< div luokkaa = 'reuna-2 border-oranssi-600' > Kahdeksas opetusohjelma < / div >
< / div >
Yllä olevilla koodiriveillä:
- Linkitä ensin CSS-päätiedosto ' /dist/output.css ' olemassa olevan HTML-tiedoston kanssa ' index.html ' käyttämällä '
' -tunnisteen 'head' -osiossa. - Seuraavaksi body-osio luo '
'-elementin, joka käyttää ' Fonttikoko ”, “ Fontin paino ”, “ Teksti Tasaa ”, “ Tekstin koristelu ', ja ' Tekstin väri ” Vastatuuliluokat.
- Tämän jälkeen lisätään ''-elementti, joka käyttää ' ruudukko '-apuohjelma asettaa sen sisällön ilmoitettuun määrään ruudukkoasetteluja, ' marginaali ' luokka asettaa vaakamarginaalin ja ' aukko ”-apuohjelma lisätäksesi määritetyn raon sarakkeiden väliin.
- '
' -elementin runko-osaan sisältyy vielä kahdeksan '' -elementtiä, jotka käyttävät ' Reunan leveys ' ja ' Reunuksen väri ”luokat.Lähtö
Suorita yllä oleva HTML-koodi live-palvelimella ja analysoi tulos:
Kuten näkyy, tulos lisää määritetyn raon sarakkeiden väliin molemmissa mitoissa asianmukaisesti.
Esimerkki 2: Käytä 'gap-{size}' -apuohjelmaa lisätäksesi raon rivien ja sarakkeiden väliin itsenäisesti
' aukko-{koko} '-apuohjelma voidaan toteuttaa myös mitoilla 'x(horizontal)' ja 'y(pystysuora)' riveille 'gap-x-{size}' ja 'gap-y-{size}' sarakkeille lisäämään ero niiden välillä erikseen.Katsotaanpa sen käytännön toteutusta.
HTML-koodi
< pää >
Katso annettu koodi:
< linkki href = '/dist/output.css' rel = 'tyylitaulukko' >
< / pää >
< kehon >
< div luokkaa = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div luokkaa = 'reuna-2 border-oranssi-600' >Ensimmäinen opetusohjelma< / div >
< div luokkaa = 'reuna-2 border-oranssi-600' >Toinen opetusohjelma< / div >
< div luokkaa = 'reuna-2 border-oranssi-600' >Kolmas opetusohjelma< / div >
< div luokkaa = 'reuna-2 border-oranssi-600' >Neljäs opetusohjelma< / div >
< div luokkaa = 'reuna-2 border-oranssi-600' >Viides opetusohjelma< / div >
< div luokkaa = 'reuna-2 border-oranssi-600' >Kuudes opetusohjelma< / div >
< div luokkaa = 'reuna-2 border-oranssi-600' >Seitsemäs opetusohjelma< / div >
< div luokkaa = 'reuna-2 border-oranssi-600' >Kahdeksas opetusohjelma< / div >
< / div >
< kehon >Täällä ' väli-x-{koko} '-apuohjelma lisää rivien väliin ja ' aukko-y-{koko} ” lisää määritetyn raon sarakkeiden väliin itsenäisesti.
Lähtö
Yllä oleva tulos varmistaa, että rivien ja sarakkeiden välistä aukkoa sovelletaan vastaavasti.
Johtopäätös
'Tailwind CSS' tarjoaa sisäänrakennetun ' aukko-{koko} ” apuohjelma sarakkeiden välisen raon lisäämiseksi. Sitä voidaan käyttää myös lisäämään rivien ja sarakkeiden väliin erikseen ' väli-x-{koko} ' ja ' aukko-y-{koko} ”apuohjelmat. Tämä viesti tarjosi täydellisen menettelyn sarakkeiden välisen raon lisäämiseksi Tailwindissä.
- '