Flexbox vs Grid
Flexbox układa elementy w jednym wymiarze i dopasowuje się do ich treści, a Grid definiuje dwuwymiarową siatkę wierszy i kolumn, do której wstawiasz elementy.
Porównanie w tabeli
#Liczba wymiarów
Punkt wyjścia
Umieszczanie elementów
Odstępy między elementami
Wyrównanie w obu osiach naraz
Typowe zastosowanie
Przykład
#.flex-row {
display: flex;
gap: 8px;
}
.grid-area {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}<p style="margin: 0 0 6px; color: #a1a1aa;">Flexbox: wiersz</p>
<div class="flex-row stage">
<div class="box">1</div><div class="box">2</div><div class="box">3</div>
</div>
<p style="margin: 10px 0 6px; color: #a1a1aa;">Grid: siatka 3 kolumn</p>
<div class="grid-area stage">
<div class="box">1</div><div class="box">2</div><div class="box">3</div>
<div class="box">4</div><div class="box">5</div><div class="box">6</div>
</div>Definicja i zastosowanie
#Obie technologie zastąpiły stare sztuczki z float i tabelami, ale rozwiązują inny problem. Flexbox pracuje na jednej osi, wierszu albo kolumnie, i rozkłada elementy zgodnie z ich naturalnym rozmiarem. Grid od razu myśli w dwóch wymiarach: najpierw rysujesz siatkę wierszy i kolumn, a potem umieszczasz w niej elementy, nawet tak, że nachodzą na siebie.
W praktyce Flexbox sprawdza się tam, gdzie elementów jest nieznana liczba i mają płynąć jeden za drugim: menu, lista tagów, wiersz przycisków. Grid wygrywa, gdy z góry znasz układ: całą stronę z nagłówkiem, panelem bocznym i treścią albo siatkę kart o równych kolumnach i wierszach.
Nic nie stoi na przeszkodzie, żeby użyć obu naraz. Częsty wzorzec to Grid dla całej strony i Flexbox w środku pojedynczej karty, gdzie liczy się tylko jeden wiersz z ikoną i tekstem.
Składnia
#.flex { display: flex; flex-direction: row | column; }
.grid { display: grid; grid-template-columns: ...; grid-template-rows: ...; }Więcej przykładów
#.toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
}<div class="toolbar stage" style="width: 220px;">
<span class="box">HTML</span><span class="box">CSS</span><span class="box">JavaScript</span>
<span class="box">TypeScript</span><span class="box">Python</span>
</div>Zwęż okno podglądu: elementy same przechodzą do kolejnej linii. Grid wymagałby zdefiniowania, ile kolumn ma zmieścić siatka.
.layout {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-areas:
"header header"
"menu content";
gap: 8px;
}
.layout header { grid-area: header; }
.layout nav { grid-area: menu; }
.layout main { grid-area: content; }<div class="layout stage">
<header class="box" style="grid-area: header">CodeWorlds</header>
<nav class="box" style="grid-area: menu">Menu</nav>
<main class="box" style="grid-area: content">Lekcja 6: Flexbox vs Grid</main>
</div>Taki dwuwymiarowy układ (nagłówek na całą szerokość, panel boczny i treść) we Flexboxie wymagałby zagnieżdżania kilku kontenerów.
Dobre praktyki
#- Zadaj sobie pytanie: układam jeden rząd elementów czy całą kratkę w dwóch wymiarach? Odpowiedź wskazuje właściwe narzędzie.
- Grid w jednej kolumnie (
grid-template-columns: 1fr) działa prawie jak Flexbox w kolumnie. W prostych przypadkach różnica jest kosmetyczna. - Łącz obie technologie: Grid dla układu strony, Flexbox w środku pojedynczego komponentu.
Powiązane hasła
#- flexSkrót ustawiający flex-grow, flex-shrink i flex-basis elementu.
- grid-template-columnsDefiniuje kolumny siatki: ich liczbę i szerokości.
- displayUstala, jak element zachowuje się w układzie strony i jak układa swoje dzieci.
- gapUstawia odstępy między elementami w kontenerze flex, grid i wielokolumnowym.
- place-itemsSkrót ustawiający align-items i justify-items jednocześnie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.