Această postare detaliază procedura completă de adăugare a decalajului dintre coloane în Tailwind.
Cum să adăugați un spațiu între coloane în Tailwind?
Pentru a adăuga decalajul dintre coloane în Tailwind, utilizați „ gap-{size} ” utilitate. Specifică o valoare întreagă care reprezintă decalajul dintre coloane orizontal și vertical. Să facem această sarcină practic cu ajutorul exemplelor menționate.
Structura fișierului de proiect
„ gap-{size} ” utilitarul poate fi implementat în oricare dintre proiectele Tailwind care urmează structura de fișiere dată:
Să începem cu primul exemplu.
Exemplul 1: Utilizați utilitarul „gap-{size}” pentru a adăuga același spațiu între rânduri și coloane
Acest exemplu aplică utilitarul „gap-{size}” pentru a adăuga același spațiu orizontal și vertical între coloanele date.
Cod HTML
Prezentare generală a următorului cod:
< cap >
< legătură href = „/dist/output.css” rel = 'foaia de stil' >
< / cap >
< corp >
< h1 clasă = „text-3xl font-bold text-center subliniat text-orange-600” > Bun venit la Linuxhint! < / h1 >< br >
< div clasă = „mx-2 grid grid-cols-3 gap-4” >
< div clasă = 'border-2 border-orange-600' > Primul tutorial < / div >
< div clasă = 'border-2 border-orange-600' > Al doilea tutorial < / div >
< div clasă = 'border-2 border-orange-600' > Al treilea tutorial < / div >
< div clasă = 'border-2 border-orange-600' > Al patrulea tutorial < / div >
< div clasă = 'border-2 border-orange-600' > Al cincilea tutorial < / div >
< div clasă = 'border-2 border-orange-600' > Al șaselea tutorial < / div >
< div clasă = 'border-2 border-orange-600' > Al șaptelea tutorial < / div >
< div clasă = 'border-2 border-orange-600' > Al optulea tutorial < / div >
< / div >
În liniile de cod de mai sus:
- Mai întâi, conectați fișierul CSS principal „ /dist/output.css ” cu fișierul HTML existent ” index.html ' folosind ' ” în secțiunea „head”.
- Apoi, secțiunea „corp” creează un element „
” care folosește „ Marimea fontului ”, “ Grosimea fontului ”, “ Aliniere text ”, “ Decorare text ', si ' Culoarea textului ” Clasele de vânt în coadă, respectiv.
- După aceea, se adaugă un element „” care aplică „ grilă ” utilitar pentru a-și seta conținutul în numărul declarat de layout-uri de grilă, „ marginea ” pentru a seta marginea orizontală, iar ” decalaj ” utilitar pentru a adăuga decalajul specificat între coloane.
- În secțiunea corpului elementului „
”, sunt incluse alte opt elemente „” care utilizează „ Lățimea graniței ' si ' Culoarea chenarului ” clase, respectiv.Ieșire
Rulați codul HTML de mai sus în serverul live și analizați rezultatul:
După cum s-a văzut, rezultatul adaugă decalajul specificat între coloane în ambele dimensiuni în mod corespunzător.
Exemplul 2: Utilizați utilitarul „gap-{size}” pentru a adăuga un spațiu între rânduri și coloane independent
„ gap-{size} utilitarul poate fi implementat și cu dimensiunile „x(orizontală)” și „y(verticală)” ca „gap-x-{size}” pentru rânduri și „gap-y-{size}” pentru coloane pentru a adăuga decalajul dintre ele individual.Să vedem implementarea sa practică.
Cod HTML
< cap >
Aruncă o privire la codul dat:
< legătură href = „/dist/output.css” rel = 'foaia de stil' >
< / cap >
< corp >
< div clasă = „mx-2 grid grid-cols-4 gap-x-4 gap-y-6” >
< div clasă = 'border-2 border-orange-600' >Primul tutorial< / div >
< div clasă = 'border-2 border-orange-600' >Al doilea tutorial< / div >
< div clasă = 'border-2 border-orange-600' >Al treilea tutorial< / div >
< div clasă = 'border-2 border-orange-600' >Al patrulea tutorial< / div >
< div clasă = 'border-2 border-orange-600' >Al cincilea tutorial< / div >
< div clasă = 'border-2 border-orange-600' >Al șaselea tutorial< / div >
< div clasă = 'border-2 border-orange-600' >Al șaptelea tutorial< / div >
< div clasă = 'border-2 border-orange-600' >Al optulea tutorial< / div >
< / div >
< corp >Aici ' gap-x-{size} ” utilitarul adaugă decalajul dintre rânduri și „ gap-y-{size} ” adaugă decalajul specificat între coloane în mod independent.
Ieșire
Rezultatul de mai sus verifică dacă decalajul dintre rânduri și coloane este aplicat corespunzător.
Concluzie
„Tailwind CSS” oferă un „ gap-{size} ” utilitate pentru a adăuga decalajul dintre coloane. De asemenea, poate fi folosit pentru a adăuga distanța dintre rânduri și coloane separat prin intermediul „ gap-x-{size} ' si ' gap-y-{size} ” utilități. Această postare a oferit procedura completă de adăugare a decalajului dintre coloane în Tailwind.
- În secțiunea corpului elementului „