Ovaj će blog dati ideju o dodjeljivanju jednakog prostora između više elemenata u Tailwindu.
Kako dodijeliti jednak razmak između više elemenata u Tailwindu?
Korisnici mogu dodijeliti jednake razmake između elemenata pomoću ' razmak-{x/y}-{veličina} ” klasa korisnosti. Korisnici mogu dodati razmak na x ili y-osi navođenjem cjelobrojne vrijednosti. Uslužni program za razmake je neophodan jer čini web stranicu privlačnom. Ako web stranica nema pravilan razmak između elemenata, neće privući korisnike.
Uzmimo primjer koda za dodjeljivanje jednakog prostora između elemenata mreže.
Metoda 1: Dodjeljivanje prostora na X-osi.
Jednak razmak dodijeljen na x-osi čini jednak razmak desno i lijevo od elementa. Za dodjelu razmaka na x-osi koristite sljedeću sintaksu:
prostor - x - { veličina }
Veličina može biti bilo koja cjelobrojna vrijednost.
Razmotrite kôd u nastavku da biste dodijelili jednak prostor na x-osi:
< tijelo >< div razreda = 'mx-4 grid grid-cols-4 space-x-4' >
< div razreda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div razreda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div razreda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div razreda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
tijelo >
U ovom kodu:
- “ mx-4 ” dodaje marginu od 4 px na x-osi (desno i lijevo).
- ' rešetka ” klasa stvara mrežu.
- ' grid-cols-4 ” napravite 4 stupca u mreži.
- ' razmak-x-4 ” dodaje razmak od 4 px između elemenata rešetke.
- “ bg-zeleno-400 ” postavlja boju pozadine na zelenu.
- “ h-16 ” postavlja visinu na 16px.
- ' zaobljeno-lg ” čini kut zaobljenim, a radijus granice je velik.
- ' granica-2 ” čini rub od 2 px oko elementa.
- “ granica-zelena-800 ” čini rub tamnozelenim.
Izlaz
Pregledajte izlaz koji je stvorio gornji kod:
Može se vidjeti da je između elemenata dodijeljen razmak od 4px.
Metoda 2: Dodjeljivanje prostora na y-osi.
Razmak se može dodijeliti na y-osi slično gornjoj metodi, malim izmjenama u gornjem kodu. Dodjeljuje razmake duž y-osi (gore i dolje). Sintaksa za to je:
Donji kôd može se implementirati za dodavanje razmaka duž y-osi:
< tijelo >< div razreda = 'mx-4 moj-4 prostor-y-4' >
< div razreda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div razreda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div razreda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div razreda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
tijelo >
U ovom kodu:
- “ mx-4 ” dodaje marginu od 4 px s lijeve i desne strane elemenata kako bi ispis bio optimiziraniji.
- “ moj-4 ” dodaje marginu od 4 px na y-osi (gore i na dnu).
- “ prostor-y-4 ” dodaje prostor od 4 px na y-osi (gore i dolje).
Izlaz
Spremite gornji kod i pregledajte web-stranicu koju je stvorio da vidite razmak kao:
To je sve o dodjeljivanju jednakog prostora između elemenata.
Zaključak
Za dodjeljivanje jednakog prostora između više elemenata u Tailwindu, korisnici mogu koristiti ' razmak-{x/y}-{veličina} ” uslužne klase i odredite cjelobrojnu vrijednost kao veličinu prema zahtjevu. Jednaki razmak između elemenata čini izlaz skalabilnijim, a gledatelji ostaju zaokupljeni web stranicom. Ovaj post je pružio metodu za dodjeljivanje jednakog prostora između više elemenata u Tailwindu.