Questo post elabora la procedura completa per aggiungere il divario tra le colonne in Tailwind.
Come aggiungere uno spazio tra le colonne in Tailwind?
Per aggiungere lo spazio tra le colonne in Tailwind, usa il built-in ' spazio-{dimensione} ' utilità. Specifica un valore intero che rappresenta lo spazio tra le colonne orizzontalmente e verticalmente. Facciamo questo compito praticamente con l'aiuto degli esempi indicati.
Struttura del file di progetto
IL ' spazio-{dimensione} L'utilità può essere implementata in uno qualsiasi dei progetti Tailwind che seguono la struttura di file data:
Partiamo dal primo esempio.
Esempio 1: utilizzare l'utilità 'gap-{size}' per aggiungere lo stesso spazio tra righe e colonne
Questo esempio applica l'utilità 'gap-{size}' per aggiungere lo stesso spazio in orizzontale e in verticale tra le colonne specificate.
Codice HTML
Panoramica del seguente codice:
< Testa >
< collegamento href = '/dist/output.css' rel = 'foglio di stile' >
< / Testa >
< corpo >
< h1 classe = 'text-3xl font-bold text-center underline text-orange-600' > Benvenuto su Linuxhint! < / h1 >< fratello >
< div classe = 'mx-2 griglia griglia-cols-3 gap-4' >
< div classe = 'bordo-2 bordo-arancione-600' > Primo Tutorial < / div >
< div classe = 'bordo-2 bordo-arancione-600' > Secondo Tutorial < / div >
< div classe = 'bordo-2 bordo-arancione-600' > Terzo Tutorial < / div >
< div classe = 'bordo-2 bordo-arancione-600' > Quarto Tutorial < / div >
< div classe = 'bordo-2 bordo-arancione-600' > Quinto Tutorial < / div >
< div classe = 'bordo-2 bordo-arancione-600' > Sesto Tutorial < / div >
< div classe = 'bordo-2 bordo-arancione-600' > Settimo Tutorial < / div >
< div classe = 'bordo-2 bordo-arancione-600' > Ottavo Tutorial < / div >
< / div >
Nelle righe di codice sopra:
- Innanzitutto, collega il file CSS principale ' /dist/output.css ' con il file HTML esistente ' indice.html ' usando il '
” tag nella sezione “testa”. - Successivamente, la sezione 'body' crea un elemento '
' che utilizza il ' Dimensione del font ”, “ Peso carattere ”, “ Allinea il testo ”, “ Decorazione del testo ', e il ' Colore del testo Classi Tailwind, rispettivamente.
- Successivamente, viene aggiunto un elemento '' che applica il ' griglia ” utility per impostare il suo contenuto nel numero dichiarato di layout di griglia, il “ margine ” per impostare il margine orizzontale e la “ spacco ” utility per aggiungere lo spazio specificato tra le colonne.
- Nella sezione del corpo dell'elemento '
', sono inclusi altri otto elementi '' che utilizzano il carattere ' Larghezza del bordo ' e il ' Colore del bordo ” classi, rispettivamente.Produzione
Esegui il codice HTML sopra nel server live e analizza l'output:
Come visto, l'output aggiunge lo spazio specificato tra le colonne in entrambe le dimensioni in modo appropriato.
Esempio 2: utilizzare l'utilità 'gap-{size}' per aggiungere uno spazio tra righe e colonne in modo indipendente
IL ' spazio-{dimensione} L'utilità ” può anche essere implementata con le dimensioni “x(orizzontale)” e “y(verticale)” come “spazio-x-{dimensione}” per le righe e “spazio-y-{dimensione}” per le colonne per aggiungere il divario tra loro individualmente.Vediamo la sua implementazione pratica.
Codice HTML
< Testa >
Dai un'occhiata al codice dato:
< collegamento href = '/dist/output.css' rel = 'foglio di stile' >
< / Testa >
< corpo >
< div classe = 'mx-2 griglia griglia-cols-4 gap-x-4 gap-y-6' >
< div classe = 'bordo-2 bordo-arancione-600' >Primo Tutorial< / div >
< div classe = 'bordo-2 bordo-arancione-600' >Secondo Tutorial< / div >
< div classe = 'bordo-2 bordo-arancione-600' >Terzo Tutorial< / div >
< div classe = 'bordo-2 bordo-arancione-600' >Quarto Tutorial< / div >
< div classe = 'bordo-2 bordo-arancione-600' >Quinto Tutorial< / div >
< div classe = 'bordo-2 bordo-arancione-600' >Sesto Tutorial< / div >
< div classe = 'bordo-2 bordo-arancione-600' >Settimo Tutorial< / div >
< div classe = 'bordo-2 bordo-arancione-600' >Ottavo Tutorial< / div >
< / div >
< corpo >Ecco, il “ spazio-x-{dimensione} L'utilità 'aggiunge lo spazio tra le righe e il ' spazio-y-{dimensione} ” aggiunge lo spazio specificato tra le colonne in modo indipendente.
Produzione
Il risultato precedente verifica che lo spazio tra righe e colonne venga applicato di conseguenza.
Conclusione
'Tailwind CSS' fornisce un ' spazio-{dimensione} ” utility per aggiungere lo spazio tra le colonne. Può anche essere utilizzato per aggiungere il divario tra righe e colonne separatamente tramite il ' spazio-x-{dimensione} ' e il ' spazio-y-{dimensione} ” utilità. Questo post ha fornito la procedura completa per aggiungere il divario tra le colonne in Tailwind.
- Nella sezione del corpo dell'elemento '