W CSS Tailwind rozpiętość wierszy powoduje, że element zajmuje dwa lub więcej wierszy w siatce. Służy do określenia liczby wierszy, które element powinien zajmować/rozciągać. Pozwala użytkownikom dostosować rozmiar i położenie elementu siatki w wielu rzędach oraz tworzyć różne układy. Ponadto można go używać do tworzenia elastycznych i responsywnych układów siatki dla stron internetowych.
Ten zapis będzie przykładem metody tworzenia rozpiętości wierszy w CSS Tailwind.
Jak zrobić rozpiętość rzędów w Tailwind?
Aby wiersze rozciągały się w Tailwind, utwórz program HTML. Następnie skorzystaj z opcji „ zakres-wierszy-
W celu praktycznego wdrożenia sprawdź podane kroki:
Krok 1: Ustaw rozpiętość kolumn w programie HTML
Utwórz program HTML i użyj „ zakres-wierszy-
< ciało >
< dz klasa = „grid grid-rows-4 grid-flow-col gap-3 m-3 text-center” >
< dz klasa = 'row-span-3 bg-turkusowy-500 p-5' > 1 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 2 < / dz >
< dz klasa = 'row-span-2 bg-turkusowy-500 p-5' > 3 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 4 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 5 < / dz >
< dz klasa = 'row-span-4 bg-turkusowy-500 p-5' > 6 < / dz >
< / dz >
< / ciało >
Tutaj, w elemencie nadrzędnym
- “ siatka ” służy do tworzenia układu siatki.
- “ siatka-wiersz-4 ” class ustawia liczbę wierszy w siatce na 4.
- “ siatka-przepływ-kol ” umieszcza elementy siatki poziomo w kolumnach.
- “ przerwa-3 ” class ustawia odstęp 3 jednostek między każdym elementem siatki.
- “ m-3 ” stosuje margines 3 jednostek wokół kontenera siatki.
- “ centrum tekstu ” ustawia tekst każdego elementu siatki na środku.
W elementach potomnych
- “ rozpiętość-rzędów-3 ” określa, że element powinien obejmować 3 wiersze siatki.
- “ rozpiętość-rzędów-2 ” wskazuje, że element powinien obejmować 2 wiersze siatki.
- “ rozpiętość-rzędów-4 ” określa, że element powinien obejmować 4 wiersze siatki.
- “ bg-turkusowy-500 ” ustawia turkusowy kolor tła elementu siatki.
- “ p-5 ” dodaje dopełnienie 5 jednostek do treści wewnątrz elementów potomnych .
Krok 2: Sprawdź dane wyjściowe
Wyświetl stronę internetową HTML, aby sprawdzić, czy zakres wierszy został zastosowany, czy nie:
Na powyższym wyjściu można zauważyć, że rozpiętość wierszy została pomyślnie zastosowana, zgodnie z którą została określona.
Wniosek
Aby wiersze rozciągały się w Tailwind, użyj „ zakres-wierszy-
” w programie HTML i określ liczbę wierszy, które powinien obejmować każdy element. W celu weryfikacji przejrzyj zmiany na stronie internetowej HTML. Ten opis jest przykładem metody tworzenia rozpiętości wierszy w CSS Tailwind.