CSS Grid – przykłady zastosowania w praktyce (layouty stron krok po kroku)

Wstęp

CSS Grid to jedna z najważniejszych technologii CSS do tworzenia nowoczesnych układów stron internetowych. Pozwala budować przejrzyste layouty, siatki elementów i responsywne sekcje bez konieczności stosowania skomplikowanych hacków lub dużej liczby dodatkowych klas.

W przeciwieństwie do Flexboxa, który świetnie sprawdza się przy układach jednowymiarowych, CSS Grid umożliwia jednoczesne zarządzanie kolumnami i wierszami. Dzięki temu idealnie nadaje się do tworzenia całych struktur stron, galerii, kart produktów czy paneli administracyjnych.

Poniżej znajdziesz pięć praktycznych przykładów wykorzystania CSS Grid. Każdy z nich pokazuje inne zastosowanie siatki – od prostego układu strony, przez siatki kart, aż po responsywne galerie.

Szybkie zastosowania CSS Grid

• Tworzenie głównego układu strony (header, content, sidebar, footer)
• Budowanie siatek kart produktów i wpisów
• Tworzenie responsywnych galerii zdjęć
• Projektowanie sekcji landing page
• Układanie elementów bez dodatkowych frameworków CSS

Krok 1: Podstawowy układ strony w CSS Grid

Jednym z najczęstszych zastosowań CSS Grid jest stworzenie podstawowego layoutu strony internetowej.

Przykładowa struktura:


<div class="layout">
<header>Nagłówek</header>
<main>Treść strony</main>
<aside>Sidebar</aside>
<footer>Stopka</footer>
</div>


Następnie definiujemy układ:

.layout {
display: grid;
grid-template-columns: 1fr 300px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
gap: 20px;
min-height: 100vh;
}

header {
grid-area: header;
}

main {
grid-area: main;
}

aside {
grid-area: sidebar;
}

footer {
grid-area: footer;
}

.layout > * {
padding: 25px;
background: #f2f2f2;
border-radius: 8px;
}


W tym przykładzie główna treść zajmuje większość miejsca, ponieważ pierwsza kolumna ma elastyczną szerokość (1fr), natomiast panel boczny otrzymuje stałą szerokość 300 pikseli.

Dzięki wykorzystaniu grid-template-areas możemy łatwo kontrolować położenie poszczególnych elementów i zmieniać układ strony bez modyfikowania struktury HTML.

Właściwość grid-template-areas pozwala wizualnie zaplanować układ strony. Każdy tekst w cudzysłowie odpowiada jednemu wierszowi siatki, a powtarzająca się nazwa oznacza element rozciągnięty na kilka kolumn.

W tym przykładzie nagłówek i stopka zajmują całą szerokość strony, natomiast środkowa część składa się z głównej treści oraz bocznego panelu.

Wersja mobilna:

@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}

Dzięki zmianie grid-template-areas na urządzeniach mobilnych sidebar automatycznie przenosi się pod główną treść, bez konieczności zmiany HTML.

Krok 2: Siatka kart w CSS Grid

CSS Grid bardzo często wykorzystuje się do tworzenia sekcji z kartami – np. produktów, usług, artykułów blogowych lub portfolio.

Przykład:


.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}


Każdy element automatycznie otrzymuje taką samą szerokość, a odstępy między nimi kontroluje właściwość gap.

Takie rozwiązanie jest prostsze niż ręczne ustawianie szerokości elementów za pomocą floatów lub wielu reguł Flexbox.

Krok 3: Responsywna siatka bez wielu media queries

Jedną z największych zalet CSS Grid jest możliwość tworzenia elastycznych układów, które dopasowują się do szerokości ekranu.

Przykład responsywnej siatki:


.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}


Właściwości auto-fit oraz minmax() pozwalają automatycznie zmieniać liczbę kolumn w zależności od dostępnego miejsca.

Dzięki temu jedna reguła CSS może obsłużyć widok na komputerze, tablecie i telefonie.

Krok 4: Galeria zdjęć w CSS Grid

CSS Grid świetnie sprawdza się również przy tworzeniu galerii zdjęć.

Przykładowy układ:


.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}


Możemy także wyróżnić wybrane elementy galerii:


.gallery-item:first-child {
grid-column: span 2;
grid-row: span 2;
}


Dzięki temu można tworzyć efektowne układy podobne do galerii znanych z serwisów fotograficznych.

Krok 5: Layout strony typu landing page

CSS Grid jest bardzo przydatny podczas projektowania stron sprzedażowych i landing page.

Przykładowe zastosowania:

• sekcja hero z tekstem i grafiką obok siebie
• sekcje z zaletami produktu
• porównania ofert
• bloki opinii klientów
• sekcje CTA

Przykład:


.hero {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 40px;
}


CSS Grid czy Flexbox – kiedy wybrać Grid?

• CSS Grid – gdy tworzysz cały układ strony lub siatkę elementów
• Flexbox – gdy ustawiasz elementy w jednym rzędzie lub jednej kolumnie

Przykładowo:

• menu nawigacyjne → Flexbox
• układ bloga z sidebarem → CSS Grid
• galeria zdjęć → CSS Grid
• przyciski obok siebie → Flexbox

Jeżeli zastanawiasz się, kiedy lepiej wykorzystać CSS Grid, a kiedy Flexbox, przeczytaj również poradnik CSS: Grid vs Flexbox – kiedy używać? Praktyczny poradnik. Znajdziesz w nim szczegółowe porównanie obu technologii oraz wskazówki, w jakich projektach sprawdzają się najlepiej.

Najczęstsze błędy podczas używania CSS Grid

• tworzenie zbyt wielu kolumn bez sprawdzenia wersji mobilnej
• brak właściwości gap i ręczne ustawianie marginesów
• zapominanie o minmax() przy responsywnych układach
• używanie Grid tam, gdzie prostszy byłby Flexbox

FAQ

Czy CSS Grid zastępuje Flexbox?

Nie. Obie technologie uzupełniają się. Grid najlepiej sprawdza się przy większych układach, a Flexbox przy prostych elementach interfejsu.

Czy CSS Grid działa na urządzeniach mobilnych?

Tak. CSS Grid jest obecnie obsługiwany przez wszystkie popularne przeglądarki i doskonale nadaje się do tworzenia responsywnych stron.

Czy warto używać CSS Grid zamiast frameworków typu Bootstrap?

W wielu projektach tak. CSS Grid pozwala tworzyć własne layouty bez dodatkowego kodu frameworka i daje większą kontrolę nad strukturą strony.

Zobacz CSS Grid w praktyce

Poniższy przykład pokazuje kilka najpopularniejszych zastosowań CSS Grid: układ strony, siatkę kart, responsywny Grid z wykorzystaniem auto-fit i minmax() oraz prostą galerię zdjęć. Zmień szerokość okna przeglądarki, aby zobaczyć, jak układ automatycznie dopasowuje się do dostępnej przestrzeni.

Wskazówka: Ten przykład najlepiej obejrzeć na komputerze lub w pełnym edytorze CodePen. Dzięki większej szerokości okna zobaczysz, jak auto-fit i minmax() automatycznie zmieniają liczbę kolumn wraz z rozmiarem ekranu. Otwórz przykład w edytorze CodePen

Podsumowanie

CSS Grid to jedno z najwygodniejszych narzędzi do tworzenia nowoczesnych layoutów stron internetowych. Umożliwia szybkie budowanie siatek kart, galerii, stron typu landing page i responsywnych układów bez skomplikowanego kodu.

Znajomość CSS Grid oraz Flexbox pozwala tworzyć bardziej elastyczne i wydajne strony, dopasowane do różnych urządzeń.