CSS Grid to zaawansowany system układów, który pozwala tworzyć złożone siatki (grids) o precyzyjnej strukturze i rozmieszczeniu elementów na stronie. W przeciwieństwie do Flexboxa, który układa elementy w jednym kierunku (pionowo lub poziomo), Grid pozwala na kontrolowanie zarówno wierszy, jak i kolumn jednocześnie.
Podstawy CSS Grid
Aby stworzyć siatkę, musisz ustawić właściwość display: grid na kontenerze, a następnie zdefiniować układ kolumn i wierszy.
Przykład prostej siatki:
<div class="grid-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px; /* Odstępy między komórkami */
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}W tym przykładzie:
grid-template-columns: repeat(3, 1fr);– Tworzy trzy kolumny, z których każda zajmuje 1/3 dostępnej szerokości.grid-template-rows: auto;– Wiersze są automatycznie dostosowywane do zawartości.gap: 10px;– Dodaje odstęp między elementami w siatce.
Definiowanie kolumn i wierszy
Możesz dokładnie określić, ile kolumn i wierszy będzie w siatce, oraz jaki mają mieć rozmiar.
grid-template-columns– Definiuje szerokość kolumn.grid-template-rows– Definiuje wysokość wierszy.
Przykład: Definiowanie siatki o różnych rozmiarach:
.grid-container {
display: grid;
grid-template-columns: 100px 200px 1fr;
grid-template-rows: 100px 200px;
gap: 20px;
}- Pierwsza kolumna będzie miała szerokość 100px, druga 200px, a trzecia zajmie pozostałą dostępną przestrzeń (1fr = 1 jednostka ułamkowa dostępnej przestrzeni).
- Wiersze mają wysokość odpowiednio 100px i 200px.
Umieszczanie elementów w siatce
Elementy wewnątrz siatki są automatycznie umieszczane w komórkach, ale możesz precyzyjnie kontrolować, gdzie mają się znajdować, używając właściwości grid-column i grid-row.
Przykład: Umieszczanie elementów w konkretnych komórkach:
.item1 {
grid-column: 1 / 3; /* Element zajmie kolumny 1 i 2 */
grid-row: 1 / 2; /* Element zajmie pierwszy wiersz */
}
.item2 {
grid-column: 3 / 4; /* Element zajmie trzecią kolumnę */
grid-row: 2 / 3; /* Element zajmie drugi wiersz */
}Możesz kontrolować, ile kolumn lub wierszy dany element zajmuje, definiując zakres komórek.
Automatyczne rozmieszczanie elementów za pomocą grid-auto-flow
Jeśli nie chcesz ręcznie umieszczać każdego elementu, możesz skorzystać z właściwości grid-auto-flow, która automatycznie rozmieszcza elementy w wierszach lub kolumnach.
grid-auto-flow: row;– Domyślnie elementy będą rozmieszczane w wierszach.grid-auto-flow: column;– Elementy będą rozmieszczane w kolumnach.
Przykład: Automatyczne rozmieszczanie w kolumnach:
.grid-container {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, 100px);
}Łączenie komórek za pomocą grid-area
Za pomocą właściwości grid-area możesz sprawić, że jeden element zajmie kilka komórek w siatce. Jest to przydatne, jeśli chcesz, aby niektóre elementy były większe niż inne.
Przykład: Łączenie komórek:
.item1 {
grid-area: 1 / 1 / 2 / 3; /* Zajmuje obszar od pierwszego wiersza, pierwszej kolumny do drugiego wiersza i trzeciej kolumny */
}Tworzenie responsywnych układów z Grid
Podobnie jak w przypadku Flexboxa, CSS Grid doskonale nadaje się do tworzenia responsywnych układów. Dzięki mediom zapytaniom (@media) możesz dostosowywać liczbę kolumn i wierszy w zależności od rozmiaru ekranu.
Przykład: Responsywna siatka:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr;
}
}W tym przykładzie, na większych ekranach siatka będzie miała trzy kolumny, a na mniejszych (poniżej 600px) siatka będzie się składała z jednej kolumny.
Funkcja minmax()
minmax() pozwala na ustalenie minimalnych i maksymalnych rozmiarów dla kolumn lub wierszy. Dzięki temu możesz kontrolować, jak elementy będą skalowane w zależności od dostępnej przestrzeni.
Przykład użycia minmax():
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
}W tym przypadku każda kolumna będzie miała minimalnie 100px, ale jeśli jest więcej miejsca, może rozciągnąć się do 1/3 dostępnej przestrzeni.
Ćwiczenie: Tworzenie zaawansowanego układu z Grid
Zadanie: Stwórz stronę z trzema wierszami i trzema kolumnami, gdzie jeden element zajmuje dwie kolumny, a drugi dwie komórki w pionie.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid – Układ</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.item1 {
background-color: lightblue;
grid-column: 1 / 3; /* Zajmuje pierwszą i drugą kolumnę */
}
.item2 {
background-color: lightgreen;
grid-row: 1 / 3; /* Zajmuje pierwszy i drugi wiersz */
}
.item3, .item4, .item5 {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">Element 1</div>
<div class="item2">Element 2</div>
<div class="item3">Element 3</div>
<div class="item4">Element 4</div>
<div class="item5">Element 5</div>
</div>
</body>
</html>Gratulacje! Ukończyłeś lekcję 10.
Przejdź teraz do lekcji 11 >> CSS Animacje i przejścia (transitions)
Spis Treści - darmowy kurs HTML i CSS
Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS
Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)
Dodatki:
- Spis tagów HTML
- Spis Właściwości CSS
Jeśli chciałbyś być poinformowany o następnych kursach to zapisz się do naszego newslettera: