CSS Grid i Flexbox to dwa potężne narzędzia do tworzenia layoutów, które często są ze sobą porównywane. W tym artykule dowiesz się, kiedy użyć każdego z nich i jak można je skutecznie łączyć.
Wprowadzenie do CSS Grid i Flexbox
Zanim przejdziemy do porównania, warto zrozumieć podstawowe różnice między tymi technologiami:
- CSS Grid - system dwuwymiarowy, idealny do tworzenia kompleksowych layoutów
- Flexbox - system jednowymiarowy, świetny do wyrównywania elementów
CSS Grid - Kiedy go używać?
CSS Grid jest najlepszym wyborem, gdy potrzebujesz:
1. Kompleksowych layoutów strony
Grid doskonale nadaje się do tworzenia głównej struktury strony z nagłówkiem, stopką, sidebarami i główną treścią.
.page-layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 150px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }2. Siatek produktów lub galerii
Grid automatycznie dostosowuje liczbę kolumn do dostępnej przestrzeni:
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.product-card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}3. Precyzyjnego pozycjonowania
Grid pozwala na dokładne kontrolowanie pozycji elementów:
.dashboard {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(8, 1fr);
gap: 16px;
}
.widget-large {
grid-column: span 8;
grid-row: span 4;
}
.widget-small {
grid-column: span 4;
grid-row: span 2;
}Flexbox - Kiedy go używać?
Flexbox jest idealny w następujących sytuacjach:
1. Wyrównywanie elementów
Flexbox najlepiej radzi sobie z centrowanie i wyrównywaniem:
.center-content {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links {
display: flex;
gap: 20px;
list-style: none;
}2. Elastycznych komponentów
Flexbox idealnie nadaje się do komponentów, które mają się dostosowywać do treści:
.card {
display: flex;
flex-direction: column;
}
.card-header {
flex-shrink: 0;
}
.card-body {
flex: 1;
}
.card-footer {
flex-shrink: 0;
margin-top: auto;
}3. Responsywnych menu
Flexbox świetnie sprawdza się w nawigacji:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.nav-menu {
display: flex;
gap: 30px;
}
@media (max-width: 768px) {
.nav-menu {
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}Łączenie Grid i Flexbox
Najlepsze rezultaty osiągniesz, łącząc obie technologie:
Przykład praktyczny: Karta produktu
/* Grid dla głównego layoutu */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
/* Flexbox dla wnętrza karty */
.product-card {
display: flex;
flex-direction: column;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.product-image {
flex-shrink: 0;
height: 200px;
background-size: cover;
background-position: center;
}
.product-info {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
}
.product-title {
font-size: 1.2em;
margin-bottom: 10px;
}
.product-description {
flex: 1;
color: #666;
margin-bottom: 15px;
}
.product-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.product-price {
font-weight: bold;
color: #e74c3c;
}
.add-to-cart {
background: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}Porównanie wydajności
Oba rozwiązania są bardzo wydajne, ale mają swoje specyficzne zastosowania:
CSS Grid
- Lepszy dla kompleksowych layoutów
- Mniej kodu dla skomplikowanych struktur
- Lepsza kontrola nad pozycjonowaniem
- Idealne dla responsywnych siatek
Flexbox
- Szybszy dla prostych układów
- Lepsze wsparcie w starszych przeglądarkach
- Intuicyjne wyrównywanie
- Idealny dla komponentów
Responsywność
Oba rozwiązania doskonale sprawdzają się w projektowaniu responsywnym:
Grid dla responsywnych layoutów
.responsive-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
@media (max-width: 768px) {
.responsive-layout {
grid-template-columns: 1fr;
}
}Flexbox dla responsywnych komponentów
.responsive-component {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.flex-item {
flex: 1 1 300px;
min-width: 0;
}
@media (max-width: 768px) {
.responsive-component {
flex-direction: column;
}
.flex-item {
flex: none;
}
}Wskazówki praktyczne
1. Zacznij od Grid dla głównego layoutu
Użyj CSS Grid do stworzenia głównej struktury strony, a następnie Flexbox dla komponentów wewnętrznych.
2. Flexbox dla nawigacji
Flexbox jest idealny do tworzenia różnego rodzaju nawigacji - poziomej, pionowej czy responsywnej.
3. Grid dla galerii i siatek
Zawsze używaj Grid do tworzenia galerii zdjęć, siatek produktów czy dashboardów.
4. Testuj w różnych przeglądarkach
Sprawdzaj kompatybilność, szczególnie jeśli wspierasz starsze przeglądarki.
Podsumowanie
CSS Grid i Flexbox to komplementarne technologie, które razem tworzą potężny zestaw narzędzi do tworzenia nowoczesnych layoutów. Kluczem do sukcesu jest zrozumienie mocnych stron każdego z rozwiązań i używanie ich we właściwych kontekstach.
Pamiętaj: nie musisz wybierać między nimi - często najlepsze rozwiązanie to połączenie obu technologii w jednym projekcie.
