1.1 Główne zasady Grid Layout
CSS Grid Layout to potężne narzędzie do tworzenia złożonych i responsywnych układów. Daje deweloperom dwuwymiarowy system siatek do rozmieszczania elementów, co upraszcza tworzenie zarówno prostych, jak i skomplikowanych układów. Przyjrzyjmy się podstawowym konceptom i składni CSS Grid, nie zagłębiając się w specyficzne właściwości.
Podstawowe koncepty CSS Grid
-
Grid-kontener i Grid-elementy:
-
Grid-kontener — to element, który ma
display: grid. Ten element staje się kontenerem siatki, a wszystkie jego bezpośrednie elementy potomne stają się Grid-elementami - Grid-elementy — to bezpośrednie elementy potomne Grid-kontenera, które są rozmieszczane w siatce
-
Grid-kontener — to element, który ma
-
Osi siatki:
- Oś główna (inline axis) i oś blokowa (block axis): Grid obsługuje dwie osie do rozmieszczania elementów — główną i blokową oś. Domyślnie, oś główna jest pozioma, a blokowa — pionowa
-
Komórki siatki (Grid Cells):
- Komórki siatki — to podstawowe bloki tworzące się na przecięciu wierszy i kolumn. Każdy Grid-element zajmuje jedną lub więcej komórek
-
Linie siatki (Grid Lines):
- Linie siatki — to poziome i pionowe linie oddzielające wiersze i kolumny. Służą do rozmieszczania elementów względem siatki
-
Obszary siatki (Grid Areas):
- Obszary siatki — to nazwane obszary siatki, utworzone przez połączenie kilku komórek. Pozwalają grupować komórki i rozmieszczać elementy w określonych obszarach
1.2 Elementy składni
Podstawowe elementy składni CSS Grid
1. Tworzenie Grid-kontenera:
.container {
display: grid; /* lub display: inline-grid */
}
2. Definiowanie struktury siatki:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Definiuje trzy kolumny o różnej szerokości */
grid-template-rows: 50px 100px; /* Definiuje dwa wiersze o różnej wysokości */
}
3. Łączenie komórek za pomocą grid-area:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* Element zajmuje pierwszy wiersz i pierwsze trzy kolumny */
}
4. Automatyczne rozmieszczanie elementów:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* Ustawia minimalną wysokość wierszy */
}
1.3 Przykłady
Prosty układ z CSS Grid:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Wyjaśnienie:
- Kontener .container definiuje trzy kolumny, z których pierwsza i trzecia zajmują równą część dostępnej przestrzeni, a druga — dwukrotnie więcej
- Ustalane są dwa wiersze o stałej wysokości
- Właściwość gap ustawia odstęp między komórkami siatki
GO TO FULL VERSION