We use cookies to enhance your experience on the site
Building Layouts with Flexbox and CSS Grid
Welcome, @name, to another chamber of Egyptian knowledge! I am Mohamed, and today I will teach you how to build classic and advanced web page layouts using the power of CSS Grid and Flexbox.
Just as ancient architects designed different parts of pyramids — entrances, chambers, corridors — so too will we learn to design various page layouts: from simple to the most complex!
Layout 1: Holy Grail Layout
The Holy Grail is a classic page layout that was extremely difficult to achieve before CSS Grid. It consists of:
- Header — the heading at the top
- Footer — the footer at the bottom
- Main — the main content in the center
- Nav — navigation on the left side
- Aside — sidebar on the right side
All these elements form a harmonious whole, much like corridors and chambers in an Egyptian pyramid!
CSS Grid Implementation:
1<!DOCTYPE html>
2<html lang="en">
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 /* Responsiveness - on small screens the layout changes to single column */
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>Egyptian Library of Knowledge</h1>
111 <p>Discover the secrets of ancient hieroglyphs</p>
112 </header>
113
114 <nav class="nav">
115 <h3>Navigation</h3>
116 <ul>
117 <li><a href="#">Home</a></li>
118 <li><a href="#">Pyramids</a></li>
119 <li><a href="#">Pharaohs</a></li>
120 <li><a href="#">Hieroglyphs</a></li>
121 <li><a href="#">Mythology</a></li>
122 </ul>
123 </nav>
124
125 <main class="main">
126 <h2>Welcome to the world of ancient Egypt</h2>
127 <p>Egypt is a land full of mysteries and architectural wonders. The pyramids that have survived for thousands of years are a testament to the extraordinary knowledge and skills of ancient builders.</p>
128 <p>Here you will learn the secrets of web page layouts that — like pyramids — are built with precision and harmony.</p>
129 <h3>Main principles of layout construction</h3>
130 <ul>
131 <li>The structure must be stable and predictable</li>
132 <li>Every element has its place and function</li>
133 <li>Responsiveness is the key to universality</li>
134 <li>Simplicity leads to elegance</li>
135 </ul>
136 </main>
137
138 <aside class="aside">
139 <h3>Fun Facts</h3>
140 <p><strong>Did you know...</strong></p>
141 <p>The Great Pyramid of Giza was the tallest structure in the world for 3,800 years?</p>
142 <p>CSS Grid allows you to create layouts as enduring as pyramids!</p>
143 </aside>
144
145 <footer class="footer">
146 <p>© 2024 Egyptian Coding Academy</p>
147 <p>All rights reserved by the pharaohs</p>
148 </footer>
149 </div>
150</body>
151</html>Code explanation:
grid-template — defines grid areas in shorthand form:
- First row:
— header spans 3 columns"header header header" auto - Second row:
— navigation, main content, sidebar"nav main aside" 1fr - Third row:
— footer spans 3 columns"footer footer footer" auto - After
we define column widths:/200px 1fr 200px
- First row:
grid-area — assigns elements to named areas
min-height: 100vh — the layout takes up at least the full screen height
Media query — on small screens, the layout changes to a single column
Layout 2: Sidebar Layout
This layout is perfect for dashboards, admin panels, and web applications. It consists of:
- Fixed sidebar — navigation that doesn't scroll
- Scrollable content — scrollable main content
Implementation with Flexbox + Grid:
1<!DOCTYPE html>
2<html lang="en">
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 /* Responsiveness */
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>Pharaoh's Panel</h2>
158 <p>Empire management system</p>
159 </div>
160
161 <nav class="sidebar-nav">
162 <ul>
163 <li><a href="#" class="active">Dashboard</a></li>
164 <li><a href="#">Pyramids</a></li>
165 <li><a href="#">Subjects</a></li>
166 <li><a href="#">State Treasury</a></li>
167 <li><a href="#">Hieroglyphs</a></li>
168 <li><a href="#">Art</a></li>
169 <li><a href="#">Army</a></li>
170 <li><a href="#">Agriculture</a></li>
171 <li><a href="#">Statistics</a></li>
172 <li><a href="#">Settings</a></li>
173 </ul>
174 </nav>
175
176 <div class="sidebar-footer">
177 <p><strong>Pharaoh Ramesses II</strong></p>
178 <p style="font-size: 0.875rem; opacity: 0.8;">Ruler of the Two Lands</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>Empire Dashboard</h1>
188 <p>Welcome to the Egyptian state management panel</p>
189 </header>
190
191 <main class="content-body">
192 <div class="card">
193 <h3>Empire statistics</h3>
194 <p>Your empire is flourishing! The number of subjects has grown by 15% this month.</p>
195 </div>
196
197 <div class="card">
198 <h3>Active construction projects</h3>
199 <ul>
200 <li>Great Pyramid of Giza - 75% complete</li>
201 <li>Temple of Luxor - 45% complete</li>
202 <li>Obelisk at Karnak - 90% complete</li>
203 </ul>
204 </div>
205
206 <div class="card">
207 <h3>Latest decrees</h3>
208 <p>The Pharaoh has ordered the construction of a new irrigation canal in the Nile Delta.</p>
209 </div>
210
211 <div class="card">
212 <h3>Long content for scrolling</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>Key techniques in the Sidebar Layout:
— the main container uses flexbox to arrange the sidebar and content side by sidedisplay: flex
— the sidebar never shrinksflex-shrink: 0
— only the content scrolls; the sidebar remains visibleoverflow-y: auto
— on mobile, the sidebar is hidden and appears on clickposition: fixed
Layout 3: Dashboard Grid (Card Grid)
The dashboard grid is a layout ideal for admin panels where you have many cards with different information.
CSS Grid Implementation:
1<!DOCTYPE html>
2<html lang="en">
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 /* Special layouts for certain cards */
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>Egyptian Empire Dashboard</h1>
172 <p>Browse the most important metrics and statistics</p>
173 </div>
174
175 <div class="dashboard-grid">
176 <!-- Card 1: Subject statistics -->
177 <div class="card">
178 <div class="card-header">
179 <h3>Subjects</h3>
180 <span class="card-icon">👥</span>
181 </div>
182 <div class="card-stat">2,547,893</div>
183 <div class="card-label">Total number of subjects</div>
184 <span class="card-change positive">↑ +12.5%</span>
185 </div>
186
187 <!-- Card 2: Pyramids -->
188 <div class="card">
189 <div class="card-header">
190 <h3>Pyramids</h3>
191 <span class="card-icon">🏛️</span>
192 </div>
193 <div class="card-stat">138</div>
194 <div class="card-label">Completed pyramids</div>
195 <span class="card-change positive">↑ +3 new</span>
196 </div>
197
198 <!-- Card 3: Treasury -->
199 <div class="card">
200 <div class="card-header">
201 <h3>State Treasury</h3>
202 <span class="card-icon">💰</span>
203 </div>
204 <div class="card-stat">45,678</div>
205 <div class="card-label">Gold talents</div>
206 <span class="card-change negative">↓ -5.2%</span>
207 </div>
208
209 <!-- Card 4: Harvest -->
210 <div class="card">
211 <div class="card-header">
212 <h3>Harvest</h3>
213 <span class="card-icon">🌾</span>
214 </div>
215 <div class="card-stat">892,456</div>
216 <div class="card-label">Tons of grain collected</div>
217 <span class="card-change positive">↑ +18.7%</span>
218 </div>
219
220 <!-- Card 5: Chart (large) -->
221 <div class="card card-large">
222 <div class="card-header">
223 <h3>Subject population growth</h3>
224 <span class="card-icon">📊</span>
225 </div>
226 <div class="chart-placeholder">
227 [Line chart showing population growth]
228 </div>
229 </div>
230
231 <!-- Card 6: Recent activities -->
232 <div class="card card-large">
233 <div class="card-header">
234 <h3>Recent events</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">Completed construction of the pyramid at Giza</div>
242 <div class="activity-time">2 hours ago</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">Victory in the Battle of the Nile</div>
249 <div class="activity-time">5 hours ago</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">New pharaoh's decree announced</div>
256 <div class="activity-time">1 day ago</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">Harvest season has begun</div>
263 <div class="activity-time">2 days ago</div>
264 </div>
265 </li>
266 </ul>
267 </div>
268 </div>
269</body>
270</html>Key techniques in the Dashboard Grid:
— automatic adjustment of the number of columnsrepeat(auto-fit, minmax(300px, 1fr))
— some cards span 2 columns (wider)grid-column: span 2
— spacing between cardsgap: 1.5rem- Responsiveness — automatic conversion to a single column on small screens
Comparison: When to Use Grid vs Flexbox?
Use CSS Grid when:
- You need a two-dimensional layout (rows AND columns)
- You have a complex layout with many sections (Holy Grail, Dashboard)
- You want to precisely control element positions
- You need overlapping areas
Use Flexbox when:
- You're working with a one-dimensional layout (only rows OR columns)
- You're arranging elements in a line (navbar, lists)
- You need a dynamic layout that adapts to content
- You're building components (cards, buttons, forms)
Best Combination — Grid + Flexbox:
1/* Grid for the main layout */
2.page {
3 display: grid;
4 grid-template:
5 "header" auto
6 "content" 1fr
7 "footer" auto
8 / 1fr;
9}
10
11/* Flexbox for components inside */
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}Summary
Just as Egyptian pyramids are composed of precisely arranged stone blocks, modern websites are composed of well-thought-out layouts:
- Holy Grail Layout — classic layout with header, footer, nav, main, aside
- Sidebar Layout — ideal for dashboards and panels
- Dashboard Grid — flexible card grid
Each of these layouts has its use case, and you can combine them to create excellent user interfaces!
Good luck building your digital pyramids, young architect!