Dit bericht gaat dieper in op de volledige procedure om de opening tussen kolommen in Tailwind toe te voegen.
Hoe een opening tussen kolommen in Tailwind toevoegen?
Gebruik de ingebouwde ' gap-{grootte} ' nutsvoorziening. Het specificeert een geheel getal dat de opening tussen de kolommen horizontaal en verticaal vertegenwoordigt. Laten we deze taak praktisch uitvoeren met behulp van de genoemde voorbeelden.
Structuur van projectbestanden
De ' gap-{grootte} ” hulpprogramma kan worden geïmplementeerd in elk van de Tailwind-projecten die de gegeven bestandsstructuur volgen:
Laten we beginnen met het eerste voorbeeld.
Voorbeeld 1: gebruik het hulpprogramma 'gap-{size}' om dezelfde opening tussen rijen en kolommen toe te voegen
In dit voorbeeld wordt het hulpprogramma 'gap-{size}' toegepast om dezelfde tussenruimte horizontaal en verticaal toe te voegen tussen de gegeven kolommen.
HTML code
Overzicht van de volgende code:
< hoofd >
< koppeling href = '/dist/output.css' rel = 'stijlblad' >
< / hoofd >
< lichaam >
< h1 klas = 'tekst-3xl lettertype-vetgedrukte tekst-gecentreerde onderstreping tekst-oranje-600' > Welkom bij Linuxhint! < / h1 >< br >
< div klas = 'mx-2 grid grid-cols-3 gap-4' >
< div klas = 'border-2 border-oranje-600' > Eerste zelfstudie < / div >
< div klas = 'border-2 border-oranje-600' > Tweede zelfstudie < / div >
< div klas = 'border-2 border-oranje-600' > Derde zelfstudie < / div >
< div klas = 'border-2 border-oranje-600' > Vierde zelfstudie < / div >
< div klas = 'border-2 border-oranje-600' > Vijfde zelfstudie < / div >
< div klas = 'border-2 border-oranje-600' > Zesde zelfstudie < / div >
< div klas = 'border-2 border-oranje-600' > Zevende zelfstudie < / div >
< div klas = 'border-2 border-oranje-600' > Achtste zelfstudie < / div >
< / div >
In de bovenstaande coderegels:
- Koppel eerst het CSS-hoofdbestand ' /dist/output.css ” met het bestaande HTML-bestand “ index.html ' de ... gebruiken ' '-tag in het gedeelte 'head'.
- Vervolgens maakt de 'body'-sectie een '
'-element dat de ' Lettertypegrootte ”, “ Lettertype dikte ”, “ Tekst uitlijnen ”, “ Tekst decoratie ', en de ' Tekst kleur ” Tailwind-klassen, respectievelijk.
- Daarna wordt een “” element toegevoegd dat de “ rooster ” hulpprogramma om de inhoud ervan in te stellen in het opgegeven aantal rasterlay-outs, de “ marge ” klasse om de horizontale marge in te stellen, en de “ gat ” hulpprogramma om de opgegeven opening tussen kolommen toe te voegen.
- In de hoofdsectie van het element '
' zijn nog eens acht ''-elementen opgenomen die gebruikmaken van de ' Grensbreedte ' en de ' Rand kleur ” klassen, respectievelijk.Uitgang
Voer de bovenstaande HTML-code uit in de live server en analyseer de uitvoer:
Zoals te zien is, voegt de uitvoer de gespecificeerde opening tussen kolommen in beide dimensies op de juiste manier toe.
Voorbeeld 2: gebruik het hulpprogramma 'gap-{size}' om onafhankelijk een opening tussen rijen en kolommen toe te voegen
De ' gap-{grootte} ” hulpprogramma kan ook worden geïmplementeerd met 'x(horizontaal)' en 'y(verticaal)' dimensies als 'gap-x-{size}' voor rijen, en de 'gap-y-{size}' voor kolommen om de kloof tussen hen afzonderlijk.Laten we de praktische implementatie bekijken.
HTML code
< hoofd >
Kijk eens naar de gegeven code:
< koppeling href = '/dist/output.css' rel = 'stijlblad' >
< / hoofd >
< lichaam >
< div klas = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div klas = 'border-2 border-oranje-600' >Eerste zelfstudie< / div >
< div klas = 'border-2 border-oranje-600' >Tweede zelfstudie< / div >
< div klas = 'border-2 border-oranje-600' >Derde zelfstudie< / div >
< div klas = 'border-2 border-oranje-600' >Vierde zelfstudie< / div >
< div klas = 'border-2 border-oranje-600' >Vijfde zelfstudie< / div >
< div klas = 'border-2 border-oranje-600' >Zesde zelfstudie< / div >
< div klas = 'border-2 border-oranje-600' >Zevende zelfstudie< / div >
< div klas = 'border-2 border-oranje-600' >Achtste zelfstudie< / div >
< / div >
< lichaam >Hier de ' gap-x-{grootte} ” hulpprogramma voegt de opening tussen rijen toe en de “ gap-y-{maat} ” voegt de gespecificeerde opening tussen kolommen onafhankelijk toe.
Uitgang
Het bovenstaande resultaat verifieert dat de opening tussen rijen en kolommen dienovereenkomstig wordt toegepast.
Conclusie
'Tailwind CSS' biedt een ingebouwde ' gap-{grootte} ” hulpprogramma om de opening tussen de kolommen toe te voegen. Het kan ook worden gebruikt om de opening tussen rijen en kolommen afzonderlijk toe te voegen via de ' gap-x-{grootte} ' en de ' gap-y-{maat} ' nutsvoorzieningen. Dit bericht bevatte de volledige procedure om de opening tussen kolommen in Tailwind toe te voegen.
- In de hoofdsectie van het element '