Łączenie Flexbox i Grid
Proszę używać Grid do mak układu strony, a Flexbox do wyrównywania elementów na poziomie komponentów, rozumiejąc, kiedy właściwy jest każde z tych narzędzi.
Łączenie Flexbox i Grid 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.
To narzędzia, które się uzupełniają
Flexbox i Grid nie są rywalami — zostały zaprojektowane do wspólnego użycia. Typowy wzorzec to użycie CSS Grid do utworzenia ogólnej struktury strony, a następnie Flexbox wewnątrz każdego obszaru siatki do rozmieszczenia zawartości komponentu.
Układ strony za pomocą Grid, komponenty za pomocą Flex
Zdefiniuj ogólny szkielet strony za pomocą Grid. Wewnątrz każdego obszaru siatki użyj Flexbox do rozmieszczenia elementów komponentu: linków nawigacyjnych w wierszu, a zawartości karty w kolumnie.
/* Page skeleton */
body {
display: grid;
grid-template-areas: 'header' 'main' 'footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Component inside grid area */
header {
display: flex;
justify-content: space-between;
align-items: center;
}Wzorzec siatki kart
Klasyczny wzorzec: Grid służy do układu kart, a Flex do układu wewnętrznego każdej karty. Dzięki temu karty są wyrównane w siatce, a ich zawartość (obraz, tytuł, treść i stopka) układa się prawidłowo.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-body { flex: 1; } /* push footer down */Wzorzec paska nawigacyjnego
Popularny pasek nawigacyjny łączy oba rozwiązania. Sam pasek jest kontenerem flex dla logo i linków. Sekcja linków może być kolejnym kontenerem flex. Rozbudowane menu może używać Grid do utworzenia układu wielokolumnowego.
Układ Holy Grail
Układ „Holy Grail” (nagłówek, środkowa część z trzema kolumnami i stopka) można dziś z łatwością utworzyć za pomocą Grid. Trzy kolumny — lewy pasek boczny, zawartość główna i prawy pasek boczny — są kolumnami Grid, a zawartość każdej z nich wykorzystuje Flexbox.
.page {
display: grid;
grid-template:
'header header header' auto
'left main right' 1fr
'footer footer footer' auto
/ 200px 1fr 200px;
min-height: 100vh;
}Wyśrodkowywanie dowolnej zawartości — Grid lub Flex
Zarówno Grid, jak i Flexbox umożliwiają idealne wyśrodkowanie zawartości. Grid: place-items: center (skrót dla align-items + justify-items). Flex: justify-content: center; align-items: center.
.center-grid {
display: grid;
place-items: center; /* centers both axes */
min-height: 100vh;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Responsywny układ z paskiem bocznym
Urządzenia mobilne: jedna kolumna (nawigacja u góry). Tablet i większe ekrany: pasek boczny i zawartość obok siebie. Grid pozwala opisać ten układ deklaratywnie — zmień template-areas w zapytaniu media.
Wzorzec ikona + tekst
Bardzo częsty mały układ: ikona obok tekstu. Flexbox doskonale się do tego nadaje, ponieważ jest to pojedynczy wiersz wymagający wyrównania.
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }Kiedy wybrać dane rozwiązanie
Grid wybierz, gdy myślisz jednocześnie o wierszach I kolumnach, gdy elementy muszą być wyrównane wzdłuż ścieżek lub gdy tworzysz szkielet strony. Flex wybierz, gdy myślisz w jednym kierunku, gdy elementy powinny się zmniejszać i zwiększać lub gdy układasz wiersz przycisków albo stos elementów.
Nie komplikuj rozwiązania bez potrzeby
Czasami prosty element blokowy z max-width i margin: auto sprawdzi się lepiej niż złożona siatka. Nie każdy układ wymaga Grid. Używaj najprostszego narzędzia, które wykonuje zadanie.
Analizowanie problemów z układem
W DevTools kliknij plakietki grid/flex w panelu Elements, aby wyświetlić linie siatki lub obrysy elementów flex. Dzięki temu niewidoczna struktura układu staje się widoczna, co bardzo pomaga w diagnozowaniu nieprawidłowego wyrównania.
Szybki test
Które połączenie narzędzi do tworzenia układów jest najczęściej używane odpowiednio na poziomie strony i komponentu?
Podsumowanie: łączenie Grid i Flex
Grid i Flexbox wzajemnie się uzupełniają. Używaj Grid do dwuwymiarowej struktury strony. Używaj Flexbox do jednowymiarowego układu wewnętrznego komponentów. place-items: center na siatce wyśrodkowuje całą zawartość. flex-direction: column + flex: 1 w treści karty przesuwa stopki kart na dół. Analizuj problemy za pomocą plakietek nakładki w DevTools.
Często zadawane pytania
Czy lekcja „Łączenie Flexbox i Grid” jest bezpłatna?
Tak — pełny tekst „Łączenie Flexbox i Grid” 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 „Łączenie Flexbox i Grid”?
Proszę używać Grid do mak układu strony, a Flexbox do wyrównywania elementów na poziomie komponentów, rozumiejąc, kiedy właściwy jest każde z tych narzędzi. Ć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 „Łączenie Flexbox i Grid”?
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