Combining Flexbox & Grid

INTERMEDIATE

Learn when and how to combine Flexbox and CSS Grid for optimal layouts. Master strategic layout decisions, hybrid patterns, and component-level design choices.

50 min

Tutorial 6 of 10

Learning Objectives

Choose the optimal layout method for different design challenges
Combine Grid and Flexbox for powerful hybrid layout systems
Create component layouts that leverage both systems strategically
Build nested layouts with Grid containers and Flexbox items

Introduction

The most powerful modern layouts don't rely on just CSS Grid or just Flexbox—they strategically combine both systems to leverage each method's unique strengths. Understanding when and how to use Grid and Flexbox together is essential for creating layouts that are both sophisticated and maintainable.

Grid excels at two-dimensional layout control and overall page structure, while Flexbox shines at one-dimensional alignment and component-level arrangements. By combining them thoughtfully, you create layout systems that handle any design challenge with elegance and efficiency.

In this lesson, you'll master the art of strategic layout decisions, learning to recognize when Grid, Flexbox, or a combination of both provides the optimal solution. You'll discover hybrid patterns used by professional developers and build complete layout systems that leverage the best of both worlds.

Layout Strategy: Choosing the Right Tool

Understanding when to use Grid, Flexbox, or both together is crucial for creating efficient, maintainable layouts that solve the right problems with the right tools.

Grid vs Flexbox Decision Matrix

Use CSS Grid when:

Creating overall page structure and major layout regions
Working with two-dimensional layouts (controlling both rows and columns)
Building complex, asymmetric layouts with precise positioning
Designing layouts where items don't need to be aware of each other
Creating responsive layouts with explicit track sizing

CSS

1/* Grid for page structure */
2.page-layout {
3  display: grid;
4  grid-template-areas:
5    "header header header"
6    "sidebar main aside"
7    "footer footer footer";
8  grid-template-columns: 250px 1fr 200px;
9  min-height: 100vh;
10}

Use Flexbox when:

Aligning items within components or containers
Working with one-dimensional layouts (single row or column)
Distributing space between items dynamically
Creating flexible, content-aware sizing
Building navigation bars, toolbars, and button groups

CSS

1/* Flexbox for component alignment */
2.navigation {
3  display: flex;
4  justify-content: space-between;
5  align-items: center;
6  padding: 1rem;
7}
8
9.nav-links {
10  display: flex;
11  gap: 2rem;
12  list-style: none;
13}

Combine Both when:

Grid creates the layout structure, Flexbox handles component internals
Building complex components that need both precise positioning and flexible alignment
Creating responsive layouts where different approaches work better at different breakpoints
Developing design systems with consistent spacing and alignment

Strategic Layout Examples

E-commerce Product Page

CSS

1/* Grid for overall product page structure */
2.product-page {
3  display: grid;
4  grid-template-areas:
5    "breadcrumb breadcrumb"
6    "gallery info"
7    "details details"
8    "related related";
9  grid-template-columns: 1fr 1fr;
10  gap: 2rem;
11}
12
13/* Flexbox for product info alignment */
14.product-info {
15  grid-area: info;
16  display: flex;
17  flex-direction: column;
18  gap: 1rem;
19}
20
21.product-actions {
22  display: flex;
23  gap: 1rem;
24  margin-top: auto; /* Push to bottom */
25}

Dashboard Layout

CSS

1/* Grid for dashboard structure */
2.dashboard {
3  display: grid;
4  grid-template-columns: 250px 1fr;
5  grid-template-rows: 60px 1fr;
6  height: 100vh;
7}
8
9/* Flexbox for header navigation */
10.dashboard-header {
11  grid-column: 1 / -1;
12  display: flex;
13  justify-content: space-between;
14  align-items: center;
15  padding: 0 2rem;
16}
17
18/* Flexbox for sidebar navigation */
19.sidebar-nav {
20  display: flex;
21  flex-direction: column;
22  gap: 0.5rem;
23  padding: 1rem;
24}

Card Component System

CSS

1/* Grid for card layout */
2.card-grid {
3  display: grid;
4  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
5  gap: 2rem;
6}
7
8/* Flexbox for individual card structure */
9.card {
10  display: flex;
11  flex-direction: column;
12  border-radius: 8px;
13  overflow: hidden;
14}
15
16.card-header {
17  display: flex;
18  justify-content: space-between;
19  align-items: center;
20  padding: 1rem;
21}
22
23.card-content {
24  flex: 1; /* Takes remaining space */
25  padding: 1rem;
26}
27
28.card-actions {
29  display: flex;
30  justify-content: flex-end;
31  gap: 1rem;
32  padding: 1rem;
33}

Blog Layout with Comments

CSS

1/* Grid for overall blog structure */
2.blog-post {
3  display: grid;
4  grid-template-areas:
5    "header header"
6    "content sidebar"
7    "comments sidebar";
8  grid-template-columns: 2fr 1fr;
9  gap: 2rem;
10}
11
12/* Flexbox for article header */
13.article-header {
14  grid-area: header;
15  display: flex;
16  flex-direction: column;
17  gap: 1rem;
18}
19
20.article-meta {
21  display: flex;
22  justify-content: space-between;
23  align-items: center;
24}
25
26/* Grid for comments layout */
27.comments-section {
28  grid-area: comments;
29  display: grid;
30  gap: 1rem;
31}
32
33/* Flexbox for individual comments */
34.comment {
35  display: flex;
36  gap: 1rem;
37}
38
39.comment-content {
40  flex: 1;
41}
42
43.comment-actions {
44  display: flex;
45  gap: 1rem;
46  margin-top: 0.5rem;
47}

Responsive Strategy Combinations

CSS

1/* Mobile: Stack with flexbox */
2.layout {
3  display: flex;
4  flex-direction: column;
5}
6
7/* Desktop: Switch to grid */
8@media (min-width: 768px) {
9  .layout {
10    display: grid;
11    grid-template-columns: 250px 1fr 200px;
12    grid-template-rows: auto 1fr auto;
13  }
14}

Key Decision Factors:

Layout Complexity: Grid for complex, multi-dimensional layouts; Flexbox for simpler alignments
Content Relationships: Grid when items don't need to know about each other; Flexbox when they do
Responsive Behavior: Consider how each method handles content reflow
Browser Support: Both have excellent support, but consider edge cases
Maintainability: Choose the method that makes the most semantic sense for your layout intent

Hybrid Layout Patterns: Best of Both Worlds

Hybrid layouts combine Grid and Flexbox strategically, using Grid for overall structure and Flexbox for component-level refinement and alignment.

Pattern 1: Grid Structure + Flex Components

CSS

1/* Grid creates the main layout structure */
2.app-layout {
3  display: grid;
4  grid-template-areas:
5    "header header header"
6    "sidebar main aside"
7    "footer footer footer";
8  grid-template-columns: 200px 1fr 200px;
9  grid-template-rows: auto 1fr auto;
10  min-height: 100vh;
11}
12
13/* Flexbox handles header component alignment */
14.app-header {
15  grid-area: header;
16  display: flex;
17  justify-content: space-between;
18  align-items: center;
19  padding: 1rem 2rem;
20}
21
22.header-nav {
23  display: flex;
24  gap: 2rem;
25  list-style: none;
26}
27
28/* Flexbox for sidebar navigation */
29.app-sidebar {
30  grid-area: sidebar;
31  display: flex;
32  flex-direction: column;
33  padding: 1rem;
34}
35
36.sidebar-section {
37  display: flex;
38  flex-direction: column;
39  gap: 0.5rem;
40  margin-bottom: 2rem;
41}
42
43/* Main content uses nested grids and flex */
44.main-content {
45  grid-area: main;
46  display: grid;
47  grid-template-rows: auto 1fr;
48  padding: 2rem;
49}
50
51.content-header {
52  display: flex;
53  justify-content: space-between;
54  align-items: center;
55  margin-bottom: 2rem;
56}

Pattern 2: Flex Container + Grid Items

CSS

1/* Flexbox for overall container behavior */
2.dashboard-container {
3  display: flex;
4  flex-direction: column;
5  min-height: 100vh;
6}
7
8.dashboard-main {
9  flex: 1;
10  display: flex;
11}
12
13/* Grid for widget layout within flex container */
14.widgets-area {
15  flex: 1;
16  display: grid;
17  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
18  grid-auto-rows: minmax(200px, auto);
19  gap: 1rem;
20  padding: 1rem;
21}
22
23/* Individual widgets use flexbox internally */
24.widget {
25  display: flex;
26  flex-direction: column;
27  background: white;
28  border-radius: 8px;
29  overflow: hidden;
30}
31
32.widget-header {
33  display: flex;
34  justify-content: space-between;
35  align-items: center;
36  padding: 1rem;
37  background: #f8fafc;
38}
39
40.widget-content {
41  flex: 1;
42  padding: 1rem;
43}

Pattern 3: Alternating Grid and Flex

CSS

1/* Magazine layout with mixed approaches */
2.magazine-layout {
3  display: grid;
4  grid-template-areas:
5    "masthead masthead masthead"
6    "featured featured sidebar"
7    "articles articles sidebar"
8    "newsletter newsletter newsletter";
9  grid-template-columns: 2fr 1fr 300px;
10  gap: 2rem;
11}
12
13/* Featured section uses flexbox */
14.featured-section {
15  grid-area: featured;
16  display: flex;
17  gap: 1rem;
18}
19
20.featured-main {
21  flex: 2;
22}
23
24.featured-secondary {
25  flex: 1;
26  display: flex;
27  flex-direction: column;
28  gap: 1rem;
29}
30
31/* Articles section uses grid */
32.articles-section {
33  grid-area: articles;
34  display: grid;
35  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
36  gap: 1rem;
37}
38
39/* Individual articles use flexbox */
40.article-card {
41  display: flex;
42  flex-direction: column;
43  border-radius: 8px;
44  overflow: hidden;
45}
46
47.article-meta {
48  display: flex;
49  justify-content: space-between;
50  align-items: center;
51  padding: 1rem;
52}

Pattern 4: Nested Grid Systems

CSS

1/* Outer grid for page structure */
2.page-grid {
3  display: grid;
4  grid-template-columns: 1fr min(1200px, 100%) 1fr;
5  grid-template-rows: auto 1fr auto;
6}
7
8.page-content {
9  grid-column: 2;
10  display: grid;
11  grid-template-columns: 1fr 300px;
12  gap: 3rem;
13}
14
15/* Inner components use flexbox */
16.content-section {
17  display: flex;
18  flex-direction: column;
19  gap: 2rem;
20}
21
22.content-block {
23  display: flex;
24  gap: 1rem;
25}
26
27.block-content {
28  flex: 1;
29}
30
31.block-aside {
32  flex-basis: 200px;
33  flex-shrink: 0;
34}

Pattern 5: Component-Level Hybrid

CSS

1/* Product listing with hybrid approach */
2.product-listing {
3  display: grid;
4  grid-template-columns: 250px 1fr;
5  gap: 2rem;
6}
7
8/* Filters use flexbox for form layout */
9.filters-panel {
10  display: flex;
11  flex-direction: column;
12  gap: 1.5rem;
13}
14
15.filter-group {
16  display: flex;
17  flex-direction: column;
18  gap: 0.5rem;
19}
20
21.filter-options {
22  display: flex;
23  flex-wrap: wrap;
24  gap: 0.5rem;
25}
26
27/* Products use grid for layout */
28.products-grid {
29  display: grid;
30  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
31  gap: 1.5rem;
32}
33
34/* Individual products use flexbox */
35.product-card {
36  display: flex;
37  flex-direction: column;
38  border: 1px solid #e5e7eb;
39  border-radius: 8px;
40  overflow: hidden;
41}
42
43.product-info {
44  flex: 1;
45  display: flex;
46  flex-direction: column;
47  padding: 1rem;
48}
49
50.product-price {
51  margin-top: auto;
52  display: flex;
53  justify-content: space-between;
54  align-items: center;
55}

Pattern 6: Responsive Hybrid Switching

CSS

1/* Mobile: Flexbox for simplicity */
2.responsive-layout {
3  display: flex;
4  flex-direction: column;
5}
6
7.responsive-header {
8  display: flex;
9  justify-content: space-between;
10  align-items: center;
11  padding: 1rem;
12}
13
14/* Tablet: Mixed approach */
15@media (min-width: 768px) {
16  .responsive-layout {
17    display: grid;
18    grid-template-rows: auto 1fr;
19  }
20  
21  .responsive-main {
22    display: flex;
23  }
24  
25  .responsive-content {
26    flex: 1;
27  }
28  
29  .responsive-sidebar {
30    flex-basis: 300px;
31  }
32}
33
34/* Desktop: Full grid system */
35@media (min-width: 1024px) {
36  .responsive-layout {
37    display: grid;
38    grid-template-areas:
39      "header header header"
40      "sidebar content aside"
41      "footer footer footer";
42    grid-template-columns: 250px 1fr 200px;
43  }
44  
45  .responsive-header { grid-area: header; }
46  .responsive-sidebar { grid-area: sidebar; }
47  .responsive-content { grid-area: content; }
48  .responsive-aside { grid-area: aside; }
49  .responsive-footer { grid-area: footer; }
50}

Best Practices for Hybrid Layouts:

Use Grid for overall page structure and major layout regions
Use Flexbox for component internals and alignment tasks
Consider the natural flow and relationship between elements
Test responsive behavior with both systems
Maintain consistency in your approach across similar components
Document your layout strategy for team collaboration

Component-Level Design Decisions

Strategic component design involves choosing Grid, Flexbox, or hybrid approaches based on component purpose, content relationships, and interaction patterns.

Navigation Components

Primary Navigation (Flexbox)

CSS

1.primary-nav {
2  display: flex;
3  justify-content: space-between;
4  align-items: center;
5  padding: 1rem 2rem;
6}
7
8.nav-brand {
9  font-weight: bold;
10  font-size: 1.25rem;
11}
12
13.nav-links {
14  display: flex;
15  gap: 2rem;
16  list-style: none;
17}
18
19.nav-actions {
20  display: flex;
21  gap: 1rem;
22  align-items: center;
23}

Mega Menu (Grid + Flex Hybrid)

CSS

1.mega-menu {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4  gap: 2rem;
5  padding: 2rem;
6  background: white;
7  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
8}
9
10.menu-section {
11  display: flex;
12  flex-direction: column;
13  gap: 1rem;
14}
15
16.menu-section-title {
17  font-weight: 600;
18  padding-bottom: 0.5rem;
19  border-bottom: 2px solid #e5e7eb;
20}
21
22.menu-links {
23  display: flex;
24  flex-direction: column;
25  gap: 0.5rem;
26}

Card Components

Basic Card (Flexbox)

CSS

1.card {
2  display: flex;
3  flex-direction: column;
4  border-radius: 8px;
5  overflow: hidden;
6  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
7}
8
9.card-image {
10  flex-shrink: 0;
11  height: 200px;
12  object-fit: cover;
13}
14
15.card-content {
16  flex: 1;
17  display: flex;
18  flex-direction: column;
19  padding: 1.5rem;
20}
21
22.card-title {
23  margin-bottom: 1rem;
24}
25
26.card-description {
27  flex: 1;
28  margin-bottom: 1rem;
29}
30
31.card-actions {
32  display: flex;
33  justify-content: space-between;
34  align-items: center;
35}

Complex Card (Grid + Flex)

CSS

1.product-card {
2  display: grid;
3  grid-template-areas:
4    "image info"
5    "image actions";
6  grid-template-columns: 200px 1fr;
7  grid-template-rows: 1fr auto;
8  gap: 1rem;
9  padding: 1rem;
10  border: 1px solid #e5e7eb;
11  border-radius: 8px;
12}
13
14.card-image {
15  grid-area: image;
16  border-radius: 4px;
17  object-fit: cover;
18}
19
20.card-info {
21  grid-area: info;
22  display: flex;
23  flex-direction: column;
24  gap: 0.5rem;
25}
26
27.card-actions {
28  grid-area: actions;
29  display: flex;
30  justify-content: flex-end;
31  gap: 1rem;
32}

Form Components

Simple Form (Flexbox)

CSS

1.form-container {
2  display: flex;
3  flex-direction: column;
4  gap: 1.5rem;
5  max-width: 400px;
6}
7
8.form-group {
9  display: flex;
10  flex-direction: column;
11  gap: 0.5rem;
12}
13
14.form-row {
15  display: flex;
16  gap: 1rem;
17}
18
19.form-row .form-group {
20  flex: 1;
21}
22
23.form-actions {
24  display: flex;
25  justify-content: space-between;
26  align-items: center;
27}

Complex Form (Grid + Flex)

CSS

1.advanced-form {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  grid-template-areas:
5    "personal personal"
6    "address contact"
7    "preferences preferences"
8    "actions actions";
9  gap: 2rem;
10}
11
12.form-section {
13  display: flex;
14  flex-direction: column;
15  gap: 1rem;
16}
17
18.personal-info {
19  grid-area: personal;
20}
21
22.address-info {
23  grid-area: address;
24}
25
26.contact-info {
27  grid-area: contact;
28}
29
30.preferences {
31  grid-area: preferences;
32  display: grid;
33  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
34  gap: 1rem;
35}
36
37.form-actions {
38  grid-area: actions;
39  display: flex;
40  justify-content: space-between;
41  padding-top: 2rem;
42  border-top: 1px solid #e5e7eb;
43}

Modal Components

Simple Modal (Flexbox)

CSS

1.modal-overlay {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  position: fixed;
6  top: 0;
7  left: 0;
8  right: 0;
9  bottom: 0;
10  background: rgba(0, 0, 0, 0.5);
11}
12
13.modal {
14  display: flex;
15  flex-direction: column;
16  background: white;
17  border-radius: 8px;
18  max-width: 500px;
19  width: 90%;
20  max-height: 90vh;
21}
22
23.modal-header {
24  display: flex;
25  justify-content: space-between;
26  align-items: center;
27  padding: 1.5rem;
28  border-bottom: 1px solid #e5e7eb;
29}
30
31.modal-content {
32  flex: 1;
33  padding: 1.5rem;
34  overflow-y: auto;
35}
36
37.modal-actions {
38  display: flex;
39  justify-content: flex-end;
40  gap: 1rem;
41  padding: 1.5rem;
42  border-top: 1px solid #e5e7eb;
43}

Complex Modal (Grid Layout)

CSS

1.settings-modal {
2  display: grid;
3  grid-template-areas:
4    "header header"
5    "sidebar content"
6    "sidebar actions";
7  grid-template-columns: 200px 1fr;
8  grid-template-rows: auto 1fr auto;
9  width: 800px;
10  height: 600px;
11  background: white;
12  border-radius: 8px;
13}
14
15.modal-header {
16  grid-area: header;
17  padding: 1.5rem;
18  border-bottom: 1px solid #e5e7eb;
19}
20
21.modal-sidebar {
22  grid-area: sidebar;
23  display: flex;
24  flex-direction: column;
25  padding: 1rem;
26  background: #f8fafc;
27  border-right: 1px solid #e5e7eb;
28}
29
30.modal-content {
31  grid-area: content;
32  padding: 1.5rem;
33  overflow-y: auto;
34}
35
36.modal-actions {
37  grid-area: actions;
38  display: flex;
39  justify-content: space-between;
40  padding: 1.5rem;
41  border-top: 1px solid #e5e7eb;
42}

Decision Framework for Components:

Choose Flexbox when:

Creating linear arrangements (navigation, toolbars)
Aligning items within containers
Building flexible, content-driven layouts
Creating equal-height columns
Managing space distribution

Choose Grid when:

Creating complex, multi-dimensional layouts
Building card grids or galleries
Designing forms with precise alignment
Creating dashboard-style layouts
Managing overlapping elements

Use Hybrid approach when:

Component has both structural and alignment needs
Different parts require different layout behaviors
Responsive design needs vary by breakpoint
Content relationships are complex

Component Design Best Practices:

Consistency in similar components across the application
Consider content variations and edge cases
Plan for responsive behavior from the start
Test with real content, not just placeholder text
Document layout decisions for team understanding

Nested Layouts: Advanced Integration Techniques

Nested layouts combine multiple Grid and Flexbox systems to create sophisticated, maintainable architectures that handle complex design requirements elegantly.

Multi-Level Grid Nesting

CSS

1/* Level 1: Page structure */
2.page-layout {
3  display: grid;
4  grid-template-areas:
5    "header header header"
6    "sidebar main aside"
7    "footer footer footer";
8  grid-template-columns: 250px 1fr 200px;
9  grid-template-rows: auto 1fr auto;
10  min-height: 100vh;
11}
12
13/* Level 2: Main content area */
14.main-content {
15  grid-area: main;
16  display: grid;
17  grid-template-rows: auto 1fr auto;
18  gap: 2rem;
19  padding: 2rem;
20}
21
22.content-header {
23  display: grid;
24  grid-template-columns: 1fr auto auto;
25  gap: 1rem;
26  align-items: center;
27}
28
29/* Level 3: Article grid */
30.articles-container {
31  display: grid;
32  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
33  gap: 1.5rem;
34}
35
36/* Level 4: Individual articles */
37.article {
38  display: grid;
39  grid-template-areas:
40    "image"
41    "title"
42    "excerpt"
43    "meta";
44  grid-template-rows: 200px auto 1fr auto;
45  border-radius: 8px;
46  overflow: hidden;
47  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
48}
49
50.article-image { grid-area: image; }
51.article-title { grid-area: title; padding: 1rem 1rem 0; }
52.article-excerpt { grid-area: excerpt; padding: 0 1rem; }
53.article-meta { 
54  grid-area: meta; 
55  padding: 1rem;
56  display: flex;
57  justify-content: space-between;
58  align-items: center;
59}

Grid Container with Flex Items

CSS

1/* Dashboard with widget grid */
2.dashboard {
3  display: grid;
4  grid-template-columns: repeat(12, 1fr);
5  grid-auto-rows: 100px;
6  gap: 1rem;
7  padding: 1rem;
8}
9
10/* Widgets span different grid areas */
11.widget-large {
12  grid-column: span 8;
13  grid-row: span 3;
14}
15
16.widget-medium {
17  grid-column: span 4;
18  grid-row: span 2;
19}
20
21.widget-small {
22  grid-column: span 2;
23  grid-row: span 1;
24}
25
26/* Each widget uses flexbox internally */
27.widget {
28  display: flex;
29  flex-direction: column;
30  background: white;
31  border-radius: 8px;
32  padding: 1rem;
33}
34
35.widget-header {
36  display: flex;
37  justify-content: space-between;
38  align-items: center;
39  margin-bottom: 1rem;
40}
41
42.widget-content {
43  flex: 1;
44  display: flex;
45  flex-direction: column;
46  justify-content: center;
47}
48
49/* Chart widget specific layout */
50.chart-widget .widget-content {
51  display: flex;
52  justify-content: center;
53  align-items: center;
54}
55
56/* Stats widget uses nested flex */
57.stats-widget .widget-content {
58  display: flex;
59  justify-content: space-around;
60  align-items: center;
61}
62
63.stat-item {
64  display: flex;
65  flex-direction: column;
66  align-items: center;
67  gap: 0.5rem;
68}

Flex Container with Grid Items

CSS

1/* Mobile app layout */
2.app-container {
3  display: flex;
4  flex-direction: column;
5  height: 100vh;
6}
7
8.app-header {
9  flex-shrink: 0;
10  display: flex;
11  justify-content: space-between;
12  align-items: center;
13  padding: 1rem;
14  background: #1f2937;
15  color: white;
16}
17
18.app-main {
19  flex: 1;
20  display: flex;
21  overflow: hidden;
22}
23
24.app-sidebar {
25  flex-basis: 250px;
26  flex-shrink: 0;
27  background: #f8fafc;
28  padding: 1rem;
29}
30
31/* Main content uses grid */
32.app-content {
33  flex: 1;
34  display: grid;
35  grid-template-areas:
36    "toolbar toolbar"
37    "list detail";
38  grid-template-columns: 300px 1fr;
39  grid-template-rows: auto 1fr;
40}
41
42.content-toolbar {
43  grid-area: toolbar;
44  display: flex;
45  justify-content: space-between;
46  align-items: center;
47  padding: 1rem;
48  border-bottom: 1px solid #e5e7eb;
49}
50
51.content-list {
52  grid-area: list;
53  overflow-y: auto;
54  border-right: 1px solid #e5e7eb;
55}
56
57.content-detail {
58  grid-area: detail;
59  padding: 2rem;
60}

Complex E-commerce Layout

CSS

1/* Product page with multiple nested systems */
2.product-page {
3  display: grid;
4  grid-template-areas:
5    "breadcrumb breadcrumb breadcrumb"
6    "gallery info info"
7    "tabs tabs tabs"
8    "content content sidebar"
9    "related related related";
10  grid-template-columns: 1fr 1fr 300px;
11  gap: 2rem;
12  max-width: 1200px;
13  margin: 0 auto;
14  padding: 2rem;
15}
16
17/* Product gallery with nested grid */
18.product-gallery {
19  grid-area: gallery;
20  display: grid;
21  grid-template-areas:
22    "thumbnails main-image"
23    "thumbnails main-image";
24  grid-template-columns: 100px 1fr;
25  gap: 1rem;
26}
27
28.thumbnails {
29  grid-area: thumbnails;
30  display: flex;
31  flex-direction: column;
32  gap: 0.5rem;
33}
34
35.main-image {
36  grid-area: main-image;
37  aspect-ratio: 1;
38  object-fit: cover;
39  border-radius: 8px;
40}
41
42/* Product info with flex layout */
43.product-info {
44  grid-area: info;
45  display: flex;
46  flex-direction: column;
47  gap: 1.5rem;
48}
49
50.product-price {
51  display: flex;
52  align-items: baseline;
53  gap: 1rem;
54}
55
56.product-options {
57  display: flex;
58  flex-direction: column;
59  gap: 1rem;
60}
61
62.option-group {
63  display: flex;
64  flex-direction: column;
65  gap: 0.5rem;
66}
67
68.option-values {
69  display: flex;
70  flex-wrap: wrap;
71  gap: 0.5rem;
72}
73
74/* Tabs system */
75.product-tabs {
76  grid-area: tabs;
77  display: flex;
78  flex-direction: column;
79}
80
81.tab-headers {
82  display: flex;
83  border-bottom: 2px solid #e5e7eb;
84}
85
86.tab-content {
87  padding: 2rem 0;
88}
89
90/* Related products grid */
91.related-products {
92  grid-area: related;
93  display: grid;
94  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
95  gap: 1rem;
96}
97
98.related-product {
99  display: flex;
100  flex-direction: column;
101  border: 1px solid #e5e7eb;
102  border-radius: 8px;
103  overflow: hidden;
104}
105
106.related-product-info {
107  flex: 1;
108  padding: 1rem;
109  display: flex;
110  flex-direction: column;
111  gap: 0.5rem;
112}
113
114.related-product-price {
115  margin-top: auto;
116  font-weight: 600;
117}

Form with Complex Nested Layout

CSS

1/* Multi-step form */
2.form-wizard {
3  display: grid;
4  grid-template-areas:
5    "progress progress"
6    "sidebar content"
7    "actions actions";
8  grid-template-columns: 200px 1fr;
9  grid-template-rows: auto 1fr auto;
10  min-height: 600px;
11  background: white;
12  border-radius: 8px;
13  overflow: hidden;
14}
15
16.form-progress {
17  grid-area: progress;
18  display: flex;
19  background: #f8fafc;
20  padding: 1rem;
21}
22
23.progress-step {
24  flex: 1;
25  display: flex;
26  align-items: center;
27  gap: 0.5rem;
28  position: relative;
29}
30
31.form-sidebar {
32  grid-area: sidebar;
33  display: flex;
34  flex-direction: column;
35  padding: 2rem 1rem;
36  background: #f1f5f9;
37}
38
39.form-content {
40  grid-area: content;
41  padding: 2rem;
42  overflow-y: auto;
43}
44
45/* Step content uses different layouts */
46.step-personal {
47  display: grid;
48  grid-template-columns: 1fr 1fr;
49  gap: 1rem;
50}
51
52.step-address {
53  display: flex;
54  flex-direction: column;
55  gap: 1rem;
56}
57
58.address-row {
59  display: grid;
60  grid-template-columns: 2fr 1fr 1fr;
61  gap: 1rem;
62}
63
64.step-payment {
65  display: grid;
66  grid-template-areas:
67    "method method"
68    "card-info billing";
69  grid-template-columns: 1fr 1fr;
70  gap: 2rem;
71}
72
73.form-actions {
74  grid-area: actions;
75  display: flex;
76  justify-content: space-between;
77  padding: 1.5rem 2rem;
78  border-top: 1px solid #e5e7eb;
79}

Best Practices for Nested Layouts:

Keep nesting levels manageable (typically 3-4 levels max)
Use consistent approaches for similar component types
Consider performance implications of deep nesting
Test thoroughly with varying content amounts
Document complex nesting patterns for team understanding
Use CSS custom properties for consistent spacing across levels
Plan responsive behavior for each nesting level

Combining Flexbox & Grid - Complete Hybrid Layout System

A comprehensive demonstration of strategic Grid and Flexbox combinations, showing how to leverage both layout systems for optimal results in complex, real-world interfaces.

Example CodeHTML

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>Combining Flexbox & Grid - Hybrid Layout System</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            line-height: 1.6;
17            color: #333;
18            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19        }
20
21        .container {
22            max-width: 1400px;
23            margin: 0 auto;
24            background: rgba(255, 255, 255, 0.95);
25            min-height: 100vh;
26            backdrop-filter: blur(10px);
27        }
28
29        /* Main Layout: CSS Grid */
30        .app-layout {
31            display: grid;
32            grid-template-areas:
33                "header header header"
34                "sidebar main aside"
35                "footer footer footer";
36            grid-template-columns: 250px 1fr 300px;
37            grid-template-rows: 70px 1fr 60px;
38            min-height: 100vh;
39        }
40
41        /* Header: Flexbox for navigation */
42        .app-header {
43            grid-area: header;
44            display: flex;
45            justify-content: space-between;
46            align-items: center;
47            padding: 0 2rem;
48            background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
49            color: white;
50            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
51        }
52
53        .header-brand {
54            font-size: 1.5rem;
55            font-weight: bold;
56        }
57
58        .header-nav {
59            display: flex;
60            gap: 2rem;
61            list-style: none;
62        }
63
64        .header-nav a {
65            color: rgba(255, 255, 255, 0.9);
66            text-decoration: none;
67            transition: color 0.3s ease;
68        }
69
70        .header-nav a:hover {
71            color: white;
72        }
73
74        .header-actions {
75            display: flex;
76            gap: 1rem;
77            align-items: center;
78        }
79
80        .user-menu {
81            display: flex;
82            align-items: center;
83            gap: 0.5rem;
84            padding: 0.5rem 1rem;
85            background: rgba(255, 255, 255, 0.1);
86            border-radius: 20px;
87            cursor: pointer;
88        }
89
90        /* Sidebar: Flexbox for navigation */
91        .app-sidebar {
92            grid-area: sidebar;
93            display: flex;
94            flex-direction: column;
95            padding: 2rem 1rem;
96            background: #f8fafc;
97            border-right: 1px solid #e5e7eb;
98        }
99
100        .sidebar-section {
101            margin-bottom: 2rem;
102        }
103
104        .sidebar-title {
105            font-weight: 600;
106            color: #374151;
107            margin-bottom: 1rem;
108            font-size: 0.875rem;
109            text-transform: uppercase;
110            letter-spacing: 0.05em;
111        }
112
113        .sidebar-menu {
114            display: flex;
115            flex-direction: column;
116            gap: 0.25rem;
117        }
118
119        .sidebar-item {
120            display: flex;
121            align-items: center;
122            gap: 0.75rem;
123            padding: 0.75rem;
124            border-radius: 6px;
125            color: #6b7280;
126            text-decoration: none;
127            transition: all 0.2s ease;
128        }
129
130        .sidebar-item:hover,
131        .sidebar-item.active {
132            background: #3b82f6;
133            color: white;
134        }
135
136        /* Main Content: Grid for layout, Flex for components */
137        .main-content {
138            grid-area: main;
139            display: grid;
140            grid-template-rows: auto 1fr;
141            padding: 2rem;
142            background: white;
143        }
144
145        .content-header {
146            display: flex;
147            justify-content: space-between;
148            align-items: center;
149            margin-bottom: 2rem;
150            padding-bottom: 1rem;
151            border-bottom: 2px solid #e5e7eb;
152        }
153
154        .content-title {
155            font-size: 2rem;
156            color: #1f2937;
157        }
158
159        .content-actions {
160            display: flex;
161            gap: 1rem;
162        }
163
164        .btn {
165            display: flex;
166            align-items: center;
167            gap: 0.5rem;
168            padding: 0.5rem 1rem;
169            border: none;
170            border-radius: 6px;
171            font-weight: 600;
172            cursor: pointer;
173            transition: all 0.2s ease;
174        }
175
176        .btn-primary {
177            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
178            color: white;
179        }
180
181        .btn-primary:hover {
182            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
183            transform: translateY(-1px);
184        }
185
186        .btn-secondary {
187            background: #f3f4f6;
188            color: #374151;
189        }
190
191        .btn-secondary:hover {
192            background: #e5e7eb;
193        }
194
195        /* Content Area: Grid for cards */
196        .content-grid {
197            display: grid;
198            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
199            gap: 1.5rem;
200        }
201
202        /* Cards: Flexbox for internal layout */
203        .content-card {
204            display: flex;
205            flex-direction: column;
206            background: white;
207            border: 1px solid #e5e7eb;
208            border-radius: 12px;
209            overflow: hidden;
210            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
211            transition: all 0.3s ease;
212        }
213
214        .content-card:hover {
215            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
216            transform: translateY(-2px);
217        }
218
219        .card-image {
220            height: 200px;
221            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
222            display: flex;
223            align-items: center;
224            justify-content: center;
225            color: white;
226            font-size: 1.1rem;
227            font-weight: 600;
228        }
229
230        .card-content {
231            flex: 1;
232            display: flex;
233            flex-direction: column;
234            padding: 1.5rem;
235        }
236
237        .card-title {
238            font-size: 1.25rem;
239            font-weight: 600;
240            color: #1f2937;
241            margin-bottom: 0.5rem;
242        }
243
244        .card-description {
245            flex: 1;
246            color: #6b7280;
247            margin-bottom: 1rem;
248        }
249
250        .card-meta {
251            display: flex;
252            justify-content: space-between;
253            align-items: center;
254            padding-top: 1rem;
255            border-top: 1px solid #f3f4f6;
256        }
257
258        .card-stats {
259            display: flex;
260            gap: 1rem;
261            font-size: 0.875rem;
262            color: #6b7280;
263        }
264
265        .card-actions {
266            display: flex;
267            gap: 0.5rem;
268        }
269
270        /* Aside: Flexbox for widgets */
271        .app-aside {
272            grid-area: aside;
273            display: flex;
274            flex-direction: column;
275            gap: 1.5rem;
276            padding: 2rem 1rem;
277            background: #f8fafc;
278            border-left: 1px solid #e5e7eb;
279        }
280
281        .widget {
282            background: white;
283            border-radius: 8px;
284            padding: 1.5rem;
285            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
286        }
287
288        .widget-title {
289            font-weight: 600;
290            color: #1f2937;
291            margin-bottom: 1rem;
292            display: flex;
293            align-items: center;
294            gap: 0.5rem;
295        }
296
297        /* Stats Widget: Grid layout */
298        .stats-widget {
299            display: grid;
300            grid-template-columns: repeat(2, 1fr);
301            gap: 1rem;
302        }
303
304        .stat-item {
305            display: flex;
306            flex-direction: column;
307            align-items: center;
308            padding: 1rem;
309            background: #f8fafc;
310            border-radius: 6px;
311        }
312
313        .stat-value {
314            font-size: 1.5rem;
315            font-weight: bold;
316            color: #3b82f6;
317        }
318
319        .stat-label {
320            font-size: 0.875rem;
321            color: #6b7280;
322            margin-top: 0.25rem;
323        }
324
325        /* Activity Widget: Flexbox for list */
326        .activity-list {
327            display: flex;
328            flex-direction: column;
329            gap: 1rem;
330        }
331
332        .activity-item {
333            display: flex;
334            gap: 1rem;
335            align-items: flex-start;
336        }
337
338        .activity-avatar {
339            width: 40px;
340            height: 40px;
341            border-radius: 50%;
342            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
343            display: flex;
344            align-items: center;
345            justify-content: center;
346            color: white;
347            font-weight: 600;
348            flex-shrink: 0;
349        }
350
351        .activity-content {
352            flex: 1;
353        }
354
355        .activity-text {
356            font-size: 0.875rem;
357            color: #374151;
358            margin-bottom: 0.25rem;
359        }
360
361        .activity-time {
362            font-size: 0.75rem;
363            color: #9ca3af;
364        }
365
366        /* Footer: Flexbox for layout */
367        .app-footer {
368            grid-area: footer;
369            display: flex;
370            justify-content: space-between;
371            align-items: center;
372            padding: 0 2rem;
373            background: #1f2937;
374            color: #9ca3af;
375            font-size: 0.875rem;
376        }
377
378        .footer-links {
379            display: flex;
380            gap: 2rem;
381            list-style: none;
382        }
383
384        .footer-links a {
385            color: #9ca3af;
386            text-decoration: none;
387            transition: color 0.2s ease;
388        }
389
390        .footer-links a:hover {
391            color: white;
392        }
393
394        /* Modal Example: Grid + Flex Hybrid */
395        .modal-overlay {
396            position: fixed;
397            top: 0;
398            left: 0;
399            right: 0;
400            bottom: 0;
401            background: rgba(0, 0, 0, 0.5);
402            display: flex;
403            justify-content: center;
404            align-items: center;
405            opacity: 0;
406            pointer-events: none;
407            transition: opacity 0.3s ease;
408            z-index: 1000;
409        }
410
411        .modal-overlay.active {
412            opacity: 1;
413            pointer-events: all;
414        }
415
416        .modal {
417            display: grid;
418            grid-template-areas:
419                "header header"
420                "sidebar content"
421                "actions actions";
422            grid-template-columns: 200px 1fr;
423            grid-template-rows: auto 1fr auto;
424            width: 800px;
425            height: 600px;
426            background: white;
427            border-radius: 12px;
428            overflow: hidden;
429            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
430            transform: scale(0.9);
431            transition: transform 0.3s ease;
432        }
433
434        .modal-overlay.active .modal {
435            transform: scale(1);
436        }
437
438        .modal-header {
439            grid-area: header;
440            display: flex;
441            justify-content: space-between;
442            align-items: center;
443            padding: 1.5rem;
444            border-bottom: 1px solid #e5e7eb;
445        }
446
447        .modal-sidebar {
448            grid-area: sidebar;
449            display: flex;
450            flex-direction: column;
451            padding: 1rem;
452            background: #f8fafc;
453            border-right: 1px solid #e5e7eb;
454        }
455
456        .modal-content {
457            grid-area: content;
458            padding: 2rem;
459            overflow-y: auto;
460        }
461
462        .modal-actions {
463            grid-area: actions;
464            display: flex;
465            justify-content: space-between;
466            align-items: center;
467            padding: 1.5rem;
468            border-top: 1px solid #e5e7eb;
469        }
470
471        /* Responsive Design */
472        @media (max-width: 1024px) {
473            .app-layout {
474                grid-template-areas:
475                    "header header"
476                    "main aside"
477                    "footer footer";
478                grid-template-columns: 1fr 250px;
479            }
480            
481            .app-sidebar {
482                display: none;
483            }
484        }
485
486        @media (max-width: 768px) {
487            .app-layout {
488                grid-template-areas:
489                    "header"
490                    "main"
491                    "footer";
492                grid-template-columns: 1fr;
493                grid-template-rows: auto 1fr auto;
494            }
495            
496            .app-aside {
497                display: none;
498            }
499            
500            .content-grid {
501                grid-template-columns: 1fr;
502            }
503            
504            .header-nav {
505                display: none;
506            }
507            
508            .modal {
509                grid-template-areas:
510                    "header"
511                    "content"
512                    "actions";
513                grid-template-columns: 1fr;
514                width: 90vw;
515                height: 90vh;
516            }
517            
518            .modal-sidebar {
519                display: none;
520            }
521        }
522
523        /* Interactive Elements */
524        .interactive-demo {
525            margin: 2rem 0;
526            padding: 1rem;
527            background: rgba(59, 130, 246, 0.1);
528            border-radius: 8px;
529            border: 2px dashed #3b82f6;
530        }
531
532        .demo-toggle {
533            display: flex;
534            gap: 1rem;
535            margin-bottom: 1rem;
536        }
537
538        .toggle-btn {
539            padding: 0.5rem 1rem;
540            border: 2px solid #3b82f6;
541            background: transparent;
542            color: #3b82f6;
543            border-radius: 6px;
544            cursor: pointer;
545            font-weight: 600;
546            transition: all 0.2s ease;
547        }
548
549        .toggle-btn.active {
550            background: #3b82f6;
551            color: white;
552        }
553    </style>
554</head>
555<body>
556    <div class="container">
557        <div class="app-layout">
558            <!-- Header: Flexbox Navigation -->
559            <header class="app-header">
560                <div class="header-brand">⚡ Hybrid Layout</div>
561                <nav class="header-nav">
562                    <a href="#">Dashboard</a>
563                    <a href="#">Projects</a>
564                    <a href="#">Teams</a>
565                    <a href="#">Analytics</a>
566                </nav>
567                <div class="header-actions">
568                    <button class="btn btn-secondary">🔍</button>
569                    <button class="btn btn-secondary">🔔</button>
570                    <div class="user-menu">
571                        <span>👤</span>
572                        <span>John Doe</span>
573                    </div>
574                </div>
575            </header>
576
577            <!-- Sidebar: Flexbox Menu -->
578            <aside class="app-sidebar">
579                <div class="sidebar-section">
580                    <h3 class="sidebar-title">Main Menu</h3>
581                    <nav class="sidebar-menu">
582                        <a href="#" class="sidebar-item active">
583                            <span>📊</span> Dashboard
584                        </a>
585                        <a href="#" class="sidebar-item">
586                            <span>📁</span> Projects
587                        </a>
588                        <a href="#" class="sidebar-item">
589                            <span>👥</span> Team
590                        </a>
591                        <a href="#" class="sidebar-item">
592                            <span>⚙️</span> Settings
593                        </a>
594                    </nav>
595                </div>
596                
597                <div class="sidebar-section">
598                    <h3 class="sidebar-title">Quick Actions</h3>
599                    <nav class="sidebar-menu">
600                        <a href="#" class="sidebar-item">
601                            <span>➕</span> New Project
602                        </a>
603                        <a href="#" class="sidebar-item">
604                            <span>📤</span> Upload File
605                        </a>
606                        <a href="#" class="sidebar-item">
607                            <span>👥</span> Invite User
608                        </a>
609                    </nav>
610                </div>
611            </aside>
612
613            <!-- Main Content: Grid + Flex Hybrid -->
614            <main class="main-content">
615                <div class="content-header">
616                    <h1 class="content-title">Dashboard Overview</h1>
617                    <div class="content-actions">
618                        <button class="btn btn-secondary">📊 Export</button>
619                        <button class="btn btn-primary" onclick="showModal()">➕ New Project</button>
620                    </div>
621                </div>
622
623                <div class="interactive-demo">
624                    <div class="demo-toggle">
625                        <button class="toggle-btn active" onclick="switchLayout('grid')">Grid Layout</button>
626                        <button class="toggle-btn" onclick="switchLayout('flex')">Flex Layout</button>
627                    </div>
628                    <p><strong>Try switching between Grid and Flexbox layouts!</strong> Notice how Grid provides precise 2D control while Flexbox offers flexible 1D arrangement.</p>
629                </div>
630
631                <div class="content-grid" id="contentGrid">
632                    <div class="content-card">
633                        <div class="card-image">Project Alpha</div>
634                        <div class="card-content">
635                            <h3 class="card-title">E-commerce Platform</h3>
636                            <p class="card-description">Modern e-commerce solution with advanced features and seamless user experience.</p>
637                            <div class="card-meta">
638                                <div class="card-stats">
639                                    <span>👥 8 members</span>
640                                    <span>📅 2 weeks left</span>
641                                </div>
642                                <div class="card-actions">
643                                    <button class="btn btn-secondary">View</button>
644                                </div>
645                            </div>
646                        </div>
647                    </div>
648
649                    <div class="content-card">
650                        <div class="card-image">Project Beta</div>
651                        <div class="card-content">
652                            <h3 class="card-title">Mobile App Design</h3>
653                            <p class="card-description">Cross-platform mobile application with focus on user engagement and performance.</p>
654                            <div class="card-meta">
655                                <div class="card-stats">
656                                    <span>👥 5 members</span>
657                                    <span>📅 1 week left</span>
658                                </div>
659                                <div class="card-actions">
660                                    <button class="btn btn-secondary">View</button>
661                                </div>
662                            </div>
663                        </div>
664                    </div>
665
666                    <div class="content-card">
667                        <div class="card-image">Project Gamma</div>
668                        <div class="card-content">
669                            <h3 class="card-title">Analytics Dashboard</h3>
670                            <p class="card-description">Real-time analytics dashboard for business intelligence and data visualization.</p>
671                            <div class="card-meta">
672                                <div class="card-stats">
673                                    <span>👥 3 members</span>
674                                    <span>📅 3 weeks left</span>
675                                </div>
676                                <div class="card-actions">
677                                    <button class="btn btn-secondary">View</button>
678                                </div>
679                            </div>
680                        </div>
681                    </div>
682
683                    <div class="content-card">
684                        <div class="card-image">Project Delta</div>
685                        <div class="card-content">
686                            <h3 class="card-title">API Integration</h3>
687                            <p class="card-description">Comprehensive API integration service for third-party applications and services.</p>
688                            <div class="card-meta">
689                                <div class="card-stats">
690                                    <span>👥 6 members</span>
691                                    <span>📅 4 weeks left</span>
692                                </div>
693                                <div class="card-actions">
694                                    <button class="btn btn-secondary">View</button>
695                                </div>
696                            </div>
697                        </div>
698                    </div>
699                </div>
700            </main>
701
702            <!-- Aside: Flexbox Widgets -->
703            <aside class="app-aside">
704                <div class="widget">
705                    <h3 class="widget-title">📊 Project Stats</h3>
706                    <div class="stats-widget">
707                        <div class="stat-item">
708                            <div class="stat-value">24</div>
709                            <div class="stat-label">Active Projects</div>
710                        </div>
711                        <div class="stat-item">
712                            <div class="stat-value">156</div>
713                            <div class="stat-label">Tasks Completed</div>
714                        </div>
715                        <div class="stat-item">
716                            <div class="stat-value">89%</div>
717                            <div class="stat-label">Success Rate</div>
718                        </div>
719                        <div class="stat-item">
720                            <div class="stat-value">12</div>
721                            <div class="stat-label">Team Members</div>
722                        </div>
723                    </div>
724                </div>
725
726                <div class="widget">
727                    <h3 class="widget-title">🔥 Recent Activity</h3>
728                    <div class="activity-list">
729                        <div class="activity-item">
730                            <div class="activity-avatar">JD</div>
731                            <div class="activity-content">
732                                <div class="activity-text">John completed the design mockups</div>
733                                <div class="activity-time">2 hours ago</div>
734                            </div>
735                        </div>
736                        <div class="activity-item">
737                            <div class="activity-avatar">SM</div>
738                            <div class="activity-content">
739                                <div class="activity-text">Sarah merged the feature branch</div>
740                                <div class="activity-time">4 hours ago</div>
741                            </div>
742                        </div>
743                        <div class="activity-item">
744                            <div class="activity-avatar">MJ</div>
745                            <div class="activity-content">
746                                <div class="activity-text">Mike updated project requirements</div>
747                                <div class="activity-time">1 day ago</div>
748                            </div>
749                        </div>
750                    </div>
751                </div>
752
753                <div class="widget">
754                    <h3 class="widget-title">⏰ Upcoming Deadlines</h3>
755                    <div class="activity-list">
756                        <div class="activity-item">
757                            <div class="activity-avatar">🎯</div>
758                            <div class="activity-content">
759                                <div class="activity-text">E-commerce Platform Launch</div>
760                                <div class="activity-time">Due in 5 days</div>
761                            </div>
762                        </div>
763                        <div class="activity-item">
764                            <div class="activity-avatar">📱</div>
765                            <div class="activity-content">
766                                <div class="activity-text">Mobile App Review</div>
767                                <div class="activity-time">Due in 1 week</div>
768                            </div>
769                        </div>
770                    </div>
771                </div>
772            </aside>
773
774            <!-- Footer: Flexbox Layout -->
775            <footer class="app-footer">
776                <div>&copy; 2024 Hybrid Layout Demo. Built with Grid + Flexbox.</div>
777                <nav class="footer-links">
778                    <a href="#">Privacy</a>
779                    <a href="#">Terms</a>
780                    <a href="#">Support</a>
781                    <a href="#">Docs</a>
782                </nav>
783            </footer>
784        </div>
785
786        <!-- Modal: Grid + Flex Hybrid -->
787        <div class="modal-overlay" id="modalOverlay">
788            <div class="modal">
789                <div class="modal-header">
790                    <h2>Create New Project</h2>
791                    <button class="btn btn-secondary" onclick="hideModal()">✕</button>
792                </div>
793                <div class="modal-sidebar">
794                    <div class="sidebar-menu">
795                        <a href="#" class="sidebar-item active">📋 Basic Info</a>
796                        <a href="#" class="sidebar-item">👥 Team Setup</a>
797                        <a href="#" class="sidebar-item">⚙️ Configuration</a>
798                        <a href="#" class="sidebar-item">🎯 Goals</a>
799                    </div>
800                </div>
801                <div class="modal-content">
802                    <h3>Project Information</h3>
803                    <p>This modal demonstrates a Grid-based layout structure with Flexbox-based components. The sidebar uses flexbox for menu layout, while the overall modal structure uses CSS Grid for precise positioning.</p>
804                    <br>
805                    <p><strong>Key Features:</strong></p>
806                    <ul style="margin: 1rem 0; padding-left: 2rem;">
807                        <li>Grid provides the main modal structure</li>
808                        <li>Flexbox handles internal component alignment</li>
809                        <li>Responsive design adapts layout method by screen size</li>
810                        <li>Semantic HTML supports both layout systems</li>
811                    </ul>
812                </div>
813                <div class="modal-actions">
814                    <div>
815                        <button class="btn btn-secondary">← Previous</button>
816                    </div>
817                    <div style="display: flex; gap: 1rem;">
818                        <button class="btn btn-secondary" onclick="hideModal()">Cancel</button>
819                        <button class="btn btn-primary">Next →</button>
820                    </div>
821                </div>
822            </div>
823        </div>
824    </div>
825
826    <script>
827        // Layout switching demonstration
828        function switchLayout(type) {
829            const grid = document.getElementById('contentGrid');
830            const buttons = document.querySelectorAll('.toggle-btn');
831            
832            buttons.forEach(btn => btn.classList.remove('active'));
833            event.target.classList.add('active');
834            
835            if (type === 'flex') {
836                grid.style.display = 'flex';
837                grid.style.flexWrap = 'wrap';
838                grid.style.gap = '1.5rem';
839                console.log('Switched to Flexbox layout');
840            } else {
841                grid.style.display = 'grid';
842                grid.style.flexWrap = '';
843                console.log('Switched to Grid layout');
844            }
845        }
846
847        // Modal functionality
848        function showModal() {
849            document.getElementById('modalOverlay').classList.add('active');
850            document.body.style.overflow = 'hidden';
851        }
852
853        function hideModal() {
854            document.getElementById('modalOverlay').classList.remove('active');
855            document.body.style.overflow = '';
856        }
857
858        // Close modal on overlay click
859        document.getElementById('modalOverlay').addEventListener('click', function(e) {
860            if (e.target === this) {
861                hideModal();
862            }
863        });
864
865        // Interactive card effects
866        document.querySelectorAll('.content-card').forEach(card => {
867            card.addEventListener('click', function() {
868                this.style.animation = 'cardPulse 0.6s ease-out';
869                setTimeout(() => {
870                    this.style.animation = '';
871                }, 600);
872            });
873        });
874
875        // Add CSS animations via JavaScript
876        const style = document.createElement('style');
877        style.textContent = `
878            @keyframes cardPulse {
879                0% { transform: translateY(-2px) scale(1); }
880                50% { transform: translateY(-4px) scale(1.02); }
881                100% { transform: translateY(-2px) scale(1); }
882            }
883        `;
884        document.head.appendChild(style);
885
886        // Console logging for educational purposes
887        console.log('🎯 Hybrid Layout System loaded!');
888        console.log('Grid areas:', {
889            header: 'Flexbox navigation with space-between',
890            sidebar: 'Flexbox menu with column direction',
891            main: 'Grid for cards + Flexbox for components',
892            aside: 'Flexbox widgets with column stacking',
893            footer: 'Flexbox with space-between layout'
894        });
895
896        // Performance monitoring
897        const observer = new IntersectionObserver((entries) => {
898            entries.forEach(entry => {
899                if (entry.isIntersecting) {
900                    entry.target.style.animation = 'fadeInUp 0.6s ease-out';
901                }
902            });
903        }, { threshold: 0.1 });
904
905        document.querySelectorAll('.content-card').forEach(card => {
906            observer.observe(card);
907        });
908    </script>
909</body>
910</html>

How It Works

This comprehensive demonstration showcases the strategic combination of CSS Grid and Flexbox in a real-world application interface:

🎯 Complete Hybrid Layout Architecture:

1. Strategic Layout Decisions:

CSS Grid for page structure: Main app layout uses grid-template-areas for precise positioning
Flexbox for navigation: Header navigation uses space-between for optimal distribution
Grid for content arrangement: Card grid provides responsive, two-dimensional control
Flexbox for component internals: Individual cards use flexbox for flexible content flow

2. Multi-Level Layout Hierarchy:

Level 1 - Page Structure (Grid):

Grid-template-areas define major layout regions
Semantic area names: header, sidebar, main, aside, footer
Responsive grid that adapts column structure by screen size
Proper aspect ratios and content flow management

Level 2 - Component Layout (Flexbox):

Header: Flexbox with space-between for brand, navigation, and actions
Sidebar: Column flexbox for menu organization and section grouping
Content: Grid for cards with flexbox for header alignment
Widgets: Flexbox for stacking and internal component alignment

3. Advanced Hybrid Patterns:

Navigation Component Hybrid:

Main navigation bar uses flexbox for horizontal distribution
Sidebar navigation uses flexbox for vertical stacking
User menu combines flexbox for icon/text alignment
Responsive behavior maintains usability across breakpoints

Content Area Strategy:

Grid provides precise 2D control for card layout
Individual cards use flexbox for internal content flow
Interactive toggle demonstrates Grid vs Flexbox trade-offs
Responsive behavior adapts layout method by screen size

4. Complex Component Examples:

Modal System (Grid + Flex):

Grid structure: header/sidebar/content/actions areas
Flexbox components: header layout, sidebar menu, action buttons
Responsive transformation: Mobile switches to single-column grid
Maintains semantic structure across layout changes

Widget System:

Stats widget uses grid for metric arrangement
Activity feed uses flexbox for list item layout
Each widget internally uses flexbox for content flow
Consistent spacing and alignment across widget types

5. Production-Ready Implementation Details:

Responsive Strategy:

Desktop: Full grid system with all layout regions
Tablet: Reduced grid complexity, hide secondary sidebar
Mobile: Simplified single-column grid, navigation adaptations
Touch-friendly interactions and appropriate sizing

Performance Optimization:

Efficient CSS with minimal repaints
Hardware-accelerated animations and transitions
Intersection Observer for scroll-triggered animations
Event delegation for better memory management

6. Educational Demonstration Features:

Interactive Layout Switching:

Toggle between Grid and Flexbox for content area
Visual demonstration of each method's strengths
Console logging for technical insight
Real-time layout property changes

Accessibility Considerations:

Semantic HTML structure supporting both layout systems
Keyboard navigation patterns maintained
Focus management in modal interactions
ARIA-friendly layout patterns

7. Advanced Integration Techniques:

Nested Layout Systems:

Grid containers with flexbox items
Flexbox containers with grid sections
Multi-level nesting with consistent patterns
Component reusability across layout contexts

Design System Integration:

Consistent spacing scale using CSS custom properties
Reusable component patterns
Maintainable color and typography systems
Scalable layout architecture

8. Real-World Application Patterns:

Dashboard interfaces combining both layout methods
E-commerce product grids with flexible components
Content management systems with complex nested layouts
Modern web application interfaces with hybrid requirements

This demonstration proves that the most powerful modern layouts don't choose between Grid and Flexbox—they strategically combine both systems to create interfaces that are visually sophisticated, technically robust, and maintainably scalable across projects and teams.

Key Takeaways

Use CSS Grid for overall page structure and two-dimensional layout control
Apply Flexbox for component-level alignment and one-dimensional arrangements
Combine both systems strategically: Grid for layout, Flexbox for components
Consider content relationships when choosing between Grid, Flexbox, or hybrid approaches
Build responsive layouts that leverage each method's strengths at different breakpoints

What's Next?

Outstanding work mastering hybrid layouts! You now understand how to strategically combine Grid and Flexbox for optimal results. Next, we'll explore "Responsive Layouts with Grid & Flexbox" where you'll learn advanced responsive design techniques using both layout systems together. Get ready to build layouts that adapt beautifully to any screen size!

Your progress is saved in this browser, on this device only.

Previous: Grid Template Areas & Naming

Next: Responsive Layouts with Grid & Flexbox

CSS