Deze blog geeft een idee van het toewijzen van gelijke ruimte tussen meerdere elementen in Tailwind.
Hoe gelijke ruimte tussen meerdere elementen toewijzen in rugwind?
Gebruikers kunnen gelijke spaties tussen elementen toewijzen met behulp van de “ spatie-{x/y}-{grootte} ”utiliteitsklasse. Gebruikers kunnen ruimte toevoegen op de x- of y-as door een geheel getal op te geven. Het spatiëringshulpprogramma is nodig omdat het de webpagina aantrekkelijk maakt. Als een webpagina niet de juiste afstand tussen de elementen heeft, zal deze geen gebruikers aantrekken.
Laten we een codevoorbeeld nemen om gelijke ruimte tussen rasterelementen toe te wijzen.
Methode 1: Ruimte op de X-as toewijzen.
Gelijke ruimte toegewezen op de x-as zorgt voor gelijke ruimte rechts en links van het element. Gebruik de volgende syntaxis om de ruimte op de x-as toe te wijzen:
ruimte - X - { maat }
De grootte kan elke gehele waarde zijn.
Beschouw de onderstaande code om gelijke ruimte op de x-as toe te wijzen:
< lichaam >< div klas = 'mx-4 raster raster-cols-4 spatie-x-4' >
< div klas = 'bg-groen-400 h-16 afgerond-lg rand-2 rand-groen-800' > 1 div >
< div klas = 'bg-groen-400 h-16 afgerond-lg rand-2 rand-groen-800' > 2 div >
< div klas = 'bg-groen-400 h-16 afgerond-lg rand-2 rand-groen-800' > 3 div >
< div klas = 'bg-groen-400 h-16 afgerond-lg rand-2 rand-groen-800' > 4 div >
div >
lichaam >
In deze code:
- “ mx-4 'voegt een marge van 4 px toe op de x-as (rechts en links).
- De ' rooster '-klasse creëert een raster.
- De ' raster-cols-4 ”Maak 4 kolommen in het raster.
- De ' spatie-x-4 'voegt een ruimte van 4 px toe tussen de elementen van het raster.
- “ bg-groen-400 ” stelt de achtergrondkleur in op groen.
- “ u-16 ” stelt de hoogte in op 16px.
- De ' afgerond-lg ” maakt de hoek rond en de randradius is groot.
- De ' grens-2 ” maakt een rand van 2 px rond het element.
- “ border-groen-800 ” maakt de rand donkergroen.
Uitvoer
Bekijk een voorbeeld van de uitvoer die is gemaakt door de bovenstaande code:
Het is te zien dat er een afstand van 4px tussen de elementen is toegewezen.
Methode 2: Ruimte op de y-as toewijzen.
De afstand kan op de y-as worden toegewezen, vergelijkbaar met de bovenstaande methode, door kleine wijzigingen in de bovenstaande code. Het wijst spaties toe langs de y-as (boven en onder). De syntaxis ervoor is:
De onderstaande code kan worden geïmplementeerd om spaties langs de y-as toe te voegen:
< lichaam >< div klas = 'mx-4 mijn-4 spatie-y-4' >
< div klas = 'bg-groen-400 h-16 afgerond-lg rand-2 rand-groen-800' > 1 div >
< div klas = 'bg-groen-400 h-16 afgerond-lg rand-2 rand-groen-800' > 2 div >
< div klas = 'bg-groen-400 h-16 afgerond-lg rand-2 rand-groen-800' > 3 div >
< div klas = 'bg-groen-400 h-16 afgerond-lg rand-2 rand-groen-800' > 4 div >
div >
lichaam >
In deze code:
- “ mx-4 'voegt een marge van 4 px links en rechts van elementen toe om de uitvoer geoptimaliseerd te maken.
- “ mijn-4 'voegt een marge van 4 px toe op de y-as (boven en onder).
- “ spatie-y-4 'voegt een ruimte van 4 px toe op de y-as (boven en onder).
Uitvoer
Sla de bovenstaande code op en bekijk een voorbeeld van de webpagina die ermee is gemaakt om de afstand als volgt te zien:
Dat gaat allemaal over het toekennen van gelijke ruimte tussen elementen.
Conclusie
Om gelijke ruimte tussen meerdere elementen in Tailwind toe te wijzen, kunnen gebruikers de “ spatie-{x/y}-{grootte} 'nutsklasse en specificeer een geheel getal als grootte volgens de vereiste. Door de gelijke afstand tussen de elementen is de uitvoer schaalbaarder en blijven kijkers betrokken bij de webpagina. Dit bericht heeft de methode geboden om gelijke ruimte tussen meerdere elementen in Tailwind toe te wijzen.