Kurs HTML i CSS · Moduł 8: CSS Grid
CSS Grid: Nowoczesny System Układu Stron
W tej lekcji3
CSS Grid to potężny system układu, który daje twórcom stron internetowych kontrolę nad układem elementów zarówno w poziomie, jak i w pionie. Jest to niezwykle elastyczne narzędzie, które może znacząco uproszczyć proces projektowania responsywnych interfejsów użytkownika.
Podstawy CSS Grid
Grid jest dwuwymiarowym systemem układu, co oznacza, że możesz kontrolować elementy zarówno w kolumnach, jak i w rzędach. Oto kilka podstawowych pojęć:
Kontener Grid
Aby zdefiniować kontener grid, należy użyć właściwości display: grid lub display: inline-grid.
1.container {
2 display: grid;
3}Kolumny i Rzędy
Definiujesz kolumny i rzędy, używając właściwości grid-template-columns i grid-template-rows. Wartości te mogą być określone w różnych jednostkach, takich jak piksele, procenty, czy frakcje (fr).
1.container {
2 display: grid;
3 grid-template-columns: 1fr 2fr 1fr;
4 grid-template-rows: 100px 200px;
5}Przedziały (Grid Gaps)
Możesz także zdefiniować odstępy między kolumnami i rzędami, używając właściwości grid-gap, grid-row-gap i grid-column-gap.
1.container {
2 grid-gap: 10px;
3 grid-row-gap: 15px;
4 grid-column-gap: 15px;
5}Elementy Grid
Elementy wewnątrz kontenera grid są automatycznie traktowane jako elementy grid. Możesz je umieścić w określonych kolumnach i rzędach, używając właściwości grid-column i grid-row.
1.item {
2 grid-column: 1 / 3;
3 grid-row: 2 / 4;
4}Zaawansowane Zastosowania CSS Grid
Obszary Grid (Grid Areas)
Grid pozwala na nazwanie obszarów, co może upraszczać zarządzanie układem.
1.container {
2 grid-template-areas:
3 "header header header"
4 "menu content sidebar"
5 "footer footer footer";
6}
7.header {
8 grid-area: header;
9}Responsywność
Dzięki elastycznym jednostkom i zapytaniom medialnym, CSS Grid jest idealny do tworzenia responsywnych układów.
1.container {
2 display: grid;
3 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
4}Zagnieżdżanie
Możesz również zagnieżdżać kontenery grid, co umożliwia tworzenie bardziej złożonych układów.
Tworzenie układu za pomocą CSS Grid można porównać do budowy piramidy. Podobnie jak starożytne piramidy były zbudowane z precyzyjnie ułożonych bloków kamienia, tak struktura grid składa się z precyzyjnie zdefiniowanych kolumn i rzędów.
- Kontener Grid: To jak fundament piramidy, na którym spoczywa cała struktura.
- Kolumny i Rzędy: To jak poszczególne warstwy kamieni, tworzące strukturę piramidy.
- Elementy Grid: To jak indywidualne kamienie, każdy z nich precyzyjnie umieszczony w odpowiedniej pozycji.
Wady i Zalety
Zalety:
- Elastyczność: Grid oferuje niezrównaną elastyczność w tworzeniu różnorodnych układów.
- Czystość Kodu: Umożliwia tworzenie skomplikowanych układów bez zbędnego kodu HTML i CSS.
- Łatwość Użycia: Raz zrozumiany, grid jest prosty w obsłudze i wydajny.
Wady:
- Kompatybilność: Nie wszystkie przeglądarki obsługują wszystkie funkcje CSS Grid, choć sytuacja ta stale się poprawia.
- Krzywa Uczenia się: Dla niektórych użytkowników początkowa nauka może być wyzwaniem.
CSS Grid to potężne narzędzie, które znacząco zmienia sposób, w jaki projektanci i deweloperzy mogą tworzyć układy stron internetowych. Oferuje wiele zaawansowanych funkcji i elastyczności, które można wykorzystać do tworzenia wyrafinowanych i responsywnych interfejsów użytkownika. Analogia z budowaniem piramidy podkreśla precyzyjność i solidność, które są kluczem do zrozumienia i efektywnego wykorzystania tego narzędzia.
Kod do tej lekcji: index.html
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Grid - Podstawy i Zaawansowane Techniki</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="container">
11 <h1>CSS Grid - Kompletny Przewodnik</h1>
12
13 <section class="demo-section">
14 <h2>Podstawowy Grid Container</h2>
15 <div class="basic-grid">
16 <div class="grid-item">Item 1</div>
17 <div class="grid-item">Item 2</div>
18 <div class="grid-item">Item 3</div>
19 <div class="grid-item">Item 4</div>
20 <div class="grid-item">Item 5</div>
21 <div class="grid-item">Item 6</div>
22 </div>
23 <p class="description">Grid z 3 kolumnami i automatycznymi rzędami</p>
24 </section>
25
26 <section class="demo-section">
27 <h2>Grid z Frakcjami (fr)</h2>
28 <div class="fraction-grid">
29 <div class="grid-item">1fr</div>
30 <div class="grid-item">2fr</div>
31 <div class="grid-item">1fr</div>
32 </div>
33 <p class="description">Kolumny: 1fr 2fr 1fr - środkowa kolumna jest 2x szersza</p>
34 </section>
35
36 <section class="demo-section">
37 <h2>Grid Areas (Nazwane Obszary)</h2>
38 <div class="areas-grid">
39 <div class="header">Header</div>
40 <div class="sidebar">Sidebar</div>
41 <div class="content">Main Content</div>
42 <div class="footer">Footer</div>
43 </div>
44 <p class="description">Layout z nazwanymi obszarami: header, sidebar, content, footer</p>
45 </section>
46
47 <section class="demo-section">
48 <h2>Grid Gap (Odstępy)</h2>
49 <div class="gap-grid">
50 <div class="grid-item">Item 1</div>
51 <div class="grid-item">Item 2</div>
52 <div class="grid-item">Item 3</div>
53 <div class="grid-item">Item 4</div>
54 </div>
55 <p class="description">Grid z gap: 20px między elementami</p>
56 </section>
57
58 <section class="demo-section">
59 <h2>Responsywny Grid z auto-fit</h2>
60 <div class="responsive-grid">
61 <div class="card">Card 1</div>
62 <div class="card">Card 2</div>
63 <div class="card">Card 3</div>
64 <div class="card">Card 4</div>
65 <div class="card">Card 5</div>
66 <div class="card">Card 6</div>
67 </div>
68 <p class="description">repeat(auto-fit, minmax(200px, 1fr)) - automatyczne dostosowanie</p>
69 </section>
70
71 <section class="demo-section">
72 <h2>Zagnieżdżony Grid</h2>
73 <div class="nested-parent">
74 <div class="nested-item">Item 1</div>
75 <div class="nested-item nested-grid">
76 <div class="nested-child">Sub 1</div>
77 <div class="nested-child">Sub 2</div>
78 <div class="nested-child">Sub 3</div>
79 <div class="nested-child">Sub 4</div>
80 </div>
81 <div class="nested-item">Item 3</div>
82 </div>
83 <p class="description">Grid zagnieżdżony w elemencie grid</p>
84 </section>
85
86 <section class="demo-section">
87 <h2>Grid Line Positioning</h2>
88 <div class="positioned-grid">
89 <div class="positioned-item span-item">Spans 2 columns</div>
90 <div class="positioned-item">Item 2</div>
91 <div class="positioned-item">Item 3</div>
92 <div class="positioned-item tall-item">Tall Item</div>
93 <div class="positioned-item">Item 5</div>
94 </div>
95 <p class="description">Precyzyjne pozycjonowanie elementów za pomocą grid lines</p>
96 </section>
97
98 <section class="demo-section">
99 <h2>CSS Grid z CSS Custom Properties</h2>
100 <div class="custom-props-grid">
101 <div class="custom-item">Dynamic 1</div>
102 <div class="custom-item">Dynamic 2</div>
103 <div class="custom-item">Dynamic 3</div>
104 <div class="custom-item">Dynamic 4</div>
105 </div>
106 <p class="description">Grid wykorzystujący CSS Custom Properties (zmienne)</p>
107 </section>
108
109 <section class="demo-section">
110 <h2>Advanced Layout - Dashboard</h2>
111 <div class="dashboard-grid">
112 <div class="dash-header">Dashboard Header</div>
113 <div class="dash-nav">Navigation</div>
114 <div class="dash-main">
115 <div class="dash-widget">Widget 1</div>
116 <div class="dash-widget">Widget 2</div>
117 <div class="dash-widget">Widget 3</div>
118 <div class="dash-widget">Widget 4</div>
119 </div>
120 <div class="dash-sidebar">Sidebar</div>
121 <div class="dash-footer">Footer</div>
122 </div>
123 <p class="description">Kompleksowy dashboard layout z grid</p>
124 </section>
125 </div>
126</body>
127</html>Widzisz błąd w tej lekcji?
Sprawdź się
Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.
1. Jak utworzyć CSS Grid container?
2. Która właściwość definiuje kolumny w CSS Grid?
To 2 z 3 pytań do tej lekcji. Pozostałe rozwiążesz w grze.
Zadania praktyczne w grze
- Edytor kodu
Stwórz .temple-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); gap: 15px }. Dodaj 9 elementów .stone. Efekt: równa siatka 3x3 jak fundamenty Abu Simbel!
- Układanie w poziomie
Ułóż deklarację grid-template-columns z proporcją 1:2:1: