CSS Grid i Flexbox to dwie metody układania strony w CSS, które pozwalają budować złożone i elastyczne layouty. Ich zastosowania częściowo się pokrywają, ale każde z nich ma własne możliwości i własne idealne przypadki użycia. W tym porównaniu CSS Grid vs Flexbox przejdziemy przez zalety i wady obu, a potem zobaczymy, kiedy lepiej sięgnąć po jedno, a kiedy po drugie.
Display Grid
Display Grid to system układu zaprojektowany do projektów opartych na siatce. Pozwala zdefiniować na stronie wiersze i kolumny, a potem umieszczać elementy wewnątrz tych wierszy i kolumn. Dzięki temu łatwo wyrównasz i ułożysz elementy strony w spójny, uporządkowany sposób.
Oto przykład kodu HTML/CSS, który używa CSS Grid do zbudowania siatki o 3 kolumnach i 3 wierszach:
Kod HTML Grid
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>Kod CSS Grid
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 1rem;
border: 1px dashed #000;
padding: 5px;
}
.grid-item {
background: #e74c3c;
padding: .5rem;
color: white;
text-align: center;
}Display Flex
Flexbox to system układu zaprojektowany do elastycznych layoutów, które dopasowują się do zmiennych rozmiarów ekranu i kontenera. Pozwala ustawić względne wymiary elementów twojego layoutu i precyzyjnie je wyrównać.
Kolejny przykład kodu HTML/CSS, tym razem z Flexboksem do wyrównania:
Kod HTML Flex
<div class="flex-container">
<div class="flex-item">Logo</div>
<div class="flex-item">Menu</div>
<div class="flex-item">Champ de Recherche</div>
</div>Kod CSS Flex
.flex-container {
display: flex;
justify-content: center;
gap: 1rem;
border: 1px dashed #000;
padding: 5px;
}
.flex-item {
border: 1px dashed #e74c3c;
padding: 10px;
}Flexbox i Grid w porównaniu
CSS Grid vs Flexbox: ten sam kod, tym razem w Grid. Różnica we względnych rozmiarach elementów mówi sama za siebie.
Kod HTML Grid vs Flex
<div class="grid-container">
<div class="grid-item">Logo</div>
<div class="grid-item">Menu</div>
<div class="grid-item">Champ de Recherche</div>
</div>Duży odstęp między przykładem a kodem HTML nie jest błędem twojej przeglądarki. Powiedzieliśmy siatce, że ma mieć 3 kolumny i 3 wiersze, więc trzyma się tej struktury bez względu na wszystko. Display Grid realizuje co do joty strukturę zadeklarowaną w CSS, nawet jeśli nie ma ani jednego dziecka .grid-item!
CSS Grid czy Flexbox: kiedy sięgnąć po które?
Znajomość zalet i wad każdego z tych narzędzi pozwala wybrać to, które pasuje do twojego projektu. Ogólnie rzecz biorąc, CSS Grid nadaje się idealnie do projektów opartych na siatce, takich jak portfolia i galerie zdjęć, natomiast Flexbox sprawdza się w układach elastycznych i responsywnych, takich jak menu flex i paski narzędzi.
Oto przykład, żeby to lepiej wyjaśnić. Załóżmy, że chcesz zbudować layout strony głównej sklepu internetowego. Musi się w nim zmieścić zdjęcia polecanych produktów, sekcje kategorii, pasek nawigacji i formularz wyszukiwania. W takim wypadku możesz użyć CSS Grid do ułożenia zdjęć polecanych produktów w siatkę, a Flexboksa do sprawnego wyrównania sekcji kategorii, paska nawigacji i formularza wyszukiwania.
Warto zaznaczyć, że obu narzędzi można też używać razem, żeby budować jeszcze bardziej zaawansowane układy. Możesz na przykład zbudować siatkę kolumn i wierszy w CSS Grid, a potem wyrównać elementy wewnątrz każdej jej komórki Flexboksem. W ten sposób łączysz zalety obu narzędzi w układy mocniejsze i bardziej elastyczne.
W skrócie: CSS Grid to właściwe narzędzie do projektów opartych na siatce, takich jak portfolia i galerie zdjęć, a Flexbox do układów elastycznych i responsywnych, takich jak menu flexbox i paski narzędzi. Używając ich razem, zbudujesz jeszcze bardziej zaawansowane układy, dopasowane do potrzeb twojego projektu.
