Acest blog va oferi o idee despre alocarea unui spațiu egal între mai multe elemente în Tailwind.
Cum să atribuiți spațiu egal între mai multe elemente în Tailwind?
Utilizatorii pot atribui spații egale între elemente utilizând „ spațiu-{x/y}-{dimensiune} ” clasa de utilitate. Utilizatorii pot adăuga spațiu pe axa x sau y prin specificarea unei valori întregi. Utilitarul de spațiere este necesar deoarece face pagina web atractivă. Dacă o pagină web nu are o spațiere adecvată între elemente, nu va atrage utilizatori.
Să luăm un exemplu de cod pentru a atribui spațiu egal între elementele grilei.
Metoda 1: Alocarea spațiului pe axa X.
Spațiul egal alocat pe axa x face spațiere egală la dreapta și la stânga elementului. Pentru a atribui spațiul pe axa x utilizați următoarea sintaxă:
spaţiu - X - { mărimea }
Mărimea poate fi orice valoare întreagă.
Luați în considerare codul de mai jos pentru a atribui spațiu egal pe axa x:
< corp >< div clasă = „mx-4 grid grid-cols-4 space-x-4” >
< div clasă = „bg-green-400 h-16 rotunjit-lg chenar-2 chenar-verde-800” > 1 div >
< div clasă = „bg-green-400 h-16 rotunjit-lg chenar-2 chenar-verde-800” > 2 div >
< div clasă = „bg-green-400 h-16 rotunjit-lg chenar-2 chenar-verde-800” > 3 div >
< div clasă = „bg-green-400 h-16 rotunjit-lg chenar-2 chenar-verde-800” > 4 div >
div >
corp >
În acest cod:
- „ mx-4 ” adaugă o marjă de 4 px pe axa x (dreapta și stânga).
- „ grilă ” clasa creează o grilă.
- „ grid-cols-4 ” faceți 4 coloane în grilă.
- „ spațiu-x-4 ” adaugă un spațiu de 4px între elementele grilei.
- „ bg-verde-400 ” setează culoarea de fundal la verde.
- „ h-16 ” setează înălțimea la 16px.
- „ rotunjite-lg ” face colțul rotund și raza graniței este mare.
- „ granita-2 ” face un chenar de 2 px în jurul elementului.
- „ chenar-verde-800 ” face chenarul verde închis.
Ieșire
Previzualizează rezultatul creat de codul de mai sus:
Se poate observa că între elemente este alocată o distanță de 4px.
Metoda 2: Alocarea spațiului pe axa y.
Spațierea poate fi alocată pe axa y similar cu metoda de mai sus, prin mici modificări ale codului de mai sus. Atribuie spații de-a lungul axei y (sus și jos). Sintaxa pentru aceasta este:
Codul de mai jos poate fi implementat pentru a adăuga spații de-a lungul axei y:
< corp >< div clasă = „mx-4 my-4 space-y-4” >
< div clasă = „bg-green-400 h-16 rotunjit-lg chenar-2 chenar-verde-800” > 1 div >
< div clasă = „bg-green-400 h-16 rotunjit-lg chenar-2 chenar-verde-800” > 2 div >
< div clasă = „bg-green-400 h-16 rotunjit-lg chenar-2 chenar-verde-800” > 3 div >
< div clasă = „bg-green-400 h-16 rotunjit-lg chenar-2 chenar-verde-800” > 4 div >
div >
corp >
În acest cod:
- „ mx-4 ” adaugă o marjă de 4 px la stânga și la dreapta elementelor pentru a optimiza rezultatul.
- „ meu-4 ” adaugă o marjă de 4 px pe axa y (sus și jos).
- „ spațiu-y-4 ” adaugă spațiu de 4px pe axa y (sus și jos).
Ieșire
Salvați codul de mai sus și previzualizați pagina web creată de acesta pentru a vedea spațierea ca:
Este vorba despre alocarea unui spațiu egal între elemente.
Concluzie
Pentru a atribui spațiu egal între mai multe elemente în Tailwind, utilizatorii pot folosi „ spațiu-{x/y}-{dimensiune} ” clasa de utilitate și specificați o valoare întreagă ca dimensiune conform cerinței. Spațierea egală între elemente face ca rezultatul să fie mai scalabil, iar spectatorii rămân implicați cu pagina web. Această postare a oferit metoda de a atribui spațiu egal între mai multe elemente în Tailwind.