W tym poście omówiono pełną procedurę dodawania luki między kolumnami w Tailwind.
Jak dodać lukę między kolumnami w Tailwind?
Aby dodać odstęp między kolumnami w Tailwind, użyj wbudowanego „ przerwa-{rozmiar} ' pożytek. Określa wartość całkowitą, która reprezentuje odstęp między kolumnami w poziomie iw pionie. Zróbmy to zadanie praktycznie za pomocą podanych przykładów.
Struktura pliku projektu
„ przerwa-{rozmiar} ” można zaimplementować w dowolnym projekcie Tailwind, który ma podaną strukturę plików:
Zacznijmy od pierwszego przykładu.
Przykład 1: Użyj narzędzia „gap-{size}”, aby dodać tę samą przerwę między wierszami i kolumnami
W tym przykładzie zastosowano narzędzie „gap-{size}” w celu dodania tej samej przerwy w poziomie i w pionie między podanymi kolumnami.
Kod HTML
Przegląd następującego kodu:
< głowa >
< połączyć href = '/dist/output.css' rel = „arkusz stylów” >
< / głowa >
< ciało >
< h1 klasa = „tekst-3xl czcionka-pogrubiony tekst-podkreślenie w środku tekstu-pomarańczowy-600' > Witamy w Linuxhint! < / h1 >< br >
< dz klasa = „mx-2 siatka siatka-kolumny-3 przerwa-4” >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” > Pierwszy samouczek < / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” > Drugi samouczek < / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” > Trzeci samouczek < / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” > Czwarty samouczek < / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” > Piąty samouczek < / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” > Szósty samouczek < / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” > Siódmy samouczek < / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” > Ósmy samouczek < / dz >
< / dz >
W powyższych liniach kodu:
- Najpierw połącz główny plik CSS „ /dist/output.css ” z istniejącym plikiem HTML „ indeks.html ' używając ' <łącze> ” w sekcji „head”.
- Następnie sekcja „body” tworzy element „
”, który używa „ Rozmiar czcionki ”, „ Grubość czcionki ”, „ Wyrównaj tekst ”, „ Dekoracja tekstu ”, oraz „ Kolor tekstu ” Odpowiednio klasy Tailwind.
- Następnie dodawany jest element „”, który stosuje „ siatka ” narzędzie do ustawiania jego zawartości w podanej liczbie układów siatki, „ margines ”, aby ustawić margines poziomy, oraz klasę „ luka ”, aby dodać określony odstęp między kolumnami.
- W sekcji ciała elementu „
” znajduje się kolejnych osiem elementów „”, które wykorzystują „ Szerokość granicy ” i „ Kolor ramki ”, odpowiednio.Wyjście
Uruchom powyższy kod HTML na działającym serwerze i przeanalizuj dane wyjściowe:
Jak widać, dane wyjściowe odpowiednio dodają określony odstęp między kolumnami w obu wymiarach.
Przykład 2: Użyj narzędzia „gap-{size}”, aby niezależnie dodać odstęp między wierszami i kolumnami
„ przerwa-{rozmiar} ” można również zaimplementować z wymiarami „x(poziomo)” i „y(pionowo)” jako „gap-x-{size}” dla wierszy i „gap-y-{size}” dla kolumn, aby dodać odstęp między nimi indywidualnie.Zobaczmy jego praktyczną realizację.
Kod HTML
< głowa >
Spójrz na podany kod:
< połączyć href = '/dist/output.css' rel = „arkusz stylów” >
< / głowa >
< ciało >
< dz klasa = „mx-2 siatka siatka-kolumny-4 przerwa-x-4 przerwa-y-6” >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” >Pierwszy samouczek< / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” >Drugi samouczek< / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” >Trzeci samouczek< / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” >Czwarty samouczek< / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” >Piąty samouczek< / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” >Szósty samouczek< / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” >Siódmy samouczek< / dz >
< dz klasa = „obramowanie-2 obramowanie-pomarańczowe-600” >Ósmy samouczek< / dz >
< / dz >
< ciało >Tutaj ' przerwa-x-{rozmiar} ” narzędzie dodaje odstęp między wierszami i „ przerwa-y-{rozmiar} ” niezależnie dodaje określony odstęp między kolumnami.
Wyjście
Powyższy wynik sprawdza, czy odstęp między wierszami i kolumnami jest odpowiednio stosowany.
Wniosek
„Tailwind CSS” zapewnia wbudowany „ przerwa-{rozmiar} ”, aby dodać odstęp między kolumnami. Można go również użyć do osobnego dodania odstępu między wierszami i kolumnami za pomocą opcji „ przerwa-x-{rozmiar} ” i „ przerwa-y-{rozmiar} narzędzia. Ten post zawiera pełną procedurę dodawania luki między kolumnami w Tailwind.
- W sekcji ciała elementu „