Na tym blogu znajdziesz pomysł na przypisanie równej przestrzeni pomiędzy wieloma elementami w Tailwind.
Jak przypisać równą przestrzeń między wieloma elementami w Tailwind?
Użytkownicy mogą przypisywać równe odstępy pomiędzy elementami za pomocą przycisku „ przestrzeń-{x/y}-{rozmiar} „klasa użytkowa. Użytkownicy mogą dodać spację na osi x lub y, podając wartość całkowitą. Narzędzie do rozmieszczania odstępów jest konieczne, ponieważ czyni stronę atrakcyjną. Jeśli strona internetowa nie będzie miała odpowiednich odstępów pomiędzy elementami, nie przyciągnie użytkowników.
Weźmy przykład kodu, aby przypisać równą przestrzeń pomiędzy elementami siatki.
Metoda 1: Przypisywanie przestrzeni na osi X.
Równa przestrzeń przypisana na osi x zapewnia jednakowe odstępy po prawej i lewej stronie elementu. Aby przypisać przestrzeń na osi x, użyj następującej składni:
przestrzeń - X - { rozmiar }
Rozmiar może mieć dowolną wartość całkowitą.
Rozważ poniższy kod, aby przypisać równą przestrzeń na osi x:
< ciało >< div klasa = „mx-4 siatka siatka-kolumny-4 spacja-x-4” >
< div klasa = 'bg-zielony-400 h-16 zaokrąglony-lg obramowanie-2 obramowanie-zielony-800' > 1 div >
< div klasa = 'bg-zielony-400 h-16 zaokrąglony-lg obramowanie-2 obramowanie-zielony-800' > 2 div >
< div klasa = 'bg-zielony-400 h-16 zaokrąglony-lg obramowanie-2 obramowanie-zielony-800' > 3 div >
< div klasa = 'bg-zielony-400 h-16 zaokrąglony-lg obramowanie-2 obramowanie-zielony-800' > 4 div >
div >
ciało >
W tym kodzie:
- „ mx-4 ” dodaje margines 4 px na osi X (prawej i lewej).
- „ siatka ” tworzy siatkę.
- „ siatka-cols-4 ” utwórz 4 kolumny w siatce.
- „ spacja-x-4 ” dodaje odstęp 4px pomiędzy elementami siatki.
- „ bg-green-400 ” ustawia kolor tła na zielony.
- „ godz-16 ” ustawia wysokość na 16 pikseli.
- „ zaokrąglone-lg ” sprawia, że narożnik jest zaokrąglony, a promień obramowania jest duży.
- „ granica-2 ” tworzy obramowanie o wielkości 2 pikseli wokół elementu.
- „ obramowanie-zielone-800 ” powoduje, że obramowanie staje się ciemnozielone.
Wyjście
Podgląd danych wyjściowych utworzonych przez powyższy kod:
Można zauważyć, że pomiędzy elementami jest przypisany odstęp 4px.
Metoda 2: Przypisywanie przestrzeni na osi Y.
Odstępy można przypisać na osi Y w sposób podobny do powyższej metody, poprzez niewielkie zmiany w powyższym kodzie. Przypisuje spacje wzdłuż osi Y (góra i dół). Składnia tego jest następująca:
Poniższy kod można zaimplementować, aby dodać spacje wzdłuż osi Y:
< ciało >< div klasa = „mx-4 my-4 przestrzeń-y-4” >
< div klasa = 'bg-zielony-400 h-16 zaokrąglony-lg obramowanie-2 obramowanie-zielony-800' > 1 div >
< div klasa = 'bg-zielony-400 h-16 zaokrąglony-lg obramowanie-2 obramowanie-zielony-800' > 2 div >
< div klasa = 'bg-zielony-400 h-16 zaokrąglony-lg obramowanie-2 obramowanie-zielony-800' > 3 div >
< div klasa = 'bg-zielony-400 h-16 zaokrąglony-lg obramowanie-2 obramowanie-zielony-800' > 4 div >
div >
ciało >
W tym kodzie:
- „ mx-4 ” dodaje margines 4px po lewej i prawej stronie elementów, aby wydruk był bardziej zoptymalizowany.
- „ mój-4 ” dodaje margines 4px na osi Y (góra i dół).
- „ spacja-y-4 ” dodaje przestrzeń 4px na osi Y (na górze i na dole).
Wyjście
Zapisz powyższy kod i wyświetl podgląd utworzonej przez niego strony internetowej, aby zobaczyć odstępy jako:
Wszystko polega na przypisaniu równej przestrzeni pomiędzy elementami.
Wniosek
Aby przypisać równą przestrzeń pomiędzy wieloma elementami w Tailwind, użytkownicy mogą skorzystać z opcji „ przestrzeń-{x/y}-{rozmiar} ” klasę użyteczności i określ wartość całkowitą jako rozmiar zgodnie z wymaganiami. Równe odstępy między elementami sprawiają, że wynik jest bardziej skalowalny, a widzowie pozostają zaangażowani w stronę internetową. W tym poście przedstawiono metodę przypisywania równej przestrzeni między wieloma elementami w Tailwind.