Aquesta publicació explica el procediment complet per afegir l'espai entre columnes a Tailwind.
Com afegir un espai entre columnes a Tailwind?
Per afegir l'espai entre les columnes a Tailwind, utilitzeu el ' gap-{mida} ” utilitat. Especifica un valor enter que representa l'espai entre les columnes horitzontalment i verticalment. Fem aquesta tasca pràcticament amb l'ajuda dels exemples indicats.
Estructura del fitxer del projecte
El ' gap-{mida} ” La utilitat es pot implementar en qualsevol dels projectes Tailwind que segueixen l'estructura de fitxers donada:
Comencem pel primer exemple.
Exemple 1: utilitzeu la utilitat 'gap-{size}' per afegir el mateix espai entre files i columnes
Aquest exemple aplica la utilitat 'gap-{size}' per afegir el mateix espai horitzontalment i verticalment entre les columnes donades.
Codi HTML
Visió general del codi següent:
< cap >
< enllaç href = '/dist/output.css' rel = 'full d'estil' >
< / cap >
< cos >
< h1 classe = 'text-3xl font-bold text-center subratlla text-orange-600' > Benvingut a Linuxhint! < / h1 >< br >
< div classe = 'mx-2 grid grid-cols-3 gap-4' >
< div classe = 'frontera-2 vorera-taronja-600' > Primer tutorial < / div >
< div classe = 'frontera-2 vorera-taronja-600' > Segon tutorial < / div >
< div classe = 'frontera-2 vorera-taronja-600' > Tercer tutorial < / div >
< div classe = 'frontera-2 vorera-taronja-600' > Quart Tutorial < / div >
< div classe = 'frontera-2 vorera-taronja-600' > Cinquè tutorial < / div >
< div classe = 'frontera-2 vorera-taronja-600' > Sisè tutorial < / div >
< div classe = 'frontera-2 vorera-taronja-600' > Setè tutorial < / div >
< div classe = 'frontera-2 vorera-taronja-600' > Vuitè Tutorial < / div >
< / div >
A les línies de codi anteriors:
- Primer, enllaça el fitxer CSS principal ' /dist/output.css ' amb el fitxer HTML existent ' index.html ' utilitzant el '
” a la secció “cap”. - A continuació, la secció 'cos' crea un element '
' que utilitza el ' Mida de la font ”, “ Pes de la lletra ”, “ Alineació de text ”, “ Decoració de text ', i la ' Color del text ” Classes de vent de cua, respectivament.
- Després d'això, s'afegeix un element '' que aplica el ' graella ” per configurar el seu contingut en el nombre indicat de dissenys de quadrícula, el “ marge ” classe per establir el marge horitzontal i “ escletxa ” utilitat per afegir el buit especificat entre columnes.
- A la secció del cos de l'element '
', s'inclouen vuit elements més '' que utilitzen el ' Amplada de la vora ' i la ' Color de la vora ” classes, respectivament.Sortida
Executeu el codi HTML anterior al servidor en directe i analitzeu la sortida:
Com s'ha vist, la sortida afegeix el buit especificat entre columnes en ambdues dimensions de manera adequada.
Exemple 2: utilitzeu la utilitat 'gap-{size}' per afegir un espai entre files i columnes de manera independent
El ' gap-{mida} La utilitat també es pot implementar amb dimensions 'x (horitzontal)' i 'y (vertical)' com a 'gap-x-{mida}' per a les files, i el 'gap-y-{mida}' per a les columnes per afegir el distància entre ells individualment.Vegem la seva implementació pràctica.
Codi HTML
< cap >
Fes una ullada al codi donat:
< enllaç href = '/dist/output.css' rel = 'full d'estil' >
< / cap >
< cos >
< div classe = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div classe = 'frontera-2 vorera-taronja-600' >Primer tutorial< / div >
< div classe = 'frontera-2 vorera-taronja-600' >Segon tutorial< / div >
< div classe = 'frontera-2 vorera-taronja-600' >Tercer Tutorial< / div >
< div classe = 'frontera-2 vorera-taronja-600' >Quart tutorial< / div >
< div classe = 'frontera-2 vorera-taronja-600' >Cinquè Tutorial< / div >
< div classe = 'frontera-2 vorera-taronja-600' >Sisè tutorial< / div >
< div classe = 'frontera-2 vorera-taronja-600' >Setè tutorial< / div >
< div classe = 'frontera-2 vorera-taronja-600' >Vuitè Tutorial< / div >
< / div >
< cos >Aquí, el ' gap-x-{mida} ” La utilitat afegeix el buit entre files i el “ gap-y-{mida} ” afegeix el buit especificat entre columnes de manera independent.
Sortida
El resultat anterior verifica que l'espai entre files i columnes s'aplica en conseqüència.
Conclusió
'Tailwind CSS' proporciona un integrat ' gap-{mida} ” utilitat per afegir el buit entre les columnes. També es pot utilitzar per afegir el buit entre files i columnes per separat mitjançant el ' gap-x-{mida} ' i la ' gap-y-{mida} ” utilitats. Aquesta publicació proporciona el procediment complet per afegir l'espai entre columnes a Tailwind.
- A la secció del cos de l'element '