Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Budowanie Układów za Pomocą Flexbox i CSS Grid
Witaj @name w kolejnej komnacie egipskiej wiedzy! Jestem Mohamet i dzisiaj nauczę Cię, jak budować klasyczne i zaawansowane układy stron internetowych, wykorzystując moc CSS Grid i Flexbox.
Podobnie jak starożytni architekci projektowali różne części piramid - wejścia, komory, korytarze - tak i my nauczymy się projektować różne układy stron: od prostych po najbardziej złożone!
Layout 1: Holy Grail Layout (Święty Graal)
Holy Grail to klasyczny układ strony, który był niezwykle trudny do zrobienia w czasach przed CSS Grid. Składa się z:
- Header - nagłówek na górze
- Footer - stopka na dole
- Main - główna treść w centrum
- Nav - nawigacja po lewej stronie
- Aside - sidebar po prawej stronie
Wszystkie te elementy tworzą harmonijną całość, podobnie jak korytarze i komnaty w egipskiej piramidzie!
Implementacja w CSS Grid:
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>Holy Grail Layout</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 }
17
18 .holy-grail {
19 display: grid;
20 grid-template:
21 "header header header" auto
22 "nav main aside" 1fr
23 "footer footer footer" auto
24 / 200px 1fr 200px;
25 min-height: 100vh;
26 gap: 1rem;
27 padding: 1rem;
28 }
29
30 .header {
31 grid-area: header;
32 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
33 color: white;
34 padding: 2rem;
35 text-align: center;
36 border-radius: 8px;
37 }
38
39 .nav {
40 grid-area: nav;
41 background: #f8f9fa;
42 padding: 1.5rem;
43 border-radius: 8px;
44 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
45 }
46
47 .main {
48 grid-area: main;
49 background: white;
50 padding: 2rem;
51 border-radius: 8px;
52 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
53 }
54
55 .aside {
56 grid-area: aside;
57 background: #f8f9fa;
58 padding: 1.5rem;
59 border-radius: 8px;
60 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
61 }
62
63 .footer {
64 grid-area: footer;
65 background: #343a40;
66 color: white;
67 padding: 2rem;
68 text-align: center;
69 border-radius: 8px;
70 }
71
72 /* Responsywność - na małych ekranach układ zmienia się na kolumnowy */
73 @media (max-width: 768px) {
74 .holy-grail {
75 grid-template:
76 "header" auto
77 "nav" auto
78 "main" 1fr
79 "aside" auto
80 "footer" auto
81 / 1fr;
82 }
83 }
84
85 .nav ul {
86 list-style: none;
87 }
88
89 .nav li {
90 margin-bottom: 0.5rem;
91 }
92
93 .nav a {
94 color: #495057;
95 text-decoration: none;
96 padding: 0.5rem;
97 display: block;
98 border-radius: 4px;
99 transition: background-color 0.3s;
100 }
101
102 .nav a:hover {
103 background-color: #e9ecef;
104 }
105 </style>
106</head>
107<body>
108 <div class="holy-grail">
109 <header class="header">
110 <h1>Egipska Biblioteka Wiedzy</h1>
111 <p>Odkryj tajemnice starożytnych hieroglifów</p>
112 </header>
113
114 <nav class="nav">
115 <h3>Nawigacja</h3>
116 <ul>
117 <li><a href="#">Strona główna</a></li>
118 <li><a href="#">Piramidy</a></li>
119 <li><a href="#">Faraonowie</a></li>
120 <li><a href="#">Hieroglify</a></li>
121 <li><a href="#">Mitologia</a></li>
122 </ul>
123 </nav>
124
125 <main class="main">
126 <h2>Witaj w świecie starożytnego Egiptu</h2>
127 <p>Egipt to kraina pełna tajemnic i cudów architektury. Piramidy, które przetrwały tysiące lat, są świadectwem niezwykłej wiedzy i umiejętności starożytnych budowniczych.</p>
128 <p>W tym miejscu poznasz sekrety układów stron internetowych, które - podobnie jak piramidy - są zbudowane z precyzją i harmonią.</p>
129 <h3>Główne zasady budowy układów</h3>
130 <ul>
131 <li>Struktura musi być stabilna i przewidywalna</li>
132 <li>Każdy element ma swoje miejsce i funkcję</li>
133 <li>Responsywność to klucz do uniwersalności</li>
134 <li>Prostota prowadzi do elegancji</li>
135 </ul>
136 </main>
137
138 <aside class="aside">
139 <h3>Ciekawostki</h3>
140 <p><strong>Wiedziałeś, że...</strong></p>
141 <p>Wielka Piramida w Gizie była najwyższą budowlą przez 3800 lat?</p>
142 <p>CSS Grid pozwala na tworzenie układów równie trwałych jak piramidy!</p>
143 </aside>
144
145 <footer class="footer">
146 <p>© 2024 Egipska Akademia Kodowania</p>
147 <p>Wszystkie prawa zastrzeżone przez faraonów</p>
148 </footer>
149 </div>
150</body>
151</html>Wyjaśnienie kodu:
grid-template - definiuje obszary siatki w skróconej formie:
- Pierwszy wiersz:
- header zajmuje 3 kolumny"header header header" auto - Drugi wiersz:
- nawigacja, treść główna, sidebar"nav main aside" 1fr - Trzeci wiersz:
- footer zajmuje 3 kolumny"footer footer footer" auto - Po
definiujemy szerokości kolumn:/200px 1fr 200px
- Pierwszy wiersz:
grid-area - przypisuje elementy do nazwanych obszarów
min-height: 100vh - layout zajmuje minimum wysokość całego ekranu
Media query - na małych ekranach zmienia układ na jednkolumnowy
Layout 2: Sidebar Layout (Układ z bocznym panelem)
Ten layout jest idealny dla dashboardów, paneli administracyjnych i aplikacji webowych. Składa się z:
- Stały sidebar - nawigacja która nie przewija się
- Scrollable content - przewijalna treść główna
Implementacja z Flexbox + Grid:
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>Sidebar Layout</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 overflow: hidden;
17 }
18
19 .sidebar-layout {
20 display: flex;
21 height: 100vh;
22 }
23
24 .sidebar {
25 width: 280px;
26 background: #2c3e50;
27 color: #ecf0f1;
28 display: flex;
29 flex-direction: column;
30 flex-shrink: 0;
31 }
32
33 .sidebar-header {
34 padding: 2rem;
35 background: #34495e;
36 border-bottom: 2px solid #e67e22;
37 }
38
39 .sidebar-header h2 {
40 color: #e67e22;
41 font-size: 1.5rem;
42 margin-bottom: 0.5rem;
43 }
44
45 .sidebar-nav {
46 flex: 1;
47 overflow-y: auto;
48 padding: 1rem 0;
49 }
50
51 .sidebar-nav ul {
52 list-style: none;
53 }
54
55 .sidebar-nav li {
56 margin: 0.25rem 0;
57 }
58
59 .sidebar-nav a {
60 color: #ecf0f1;
61 text-decoration: none;
62 padding: 0.75rem 1.5rem;
63 display: flex;
64 align-items: center;
65 gap: 0.75rem;
66 transition: all 0.3s;
67 border-left: 3px solid transparent;
68 }
69
70 .sidebar-nav a:hover,
71 .sidebar-nav a.active {
72 background: #34495e;
73 border-left-color: #e67e22;
74 padding-left: 2rem;
75 }
76
77 .sidebar-footer {
78 padding: 1.5rem;
79 background: #34495e;
80 border-top: 1px solid #34495e;
81 }
82
83 .main-content {
84 flex: 1;
85 display: flex;
86 flex-direction: column;
87 overflow: hidden;
88 }
89
90 .content-header {
91 background: white;
92 padding: 1.5rem 2rem;
93 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
94 z-index: 10;
95 }
96
97 .content-body {
98 flex: 1;
99 overflow-y: auto;
100 padding: 2rem;
101 background: #f8f9fa;
102 }
103
104 .card {
105 background: white;
106 border-radius: 8px;
107 padding: 1.5rem;
108 margin-bottom: 1.5rem;
109 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
110 }
111
112 .card h3 {
113 color: #2c3e50;
114 margin-bottom: 1rem;
115 }
116
117 /* Responsywność */
118 @media (max-width: 768px) {
119 .sidebar {
120 position: fixed;
121 left: -280px;
122 transition: left 0.3s;
123 z-index: 1000;
124 height: 100vh;
125 }
126
127 .sidebar.open {
128 left: 0;
129 }
130
131 .main-content {
132 width: 100%;
133 }
134 }
135
136 .menu-toggle {
137 display: none;
138 background: #e67e22;
139 color: white;
140 border: none;
141 padding: 0.5rem 1rem;
142 cursor: pointer;
143 border-radius: 4px;
144 }
145
146 @media (max-width: 768px) {
147 .menu-toggle {
148 display: block;
149 }
150 }
151 </style>
152</head>
153<body>
154 <div class="sidebar-layout">
155 <aside class="sidebar" id="sidebar">
156 <div class="sidebar-header">
157 <h2>⚱️ Panel Faraona</h2>
158 <p>System zarządzania imperium</p>
159 </div>
160
161 <nav class="sidebar-nav">
162 <ul>
163 <li><a href="#" class="active">📊 Dashboard</a></li>
164 <li><a href="#">🏛️ Piramidy</a></li>
165 <li><a href="#">👥 Poddani</a></li>
166 <li><a href="#">💰 Skarb państwa</a></li>
167 <li><a href="#">📜 Hieroglify</a></li>
168 <li><a href="#">🎨 Sztuka</a></li>
169 <li><a href="#">⚔️ Armia</a></li>
170 <li><a href="#">🌾 Rolnictwo</a></li>
171 <li><a href="#">📊 Statystyki</a></li>
172 <li><a href="#">⚙️ Ustawienia</a></li>
173 </ul>
174 </nav>
175
176 <div class="sidebar-footer">
177 <p><strong>Faraon Ramzes II</strong></p>
178 <p style="font-size: 0.875rem; opacity: 0.8;">Władca dwóch ziem</p>
179 </div>
180 </aside>
181
182 <div class="main-content">
183 <header class="content-header">
184 <button class="menu-toggle" onclick="document.getElementById('sidebar').classList.toggle('open')">
185 ☰ Menu
186 </button>
187 <h1>Dashboard Imperium</h1>
188 <p>Witaj w panelu zarządzania państwem egipskim</p>
189 </header>
190
191 <main class="content-body">
192 <div class="card">
193 <h3>Statystyki imperium</h3>
194 <p>Twoje imperium rozwija się wspaniale! Liczba poddanych wzrosła o 15% w tym miesiącu.</p>
195 </div>
196
197 <div class="card">
198 <h3>Aktywne projekty budowlane</h3>
199 <ul>
200 <li>Wielka Piramida w Gizie - 75% ukończenia</li>
201 <li>Świątynia w Luksorze - 45% ukończenia</li>
202 <li>Obelisk w Karnaku - 90% ukończenia</li>
203 </ul>
204 </div>
205
206 <div class="card">
207 <h3>Najnowsze dekrety</h3>
208 <p>Faraon zarządził budowę nowego kanału irygacyjnego w delcie Nilu.</p>
209 </div>
210
211 <div class="card">
212 <h3>Długa treść do przewijania</h3>
213 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
214 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
215 <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
216 </div>
217 </main>
218 </div>
219 </div>
220</body>
221</html>Kluczowe techniki w Sidebar Layout:
- główny kontener używa flexbox do układania sidebar i contentu obok siebiedisplay: flex
- sidebar nigdy się nie kurczyflex-shrink: 0
- tylko content scrolluje się, sidebar pozostaje widocznyoverflow-y: auto
- na mobile sidebar jest ukryty i pojawia się po kliknięciuposition: fixed
Layout 3: Dashboard Grid (Siatka z kartami)
Dashboard grid to układ idealny dla paneli administracyjnych, gdzie masz wiele kart z różnymi informacjami.
Implementacja w CSS Grid:
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>Dashboard Grid</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17 padding: 2rem;
18 min-height: 100vh;
19 }
20
21 .dashboard-header {
22 background: white;
23 padding: 2rem;
24 border-radius: 12px;
25 margin-bottom: 2rem;
26 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
27 }
28
29 .dashboard-header h1 {
30 color: #2c3e50;
31 margin-bottom: 0.5rem;
32 }
33
34 .dashboard-grid {
35 display: grid;
36 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
37 gap: 1.5rem;
38 margin-bottom: 2rem;
39 }
40
41 /* Specjalne układy dla niektórych kart */
42 .card-large {
43 grid-column: span 2;
44 }
45
46 @media (max-width: 768px) {
47 .card-large {
48 grid-column: span 1;
49 }
50 }
51
52 .card {
53 background: white;
54 border-radius: 12px;
55 padding: 1.5rem;
56 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
57 transition: transform 0.3s, box-shadow 0.3s;
58 }
59
60 .card:hover {
61 transform: translateY(-4px);
62 box-shadow: 0 8px 12px rgba(0,0,0,0.15);
63 }
64
65 .card-header {
66 display: flex;
67 justify-content: space-between;
68 align-items: center;
69 margin-bottom: 1rem;
70 padding-bottom: 1rem;
71 border-bottom: 2px solid #f0f0f0;
72 }
73
74 .card-header h3 {
75 color: #2c3e50;
76 font-size: 1.1rem;
77 }
78
79 .card-icon {
80 font-size: 2rem;
81 }
82
83 .card-stat {
84 font-size: 2.5rem;
85 font-weight: bold;
86 color: #667eea;
87 margin: 1rem 0;
88 }
89
90 .card-label {
91 color: #7f8c8d;
92 font-size: 0.9rem;
93 }
94
95 .card-change {
96 display: inline-block;
97 padding: 0.25rem 0.5rem;
98 border-radius: 4px;
99 font-size: 0.875rem;
100 font-weight: 600;
101 }
102
103 .card-change.positive {
104 background: #d4edda;
105 color: #155724;
106 }
107
108 .card-change.negative {
109 background: #f8d7da;
110 color: #721c24;
111 }
112
113 .chart-placeholder {
114 width: 100%;
115 height: 200px;
116 background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
117 border-radius: 8px;
118 display: flex;
119 align-items: center;
120 justify-content: center;
121 color: #7f8c8d;
122 margin-top: 1rem;
123 }
124
125 .activity-list {
126 list-style: none;
127 }
128
129 .activity-item {
130 padding: 0.75rem 0;
131 border-bottom: 1px solid #f0f0f0;
132 display: flex;
133 align-items: center;
134 gap: 1rem;
135 }
136
137 .activity-item:last-child {
138 border-bottom: none;
139 }
140
141 .activity-icon {
142 width: 40px;
143 height: 40px;
144 border-radius: 50%;
145 background: #667eea;
146 color: white;
147 display: flex;
148 align-items: center;
149 justify-content: center;
150 flex-shrink: 0;
151 }
152
153 .activity-content {
154 flex: 1;
155 }
156
157 .activity-title {
158 font-weight: 600;
159 color: #2c3e50;
160 margin-bottom: 0.25rem;
161 }
162
163 .activity-time {
164 font-size: 0.85rem;
165 color: #7f8c8d;
166 }
167 </style>
168</head>
169<body>
170 <div class="dashboard-header">
171 <h1>⚱️ Dashboard Egipskiego Imperium</h1>
172 <p>Przeglądaj najważniejsze metryki i statystyki</p>
173 </div>
174
175 <div class="dashboard-grid">
176 <!-- Karta 1: Statystyki poddanych -->
177 <div class="card">
178 <div class="card-header">
179 <h3>👥 Poddani</h3>
180 <span class="card-icon">👥</span>
181 </div>
182 <div class="card-stat">2,547,893</div>
183 <div class="card-label">Całkowita liczba poddanych</div>
184 <span class="card-change positive">↑ +12.5%</span>
185 </div>
186
187 <!-- Karta 2: Piramidy -->
188 <div class="card">
189 <div class="card-header">
190 <h3>🏛️ Piramidy</h3>
191 <span class="card-icon">🏛️</span>
192 </div>
193 <div class="card-stat">138</div>
194 <div class="card-label">Ukończone piramidy</div>
195 <span class="card-change positive">↑ +3 nowe</span>
196 </div>
197
198 <!-- Karta 3: Skarb -->
199 <div class="card">
200 <div class="card-header">
201 <h3>💰 Skarb Państwa</h3>
202 <span class="card-icon">💰</span>
203 </div>
204 <div class="card-stat">45,678</div>
205 <div class="card-label">Talenty złota</div>
206 <span class="card-change negative">↓ -5.2%</span>
207 </div>
208
209 <!-- Karta 4: Zbiory -->
210 <div class="card">
211 <div class="card-header">
212 <h3>🌾 Zbiory</h3>
213 <span class="card-icon">🌾</span>
214 </div>
215 <div class="card-stat">892,456</div>
216 <div class="card-label">Ton zbóż zebranych</div>
217 <span class="card-change positive">↑ +18.7%</span>
218 </div>
219
220 <!-- Karta 5: Wykres (duża) -->
221 <div class="card card-large">
222 <div class="card-header">
223 <h3>📊 Wzrost liczby poddanych</h3>
224 <span class="card-icon">📊</span>
225 </div>
226 <div class="chart-placeholder">
227 [Wykres liniowy pokazujący wzrost populacji]
228 </div>
229 </div>
230
231 <!-- Karta 6: Ostatnie aktywności -->
232 <div class="card card-large">
233 <div class="card-header">
234 <h3>📋 Ostatnie wydarzenia</h3>
235 <span class="card-icon">📋</span>
236 </div>
237 <ul class="activity-list">
238 <li class="activity-item">
239 <div class="activity-icon">🏛️</div>
240 <div class="activity-content">
241 <div class="activity-title">Ukończono budowę piramidy w Gizie</div>
242 <div class="activity-time">2 godziny temu</div>
243 </div>
244 </li>
245 <li class="activity-item">
246 <div class="activity-icon">⚔️</div>
247 <div class="activity-content">
248 <div class="activity-title">Zwycięstwo w bitwie nad Nilem</div>
249 <div class="activity-time">5 godzin temu</div>
250 </div>
251 </li>
252 <li class="activity-item">
253 <div class="activity-icon">📜</div>
254 <div class="activity-content">
255 <div class="activity-title">Nowy dekret faraona ogłoszony</div>
256 <div class="activity-time">1 dzień temu</div>
257 </div>
258 </li>
259 <li class="activity-item">
260 <div class="activity-icon">🌾</div>
261 <div class="activity-content">
262 <div class="activity-title">Rozpoczęto sezon zbiorów</div>
263 <div class="activity-time">2 dni temu</div>
264 </div>
265 </li>
266 </ul>
267 </div>
268 </div>
269</body>
270</html>Kluczowe techniki w Dashboard Grid:
- automatyczne dostosowanie liczby kolumnrepeat(auto-fit, minmax(300px, 1fr))
- niektóre karty zajmują 2 kolumny (szersze)grid-column: span 2
- odstępy między kartamigap: 1.5rem- Responsywność - automatyczne przekształcenie w jedną kolumnę na małych ekranach
Porównanie: kiedy używać Grid vs Flexbox?
Użyj CSS Grid gdy:
- Potrzebujesz dwuwymiarowego układu (wiersze I kolumny)
- Masz złożony layout z wieloma sekcjami (Holy Grail, Dashboard)
- Chcesz precyzyjnie kontrolować pozycje elementów
- Potrzebujesz nakładających się obszarów
Użyj Flexbox gdy:
- Pracujesz z układem jednowymiarowym (tylko wiersze LUB kolumny)
- Układasz elementy w linii (navbar, listy)
- Potrzebujesz dynamicznego układu, który dostosowuje się do contentu
- Tworzysz komponenty (karty, przyciski, formularze)
Najlepsze połączenie - Grid + Flexbox:
1/* Grid dla głównego layoutu */
2.page {
3 display: grid;
4 grid-template:
5 "header" auto
6 "content" 1fr
7 "footer" auto
8 / 1fr;
9}
10
11/* Flexbox dla komponentów wewnątrz */
12.header {
13 display: flex;
14 justify-content: space-between;
15 align-items: center;
16}
17
18.nav {
19 display: flex;
20 gap: 1rem;
21}Podsumowanie
Podobnie jak egipskie piramidy składają się z precyzyjnie ułożonych bloków kamienia, tak nowoczesne strony internetowe składają się z przemyślanych układów:
- Holy Grail Layout - klasyczny układ z header, footer, nav, main, aside
- Sidebar Layout - idealny dla dashboardów i paneli
- Dashboard Grid - elastyczna siatka kart
Każdy z tych layoutów ma swoje zastosowanie i możesz je łączyć, aby stworzyć doskonałe interfejsy użytkownika!
Powodzenia w budowaniu Twoich cyfrowych piramid, młody architekcie!