Create responsive layouts using CSS Grid and Flexbox together effectively. Master auto-responsive features and optimize for all screen sizes.
Responsive design is at the heart of modern web development, and combining CSS Grid with Flexbox creates the most powerful and flexible responsive layout system available. While Grid excels at overall page structure and two-dimensional layouts, Flexbox shines for component-level responsiveness and one-dimensional arrangements.
In this lesson, you'll learn how to strategically combine these technologies to create layouts that automatically adapt to any screen size while maintaining optimal user experience across all devices.
CSS Grid provides powerful auto-responsive features that eliminate the need for many media queries.
Auto-fit vs Auto-fill:
1/* Auto-fit - columns collapse when empty */
2.auto-fit-grid {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
5 gap: 1rem;
6}
7
8/* Auto-fill - maintains column structure */
9.auto-fill-grid {
10 display: grid;
11 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
12 gap: 1rem;
13}Responsive Grid with minmax():
1.responsive-grid {
2 display: grid;
3 grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
4 gap: clamp(1rem, 3vw, 2rem);
5}Auto-fit and auto-fill create self-adapting layouts that respond to content and container width without media queries.
Flexbox provides excellent wrapping capabilities for responsive component layouts.
Flex Wrap with Optimal Sizing:
1.flexible-cards {
2 display: flex;
3 flex-wrap: wrap;
4 gap: 1rem;
5}
6
7.flexible-cards > * {
8 flex: 1 1 300px; /* grow, shrink, basis */
9 min-width: 0; /* prevent overflow */
10}Responsive Navigation:
1.responsive-nav {
2 display: flex;
3 flex-wrap: wrap;
4 gap: 1rem;
5 justify-content: space-between;
6 align-items: center;
7}
8
9@media (max-width: 768px) {
10 .responsive-nav {
11 flex-direction: column;
12 align-items: stretch;
13 }
14}Flexbox wrapping allows items to flow naturally to new lines while maintaining consistent spacing and alignment.
Combine Grid and Flexbox with strategic breakpoints for optimal responsive behavior.
Mobile-First Grid Strategy:
1/* Mobile - single column */
2.layout-container {
3 display: grid;
4 grid-template-areas:
5 "header"
6 "main"
7 "sidebar"
8 "footer";
9 gap: 1rem;
10}
11
12/* Tablet - two columns */
13@media (min-width: 768px) {
14 .layout-container {
15 grid-template-columns: 1fr 300px;
16 grid-template-areas:
17 "header header"
18 "main sidebar"
19 "footer footer";
20 }
21}
22
23/* Desktop - complex layout */
24@media (min-width: 1024px) {
25 .layout-container {
26 grid-template-columns: 250px 1fr 300px;
27 grid-template-areas:
28 "nav header sidebar"
29 "nav main sidebar"
30 "nav footer footer";
31 }
32}Strategic breakpoints ensure layouts work optimally at every screen size while maintaining design integrity.
A complete responsive dashboard combining CSS Grid for layout structure and Flexbox for component flexibility.
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>Responsive Dashboard Layout</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Inter', -apple-system, sans-serif;
16 background: #f8fafc;
17 color: #1a202c;
18 line-height: 1.6;
19 }
20
21 /* Dashboard Grid Layout */
22 .dashboard {
23 min-height: 100vh;
24 display: grid;
25 grid-template-areas:
26 "header"
27 "nav"
28 "main";
29 grid-template-rows: auto auto 1fr;
30 }
31
32 /* Header with Flexbox */
33 .header {
34 grid-area: header;
35 background: #ffffff;
36 padding: 1rem 2rem;
37 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
38 display: flex;
39 justify-content: space-between;
40 align-items: center;
41 flex-wrap: wrap;
42 gap: 1rem;
43 }
44
45 .logo {
46 font-size: 1.5rem;
47 font-weight: 700;
48 color: #3182ce;
49 }
50
51 .user-actions {
52 display: flex;
53 align-items: center;
54 gap: 1rem;
55 }
56
57 /* Navigation */
58 .navigation {
59 grid-area: nav;
60 background: #2d3748;
61 padding: 1rem 0;
62 overflow-x: auto;
63 }
64
65 .nav-list {
66 display: flex;
67 list-style: none;
68 gap: 0.5rem;
69 padding: 0 1rem;
70 min-width: max-content;
71 }
72
73 .nav-item {
74 background: rgba(255,255,255,0.1);
75 border-radius: 0.5rem;
76 transition: background 0.2s;
77 }
78
79 .nav-item:hover {
80 background: rgba(255,255,255,0.2);
81 }
82
83 .nav-link {
84 display: block;
85 padding: 0.75rem 1rem;
86 color: #e2e8f0;
87 text-decoration: none;
88 white-space: nowrap;
89 }
90
91 /* Main Content Area */
92 .main-content {
93 grid-area: main;
94 padding: 2rem;
95 }
96
97 /* Stats Grid - Auto-responsive */
98 .stats-grid {
99 display: grid;
100 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
101 gap: 1.5rem;
102 margin-bottom: 2rem;
103 }
104
105 .stat-card {
106 background: #ffffff;
107 border-radius: 0.75rem;
108 padding: 1.5rem;
109 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
110 display: flex;
111 align-items: center;
112 gap: 1rem;
113 }
114
115 .stat-icon {
116 width: 3rem;
117 height: 3rem;
118 border-radius: 0.5rem;
119 display: flex;
120 align-items: center;
121 justify-content: center;
122 font-size: 1.5rem;
123 color: white;
124 flex-shrink: 0;
125 }
126
127 .stat-icon.blue { background: #3182ce; }
128 .stat-icon.green { background: #38a169; }
129 .stat-icon.purple { background: #805ad5; }
130 .stat-icon.orange { background: #dd6b20; }
131
132 .stat-content h3 {
133 font-size: 2rem;
134 font-weight: 700;
135 margin-bottom: 0.25rem;
136 }
137
138 .stat-content p {
139 color: #718096;
140 font-size: 0.875rem;
141 }
142
143 /* Content Cards - Flexible Layout */
144 .content-section {
145 display: grid;
146 grid-template-columns: 2fr 1fr;
147 gap: 2rem;
148 margin-bottom: 2rem;
149 }
150
151 .main-chart {
152 background: #ffffff;
153 border-radius: 0.75rem;
154 padding: 1.5rem;
155 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
156 }
157
158 .chart-placeholder {
159 height: 300px;
160 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
161 border-radius: 0.5rem;
162 display: flex;
163 align-items: center;
164 justify-content: center;
165 color: white;
166 font-size: 1.125rem;
167 }
168
169 .activity-feed {
170 background: #ffffff;
171 border-radius: 0.75rem;
172 padding: 1.5rem;
173 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
174 }
175
176 .activity-list {
177 list-style: none;
178 }
179
180 .activity-item {
181 padding: 0.75rem 0;
182 border-bottom: 1px solid #e2e8f0;
183 display: flex;
184 align-items: center;
185 gap: 0.75rem;
186 }
187
188 .activity-item:last-child {
189 border-bottom: none;
190 }
191
192 .activity-avatar {
193 width: 2.5rem;
194 height: 2.5rem;
195 border-radius: 50%;
196 background: #cbd5e0;
197 flex-shrink: 0;
198 }
199
200 /* Recent Projects - Auto-fit Grid */
201 .projects-section {
202 margin-bottom: 2rem;
203 }
204
205 .section-title {
206 font-size: 1.25rem;
207 font-weight: 600;
208 margin-bottom: 1rem;
209 color: #2d3748;
210 }
211
212 .projects-grid {
213 display: grid;
214 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
215 gap: 1.5rem;
216 }
217
218 .project-card {
219 background: #ffffff;
220 border-radius: 0.75rem;
221 padding: 1.5rem;
222 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
223 transition: transform 0.2s, box-shadow 0.2s;
224 }
225
226 .project-card:hover {
227 transform: translateY(-2px);
228 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
229 }
230
231 .project-header {
232 display: flex;
233 justify-content: space-between;
234 align-items: start;
235 margin-bottom: 1rem;
236 }
237
238 .project-title {
239 font-size: 1.125rem;
240 font-weight: 600;
241 margin-bottom: 0.5rem;
242 }
243
244 .project-status {
245 padding: 0.25rem 0.75rem;
246 border-radius: 9999px;
247 font-size: 0.75rem;
248 font-weight: 500;
249 }
250
251 .status-active {
252 background: #c6f6d5;
253 color: #22543d;
254 }
255
256 .status-pending {
257 background: #fed7d7;
258 color: #742a2a;
259 }
260
261 .project-progress {
262 margin-top: 1rem;
263 }
264
265 .progress-bar {
266 width: 100%;
267 height: 0.5rem;
268 background: #e2e8f0;
269 border-radius: 0.25rem;
270 overflow: hidden;
271 }
272
273 .progress-fill {
274 height: 100%;
275 background: #3182ce;
276 transition: width 0.3s ease;
277 }
278
279 /* Tablet Styles */
280 @media (max-width: 1024px) {
281 .content-section {
282 grid-template-columns: 1fr;
283 }
284
285 .stats-grid {
286 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
287 }
288 }
289
290 /* Mobile Styles */
291 @media (max-width: 768px) {
292 .dashboard {
293 grid-template-areas:
294 "header"
295 "nav"
296 "main";
297 }
298
299 .header {
300 padding: 1rem;
301 text-align: center;
302 }
303
304 .user-actions {
305 order: -1;
306 width: 100%;
307 justify-content: center;
308 }
309
310 .navigation {
311 position: sticky;
312 top: 0;
313 z-index: 10;
314 }
315
316 .main-content {
317 padding: 1rem;
318 }
319
320 .stats-grid {
321 grid-template-columns: 1fr;
322 gap: 1rem;
323 }
324
325 .projects-grid {
326 grid-template-columns: 1fr;
327 }
328
329 .nav-list {
330 padding: 0 0.5rem;
331 }
332 }
333
334 /* Small Mobile */
335 @media (max-width: 480px) {
336 .header {
337 flex-direction: column;
338 gap: 0.5rem;
339 }
340
341 .stat-card {
342 flex-direction: column;
343 text-align: center;
344 gap: 0.75rem;
345 }
346
347 .project-header {
348 flex-direction: column;
349 gap: 0.5rem;
350 }
351 }
352 </style>
353</head>
354<body>
355 <div class="dashboard">
356 <!-- Header -->
357 <header class="header">
358 <div class="logo">Dashboard</div>
359 <div class="user-actions">
360 <span>Welcome, Alex!</span>
361 <div style="width: 2rem; height: 2rem; background: #3182ce; border-radius: 50%;"></div>
362 </div>
363 </header>
364
365 <!-- Navigation -->
366 <nav class="navigation">
367 <ul class="nav-list">
368 <li class="nav-item"><a href="#" class="nav-link">Overview</a></li>
369 <li class="nav-item"><a href="#" class="nav-link">Analytics</a></li>
370 <li class="nav-item"><a href="#" class="nav-link">Projects</a></li>
371 <li class="nav-item"><a href="#" class="nav-link">Team</a></li>
372 <li class="nav-item"><a href="#" class="nav-link">Reports</a></li>
373 <li class="nav-item"><a href="#" class="nav-link">Settings</a></li>
374 </ul>
375 </nav>
376
377 <!-- Main Content -->
378 <main class="main-content">
379 <!-- Stats Grid -->
380 <div class="stats-grid">
381 <div class="stat-card">
382 <div class="stat-icon blue">📊</div>
383 <div class="stat-content">
384 <h3>2,543</h3>
385 <p>Total Views</p>
386 </div>
387 </div>
388 <div class="stat-card">
389 <div class="stat-icon green">👥</div>
390 <div class="stat-content">
391 <h3>1,423</h3>
392 <p>Active Users</p>
393 </div>
394 </div>
395 <div class="stat-card">
396 <div class="stat-icon purple">💼</div>
397 <div class="stat-content">
398 <h3>23</h3>
399 <p>Projects</p>
400 </div>
401 </div>
402 <div class="stat-card">
403 <div class="stat-icon orange">💰</div>
404 <div class="stat-content">
405 <h3>$12,426</h3>
406 <p>Revenue</p>
407 </div>
408 </div>
409 </div>
410
411 <!-- Content Section -->
412 <div class="content-section">
413 <div class="main-chart">
414 <h3 class="section-title">Analytics Overview</h3>
415 <div class="chart-placeholder">
416 📈 Chart Visualization Area
417 </div>
418 </div>
419
420 <div class="activity-feed">
421 <h3 class="section-title">Recent Activity</h3>
422 <ul class="activity-list">
423 <li class="activity-item">
424 <div class="activity-avatar"></div>
425 <div>
426 <div><strong>John Doe</strong> completed Project Alpha</div>
427 <div style="font-size: 0.875rem; color: #718096;">2 hours ago</div>
428 </div>
429 </li>
430 <li class="activity-item">
431 <div class="activity-avatar"></div>
432 <div>
433 <div><strong>Sarah Smith</strong> updated designs</div>
434 <div style="font-size: 0.875rem; color: #718096;">4 hours ago</div>
435 </div>
436 </li>
437 <li class="activity-item">
438 <div class="activity-avatar"></div>
439 <div>
440 <div><strong>Team Meeting</strong> scheduled</div>
441 <div style="font-size: 0.875rem; color: #718096;">1 day ago</div>
442 </div>
443 </li>
444 </ul>
445 </div>
446 </div>
447
448 <!-- Projects Section -->
449 <div class="projects-section">
450 <h3 class="section-title">Recent Projects</h3>
451 <div class="projects-grid">
452 <div class="project-card">
453 <div class="project-header">
454 <div>
455 <h4 class="project-title">Website Redesign</h4>
456 <p style="color: #718096; font-size: 0.875rem;">Complete overhaul of company website</p>
457 </div>
458 <span class="project-status status-active">Active</span>
459 </div>
460 <div class="project-progress">
461 <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
462 <span style="font-size: 0.875rem;">Progress</span>
463 <span style="font-size: 0.875rem;">75%</span>
464 </div>
465 <div class="progress-bar">
466 <div class="progress-fill" style="width: 75%;"></div>
467 </div>
468 </div>
469 </div>
470
471 <div class="project-card">
472 <div class="project-header">
473 <div>
474 <h4 class="project-title">Mobile App</h4>
475 <p style="color: #718096; font-size: 0.875rem;">iOS and Android application</p>
476 </div>
477 <span class="project-status status-pending">Pending</span>
478 </div>
479 <div class="project-progress">
480 <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
481 <span style="font-size: 0.875rem;">Progress</span>
482 <span style="font-size: 0.875rem;">45%</span>
483 </div>
484 <div class="progress-bar">
485 <div class="progress-fill" style="width: 45%;"></div>
486 </div>
487 </div>
488 </div>
489
490 <div class="project-card">
491 <div class="project-header">
492 <div>
493 <h4 class="project-title">Database Migration</h4>
494 <p style="color: #718096; font-size: 0.875rem;">Moving to cloud infrastructure</p>
495 </div>
496 <span class="project-status status-active">Active</span>
497 </div>
498 <div class="project-progress">
499 <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
500 <span style="font-size: 0.875rem;">Progress</span>
501 <span style="font-size: 0.875rem;">90%</span>
502 </div>
503 <div class="progress-bar">
504 <div class="progress-fill" style="width: 90%;"></div>
505 </div>
506 </div>
507 </div>
508 </div>
509 </div>
510 </main>
511 </div>
512</body>
513</html>This responsive dashboard demonstrates advanced Grid and Flexbox integration:
🏗️ Layout Architecture:
📱 Auto-Responsive Features:
repeat(auto-fit, minmax(250px, 1fr)) creates self-adapting stat cards🎯 Key Responsive Strategies:
This pattern scales from mobile phones to ultra-wide displays while maintaining optimal usability and visual hierarchy.
Excellent work mastering responsive layouts! You've learned to combine Grid and Flexbox strategically for maximum flexibility. Next, we'll explore Complex Layout Patterns, where you'll build advanced layouts like holy grail patterns, masonry layouts, and sophisticated card systems. These patterns form the foundation of professional web interfaces!
Your progress is saved in this browser, on this device only.