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!
Carry one thought out of this chamber, young architect: CSS Grid draws the plan of the whole building in two dimensions at once - header, nav, main, aside and footer - while Flexbox arranges whatever stands inside a single chamber, which is why the strongest layouts always use both together.