Definiowanie kolumn siatki

CSS Grid to dwuwymiarowy system układu, który pozwala jednocześnie rozmieszczać elementy w wierszach i kolumnach. Tailwind CSS udostępnia klasy narzędziowe bezpośrednio odpowiadające właściwościom CSS Grid, dzięki czemu nie trzeba ręcznie wpisywać display: grid ani grid-template-columns. Wystarczy dodać odpowiednie nazwy klas do elementów HTML.

Aby zmienić element w kontener siatki, należy zastosować klasę grid. Bez definicji kolumn wszystkie elementy potomne są domyślnie układane w jednej kolumnie. To punkt wyjścia dla każdego układu Grid w Tailwind — każde dodane narzędzie grid bazuje na klasie grid.

Tailwind udostępnia klasy od grid-cols-1 do grid-cols-12, które dzielą kontener na kolumny o jednakowej szerokości. Wewnętrznie grid-cols-3 jest kompilowane do grid-template-columns: repeat(3, minmax(0, 1fr)). Oznacza to, że wszystkie kolumny równomiernie dzielą dostępną szerokość, dzięki czemu rozwiązanie doskonale sprawdza się w siatkach kart i sekcjach z wyróżnionymi funkcjami.

Różne liczby kolumn sprawdzają się w różnych zastosowaniach. Siatka z 2 kolumnami dobrze nadaje się do sekcji z podzieloną treścią, 3 kolumny do wierszy z funkcjami, a 4 lub 6 kolumn do galerii produktów lub obrazów. Tailwind obsługuje każdą liczbę całkowitą od 1 do 12, zapewniając taki sam zakres jak system siatki Bootstrapa, ale bez kontenerów wierszy.

Siatka z 12 kolumnami to klasyczna konwencja projektowa, ponieważ 12 dzieli się przez 1, 2, 3, 4 i 6, zapewniając dużą elastyczność układu. W przypadku grid-cols-12 Tailwind każdy element potomny domyślnie zajmuje jedną kolumnę. Następnie za pomocą col-span-* na poszczególnych elementach można sprawić, że będą zajmować wiele kolumn — omówimy to w następnej lekcji.

Gdy wstępnie zdefiniowane ustawienia od 1 do 12 nie wystarczają, użyj grid-cols-none, aby usunąć szablon kolumn, a następnie zdefiniuj własny za pomocą wartości niestandardowych grid-cols-[...]. Notacja nawiasowa pozwala wpisać dowolną prawidłową wartość CSS grid-template-columns bezpośrednio w nazwie klasy, zapewniając nieograniczoną elastyczność bez opuszczania kodu HTML.

Nowoczesne przeglądarki obsługują słowo kluczowe subgrid, które pozwala zagnieżdżonej siatce dziedziczyć ścieżki kolumn siatki nadrzędnej. Tailwind v3.4+ zawiera przeznaczoną do tego klasę grid-cols-subgrid. Subgrid doskonale sprawdza się przy wyrównywaniu etykiet formularzy wewnątrz komponentów kart umieszczonych w siatce nadrzędnej — elementy wewnętrzne każdej karty są wyrównane do ogólnych linii siatki.

Narzędzia gap-* dodają spójne odstępy między komórkami siatki. Użyj gap-4, aby ustawić jednolite odstępy w obu kierunkach, gap-x-4 dla odstępów tylko w poziomie oraz gap-y-6 dla odstępów tylko w pionie. W przeciwieństwie do marginesów właściwość gap nie dodaje dodatkowego miejsca przy zewnętrznych krawędziach siatki, dzięki czemu układ pozostaje przejrzysty i przewidywalny.

W większości rzeczywistych układów na małych ekranach potrzebują Państwo mniej kolumn, a na większych — więcej. Prefiksy responsywne Tailwind upraszczają to zadanie: grid-cols-1 md:grid-cols-2 lg:grid-cols-4 układa elementy jeden pod drugim na urządzeniach mobilnych, wyświetla dwie kolumny na tabletach i cztery na komputerach. Podejście mobile-first oznacza, że klasa bez prefiksu jest ustawieniem bazowym, a klasy z prefiksami zastępują je przy większych punktach przerwania.

Słowa kluczowe auto-fill i auto-fit w CSS Grid tworzą dynamiczną liczbę kolumn na podstawie dostępnego miejsca. Dzięki składni wartości niestandardowych Tailwind można napisać grid-cols-[repeat(auto-fill,minmax(200px,1fr))], aby automatycznie dodawać kolumny, gdy pozwala na to dostępna przestrzeń. auto-fill zachowuje puste ścieżki, natomiast auto-fit je zwija — oba rozwiązania tworzą naprawdę płynne siatki bez zapytań medialnych.

Łącząc wszystkie elementy, otrzymujemy rzeczywisty wzorzec sekcji funkcji stosowany na stronach marketingowych. Każda karta funkcji zawiera ikonę, nagłówek i opis. Siatka ma ustawienie grid-cols-1 sm:grid-cols-3, więc na urządzeniach mobilnych elementy są ułożone jeden pod drugim, a na większych ekranach rozchodzą się na trzy kolumny. Spójne dopełnienie i subtelne tło zapewniają wizualne oddzielenie bez obramowań.

W tej lekcji nauczyli się Państwo, że: klasa grid aktywuje kontener CSS Grid, klasy od grid-cols-1 do grid-cols-12 definiują ścieżki kolumn o jednakowej szerokości, a prefiksy responsywne, takie jak md:grid-cols-3, przełączają liczbę kolumn w punktach przerwania. Następnie omówimy, jak sprawić, aby elementy siatki zajmowały wiele kolumn i wierszy w złożonych układach.