W tym artykule zilustrujemy metodę stosowania punktów przerwania i zapytań o media w siatce wierszy w CSS Tailwind.
Jak zastosować punkty przerwania i zapytania o media w siatce wierszy w Tailwind?
Aby zastosować punkty przerwania i zapytania o media w siatce wierszy w Tailwind, utwórz program HTML. Następnie zdefiniuj liczbę wierszy dla różnych rozmiarów ekranu, używając opcji „ sm ”, „ md ' Lub ' lg ” punkty przerwania z „ wiersze siatki-
Przyjrzyjmy się praktycznej realizacji:
Krok 1: Użyj punktów przerwania i zapytań o media z siatką wierszy w programie HTML
Utwórz program HTML i zdefiniuj liczbę wierszy dla różnych rozmiarów ekranu za pomocą „ wiersze siatki-
< ciało >
< dz klasa = „grid grid-rows-2 md: grid-rows-3 lg: grid-rows-5 grid-flow-col gap-3 m-3 text-center” >
< dz klasa = 'bg-turkusowy-500 p-5' > 1 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 2 < / dz >
< dz klasa = '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 = 'bg-turkusowy-500 p-5' > 6 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 7 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 8 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 9 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 10 < / dz >
< / dz >
< / ciało >
Tutaj:
- “ siatka ” służy do tworzenia układu siatki.
- “ rzędy siatki-2 ” określa, że siatka powinna mieć 2 równej wielkości wiersze.
- “ md:grid-wiersze-3 ” zmienia siatkę na 3 równej wielkości rzędy na średnim ekranie.
- “ lg:grid-wiersze-5 ” zmienia siatkę na 5 równych rzędów na dużym ekranie.
- “ 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.
- “ bg-turkusowy-500 ” ustawia turkusowy kolor tła elementów siatki.
- “ p-5 ” dodaje dopełnienie 5 jednostek do treści wewnątrz elementu potomnego
rzeczy.
Krok 2: Sprawdź dane wyjściowe
Aby upewnić się, że punkty przerwania i zapytania o media zostały zastosowane w siatce wierszy, wyświetl stronę HTML, zmieniając rozmiar ekranu:
Na powyższym wyjściu widać, że liczba wierszy zmienia się wraz z rozmiarem ekranu. Oznacza to, że punkty przerwania i zapytania o media zostały pomyślnie zastosowane w siatce wierszy.
Wniosek
Aby zastosować punkty przerwania i zapytania o media w siatce wierszy w Tailwind, zdefiniuj liczbę wierszy dla różnych rozmiarów ekranu, używając opcji „ sm ”, „ md ' Lub ' lg ” punkty przerwania z „ wiersze siatki-
narzędzia. Następnie zapewnij zmiany na stronie poprzez zmianę rozmiaru ekranu. W tym artykule zilustrowano metodę stosowania punktów przerwania i zapytań o media w siatce wierszy w CSS Tailwind.