CSS Grid do tworzenia układów
Definiuj wiersze i kolumny za pomocą CSS Grid, precyzyjnie rozmieszczaj elementy i twórz typowe układy stron przy użyciu niewielkiej ilości kodu.
CSS Grid do tworzenia układów to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 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.
Czym jest CSS Grid?
CSS Grid to dwuwymiarowy system układu — umożliwia kontrolowanie zarówno wierszy, jak i kolumn. Jest najlepszym narzędziem do tworzenia ogólnej struktury strony i precyzyjnego rozmieszczania elementów w zdefiniowanej siatce.
Definiowanie kolumn: grid-template-columns
grid-template-columns definiuje strukturę kolumn. Można używać stałych rozmiarów (px), elastycznych ułamków (fr) lub wartości auto. repeat(n, size) powtarza definicję ścieżki.
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}Jednostka fr
fr (jednostka ułamkowa) rozdziela pozostałą przestrzeń proporcjonalnie. 1fr 2fr przydziela drugiej kolumnie dwa razy więcej miejsca niż pierwszej. Jest to niezbędne przy tworzeniu elastycznych ścieżek siatki.
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* left center right */
}Definiowanie wierszy: grid-template-rows
Można również jawnie definiować wiersze. Jeśli nie zostaną zdefiniowane, przeglądarka automatycznie utworzy wiersze niejawne. grid-auto-rows: minmax(200px, auto) określa rozmiar niejawnych wierszy.
.page {
display: grid;
grid-template-rows: auto 1fr auto; /* header content footer */
min-height: 100vh;
}gap w Grid
Podobnie jak w Flexboxie, gap dodaje przestrzeń między ścieżkami siatki bez wpływania na jej zewnętrzne krawędzie. row-gap i column-gap sterują osobno poszczególnymi osiami.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}grid-template-areas
Obszary siatki należy nazywać za pomocą ciągów znaków, a następnie przypisywać do nich elementy za pomocą grid-area. Tworzy to czytelny i wizualny kod układu.
.page {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Rozmieszczanie elementów za pomocą grid-column i grid-row
Można dokładnie określić położenie elementu za pomocą grid-column: start / end i grid-row: start / end. Wartość -1 odwołuje się do ostatniej linii. span N obejmuje N ścieżek.
.featured {
grid-column: 1 / -1; /* span all columns */
grid-row: span 2; /* occupy two rows */
}auto-fit i minmax() — responsywne kolumny
Najpotężniejszy jednolinijkowy zapis responsywnej siatki to: repeat(auto-fit, minmax(280px, 1fr)). Tworzy tyle kolumn, ile się mieści, przy czym każda ma co najmniej 280px szerokości, a pozostała przestrzeń jest wypełniana za pomocą 1fr.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fill a auto-fit
auto-fill tworzy ścieżki nawet wtedy, gdy są puste, zachowując stałą siatkę. auto-fit zwija puste ścieżki, dzięki czemu elementy rozszerzają się i wypełniają wiersz. Należy używać auto-fit w przypadku treści, która powinna się rozciągać.
Siatka niejawna a jawna
Ścieżki zdefiniowane przez programistę tworzą siatkę jawną. Gdy liczba dodanych elementów przekracza liczbę zdefiniowanych ścieżek, przeglądarka tworzy ścieżki niejawne. Ich rozmiarem można sterować za pomocą grid-auto-rows i grid-auto-columns.
Grid a Flexbox — kiedy używać którego rozwiązania
Grid: układy dwuwymiarowe, struktura strony, galerie, pulpity nawigacyjne. Flexbox: jednowymiarowe wiersze lub stosy, centrowanie, rozdzielanie elementów w wierszu. Uzupełniają się — należy używać Grid do szkieletu strony, a Flexbox do wnętrza komponentów.
Szybkie sprawdzenie
Jaka wartość CSS tworzy kolumny o szerokości co najmniej 250px, które po równo dzielą pozostałą przestrzeń?
Podsumowanie: CSS Grid
grid-template-columns definiuje kolumny. fr rozdziela przestrzeń. repeat() upraszcza powtarzanie. gap dodaje odstępy między elementami. grid-template-areas zwiększa czytelność układów. auto-fit + minmax tworzy responsywne siatki bez zapytań media. Grid jest podstawowym narzędziem do dwuwymiarowych układów stron.
Często zadawane pytania
Czy lekcja „CSS Grid do tworzenia układów” jest bezpłatna?
Tak — pełny tekst „CSS Grid do tworzenia układów” 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 do tworzenia układów”?
Definiuj wiersze i kolumny za pomocą CSS Grid, precyzyjnie rozmieszczaj elementy i twórz typowe układy stron przy użyciu niewielkiej ilości kodu. Ć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 3 z 4.
Ile czasu zajmuje lekcja „CSS Grid do tworzenia układów”?
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
- Znacznik meta viewport
- Flexbox do tworzenia układów
- CSS Grid do tworzenia układów
- Zapytania medialne i projektowanie mobile-first