CSS Grid: template-areas, auto-fit, minmax
Nazywanie obszarów siatki dla czytelnych układów, używanie auto-fit z minmax() dla responsywnych kolumn oraz kontrolowanie niejawnych ścieżek.
CSS Grid: template-areas, auto-fit, minmax to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Nazwane obszary szablonu — układ wizualny
grid-template-areas umożliwia nazywanie obszarów w wizualnym formacie przypominającym grafikę ASCII. Każdy ciąg znaków reprezentuje wiersz, a każde słowo — komórkę. Kropki (.) oznaczają puste komórki. Przypisz elementy za pomocą grid-area: name.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Responsywne obszary szablonu z zapytaniami media
Zmieniaj układ template-areas w punktach przełamania, aby przenieść pasek boczny z osobnej kolumny pod główną zawartość na urządzeniach mobilnych.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}auto-fit a auto-fill
auto-fit: zwija puste ścieżki, dzięki czemu elementy rozciągają się, aby wypełnić wiersz. auto-fill: zachowuje strukturę siatki, nawet gdy ścieżki są puste. W responsywnych siatkach kart niemal zawsze chcesz użyć auto-fit.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}minmax() — szczegółowe omówienie
minmax(min, max) definiuje ścieżkę, która ma co najmniej rozmiar min i najwyżej rozmiar max. Typowe połączenia: minmax(0, 1fr) (w pełni elastyczna), minmax(200px, 1fr) (responsywna z minimalnym rozmiarem), minmax(auto, auto) (dopasowana do zawartości).
Rozciąganie elementów na kolumny i wiersze
Użyj grid-column: span 2, aby element zajmował dwie kolumny. Połącz tę właściwość z grid-row: span 2, aby wyróżniony element zajmował blok 2×2 w siatce.
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}Gęste automatyczne rozmieszczanie
grid-auto-flow: dense wypełnia puste miejsca mniejszymi elementami. Jest to przydatne w układach podobnych do masonry, w których elementy mają różne rozmiary.
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}Jednostki ułamkowe i wartości procentowe
Jednostka fr zawsze odnosi się do dostępnej przestrzeni po odjęciu ścieżek o stałym rozmiarze i odstępów. Połączenie fr ze stałymi rozmiarami zapewnia dużą elastyczność: stały pasek boczny i elastyczna zawartość główna.
grid-auto-columns i grid-auto-rows
Te właściwości kontrolują rozmiar niejawnie tworzonych ścieżek (gdy elementy są umieszczane poza jawną siatką). grid-auto-rows: minmax(100px, auto) nadaje niejawnym wierszom minimalną wysokość.
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}Sprawdzanie siatki w DevTools
Chrome DevTools wyświetla na stronie linie siatki i nazwy obszarów po kliknięciu plakietki „grid” obok kontenera siatki w panelu Elements. Użyj tej funkcji, aby analizować nieoczekiwane rozmiary ścieżek i rozmieszczenie elementów.
CSS Subgrid
grid-template-columns: subgrid umożliwia zagnieżdżonej siatce wyrównanie do ścieżek siatki nadrzędnej. Jest obsługiwane we wszystkich nowoczesnych przeglądarkach od 2023 roku — ma kluczowe znaczenie przy wyrównywaniu wewnętrznej zawartości kart w całej siatce kart.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}Kiedy Grid sprawdza się lepiej niż Flexbox
Grid wygrywa, gdy potrzebujesz jawnej kontroli dwuwymiarowej — gdy znaczenie mają zarówno wiersze, jak i kolumny. Jeśli chcesz po prostu ułożyć elementy w wierszu lub stosie, Flexbox jest prostszy.
Szybki test
Która wartość CSS Grid tworzy tyle kolumn, ile zmieści się przy minimalnej szerokości 200px, a następnie rozdziela pozostałe miejsce po równo między kolumny?
Podsumowanie: zaawansowany CSS Grid
grid-template-areas tworzy czytelne układy z nazwanymi obszarami. auto-fit + minmax tworzą responsywne siatki bez zapytań media. Rozciągaj elementy na wiele kolumn i wierszy. Gęste automatyczne rozmieszczanie wypełnia puste miejsca. Używaj nakładki siatki w DevTools do analizy problemów. Subgrid wyrównuje zagnieżdżone elementy do ścieżek nadrzędnej siatki.
Często zadawane pytania
Czy lekcja „CSS Grid: template-areas, auto-fit, minmax” jest bezpłatna?
Tak — pełny tekst „CSS Grid: template-areas, auto-fit, minmax” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „CSS Grid: template-areas, auto-fit, minmax”?
Nazywanie obszarów siatki dla czytelnych układów, używanie auto-fit z minmax() dla responsywnych kolumn oraz kontrolowanie niejawnych ścieżek. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „CSS Grid: template-areas, auto-fit, minmax”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Flexbox — dogłębne omówienie: wyrównywanie, zawijanie i kolejność
- CSS Grid: template-areas, auto-fit, minmax
- Łączenie Flexbox i Grid
- Zmienne CSS na potrzeby motywów