Tailwind CSS oferuje system siatki, który umożliwia użytkownikom dzielenie strony internetowej na kolumny i wiersze za pomocą narzędzi grid-cols i grid-rows. Zapewnia również narzędzia początku i końca kolumny siatki do kontrolowania rozmiaru i rozmieszczenia elementów w kolumnach siatki. Te narzędzia umożliwiają użytkownikom określenie pozycji początkowej i końcowej elementu w układzie siatki.
W tym artykule wyjaśnimy, jak sprawić, by kolumny zaczynały się lub kończyły na określonej n-tej linii siatki w CSS Tailwind.
Jak sprawić, by kolumny zaczynały się lub kończyły na n-tej linii siatki w Tailwind?
Aby kolumny zaczynały się lub kończyły na n-tej linii siatki w Tailwind, użyj „ col-start-
Krok 1: Określ pozycję początkową i końcową elementów siatki w programie HTML
Stwórz program HTML i użyj „ col-start-
< ciało >
< h1 klasa = „tekst-2xl centrum tekstu” >
Tailwind CSS — początek kolumny / Koniec
h1 >
< dz klasa = „siatka siatka-kolumny-4 przerwa-3 m-3” >
< dz klasa = 'col-start-2 col-span-2 bg-turkusowy-500 p-5' > 1 dz >
< dz klasa = „kol-początek-1 kol-koniec-3 bg-turkusowy-500 p-5” > 2 dz >
< dz klasa = 'kol-rozpocznij-3 kol-koniec-5 bg-turkusowy-500 p-5' > 3 dz >
< dz klasa = „col-start-2 col-span-3 bg-turkusowy-500 p-5” > 4 dz >
< dz klasa = 'kol-rozpocznij-1 kol-koniec-5 bg-turkusowy-500 p-5' > 5 dz >
dz >
ciało >
Tutaj, w elemencie nadrzędnym
- “ siatka ” służy do tworzenia układu siatki.
- “ siatka-kols-4 ” określa, że siatka powinna mieć 4 równej wielkości kolumny.
- “ przerwa-3 ” class ustawia odstęp 3 jednostek między każdym elementem siatki.
- “ m-3 ” klasa dodaje margines 3 jednostek wokół kontenera siatki.
W wewnętrznych elementach potomnych
- “ col-start-2 ” określa, że element siatki zaczyna się w kolumnie 2.
- “ kol-rozpiętość-2 ” oznacza, że element siatki zajmuje 2 kolumny.
- “ col-start-1 ” służy do rozpoczęcia elementu siatki od kolumny 1.
- “ col-end-3 ” określa, że element siatki kończy się w kolumnie 3.
- “ col-start-3 ” wskazuje, że element siatki zaczyna się od drugiej kolumny.
- “ col-end-5 ” kończy element siatki w kolumnie 5.
- “ col-span-3 ” określa, że element siatki zajmuje 3 kolumny.
- “ bg-turkusowy-500 ” ustawia turkusowy kolor tła wszystkich elementów siatki.
- “ p-5 ” dodaje dopełnienie 5 jednostek do treści wewnątrz elementów siatki.
Krok 2: Sprawdź dane wyjściowe
Aby upewnić się, że pozycja początkowa i końcowa kolumny siatki została zastosowana, wyświetl stronę HTML:
Powyższe dane wyjściowe wskazują, że pozycje początkowa i końcowa kolumny siatki zostały pomyślnie zastosowane, zgodnie z ich określeniem.
Wniosek
Aby słupy zaczynały się lub kończyły na n-tej linii siatki w Tailwind, „ col-start-