Dette indlæg uddyber den komplette procedure for at tilføje hullet mellem kolonner i Tailwind.
Hvordan tilføjer man hul mellem kolonner i medvind?
For at tilføje mellemrummet mellem kolonnerne i Tailwind skal du bruge den indbyggede ' gap-{størrelse} ' nytte. Den angiver en heltalsværdi, der repræsenterer afstanden mellem kolonnerne vandret og lodret. Lad os udføre denne opgave praktisk ved hjælp af de angivne eksempler.
Projektfilstruktur
Det ' gap-{størrelse} ”-værktøjet kan implementeres i ethvert af Tailwind-projekterne, der følger den givne filstruktur:
Lad os starte med det første eksempel.
Eksempel 1: Brug 'gap-{size}'-værktøjet til at tilføje det samme mellemrum mellem rækker og kolonner
Dette eksempel anvender 'gap-{size}'-værktøjet til at tilføje det samme mellemrum vandret og lodret mellem de givne kolonner.
HTML kode
Oversigt over følgende kode:
< hoved >
< link href = '/dist/output.css' rel = 'stilark' >
< / hoved >
< legeme >
< h1 klasse = 'text-3xl font-fed text-center underline text-orange-600' > Velkommen til Linuxhint! < / h1 >< br >
< div klasse = 'mx-2 grid grid-cols-3 gap-4' >
< div klasse = 'border-2 border-orange-600' > Første tutorial < / div >
< div klasse = 'border-2 border-orange-600' > Anden tutorial < / div >
< div klasse = 'border-2 border-orange-600' > Tredje tutorial < / div >
< div klasse = 'border-2 border-orange-600' > Fjerde tutorial < / div >
< div klasse = 'border-2 border-orange-600' > Femte tutorial < / div >
< div klasse = 'border-2 border-orange-600' > Sjette tutorial < / div >
< div klasse = 'border-2 border-orange-600' > Syvende tutorial < / div >
< div klasse = 'border-2 border-orange-600' > Ottende tutorial < / div >
< / div >
I ovenstående kodelinjer:
- Tilknyt først hoved-CSS-filen ' /dist/output.css ' med den eksisterende HTML-fil ' index.html ' bruger ' ' tag i afsnittet 'hoved'.
- Dernæst opretter sektionen 'body' et '
'-element, der bruger ' Skriftstørrelse ', ' Skrifttypevægt ', ' Tekstjustering ', ' Tekst dekoration ', og ' Tekst farve ” Medvindsklasser, hhv.
- Derefter tilføjes et ''-element, der anvender ' gitter '-værktøjet til at indstille dets indhold i det angivne antal gitterlayouts, ' margen '-klassen for at indstille den vandrette margen, og ' hul ” værktøj til at tilføje det angivne mellemrum mellem kolonner.
- I sektionen '
'-elementets krop er yderligere otte ''-elementer inkluderet, der bruger ' Border Bredde ' og ' Kantfarve ” klasser, hhv.Produktion
Kør ovenstående HTML-kode i live-serveren og analyser outputtet:
Som det ses, tilføjer outputtet det angivne mellemrum mellem kolonner i begge dimensioner på passende vis.
Eksempel 2: Brug 'gap-{size}'-værktøjet til at tilføje et mellemrum mellem rækker og kolonner uafhængigt
Det ' gap-{størrelse} '-værktøjet kan også implementeres med 'x(horisontal)' og 'y(vertical)'-dimensioner som 'gap-x-{size}' for rækker, og 'gap-y-{size}' for kolonner for at tilføje afstand mellem dem individuelt.Lad os se dens praktiske gennemførelse.
HTML kode
< hoved >
Tag et kig på den givne kode:
< link href = '/dist/output.css' rel = 'stylesheet' >
< / hoved >
< legeme >
< div klasse = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div klasse = 'border-2 border-orange-600' >Første vejledning< / div >
< div klasse = 'border-2 border-orange-600' >Anden vejledning< / div >
< div klasse = 'border-2 border-orange-600' >Tredje vejledning< / div >
< div klasse = 'border-2 border-orange-600' >Fjerde vejledning< / div >
< div klasse = 'border-2 border-orange-600' >Femte vejledning< / div >
< div klasse = 'border-2 border-orange-600' >Sjette vejledning< / div >
< div klasse = 'border-2 border-orange-600' >Syvende vejledning< / div >
< div klasse = 'border-2 border-orange-600' >Ottende vejledning< / div >
< / div >
< legeme >Her er ' gap-x-{størrelse} '-værktøjet tilføjer afstanden mellem rækker og ' gap-y-{størrelse} ” tilføjer det angivne mellemrum mellem kolonner uafhængigt.
Produktion
Ovenstående resultat bekræfter, at afstanden mellem rækker og kolonner anvendes i overensstemmelse hermed.
Konklusion
'Tailwind CSS' giver en indbygget ' gap-{størrelse} ” værktøj til at tilføje mellemrummet mellem kolonnerne. Det kan også bruges til at tilføje afstanden mellem rækker og kolonner separat via ' gap-x-{størrelse} ' og ' gap-y-{størrelse} ' forsyningsselskaber. Dette indlæg gav den komplette procedure for at tilføje hullet mellem kolonner i Tailwind.
- I sektionen '