Building Layouts with Flexbox & CSS Grid

1. Introduction

In Phase 1, you learned the structure (semantic HTML), the box model, typography, and visual design fundamentals. But all that structure needs to live in a layout that adapts to different screen sizes. That’s where Flexbox and CSS Grid shine.

In this post, you’ll learn:

• The concepts of Flexbox and CSS Grid

• When to use Flexbox vs Grid

• Responsive layout patterns with each

• Combining Flexbox and Grid for real-world UIs

• Hands-on examples and debugging tips

Let’s dive in.

2. Why Modern CSS Layouts?

Older layout techniques (floats, inline-block hacks) are brittle and error-prone. Modern tools give more power and flexibility:

• Flexbox – great for one-dimensional layouts (row or column alignment)

• CSS Grid – powerful for two-dimensional layouts (rows and columns)

• Together they cover most layout use cases.

• They adapt fluidly when combined with media queries and responsive units.

3. Flexbox: One-Dimensional Layouts

3.1 Basic Terminology & Concepts

• Flex container – the element with display: flex (or inline-flex)

• Flex items – direct children of the flex container

• Main axis – direction items flow (row or column)

• Cross axis – the perpendicular direction

Key properties on the container:

• flex-direction (row, column, row-reverse, column-reverse)

• flex-wrap (nowrap, wrap, wrap-reverse)

• justify-content (align along main axis)

• align-items (align along cross axis)

• align-content (when multiple lines)

Properties on flex items:

• flex shorthand (grow, shrink, basis)

• order (to re-order)

• align-self (override align-items for that item)

3.2 Flexbox Example: Horizontal Navigation

<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #333;
  padding: 1rem;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
}

This is perfect for distributing links horizontally.

3.3 Flexbox Responsiveness: Wrapping & Basis

To allow items to wrap on smaller screens:

.navbar {
  flex-wrap: wrap;
}

/* Flex items can shrink or grow */
.navbar a {
  flex: 1 1 auto;
  text-align: center;
}

Or in a card layout:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px; /* at least 300px width, but can shrink/grow */
}

On narrow viewports, cards will wrap and stack vertically.

4. CSS Grid: Two-Dimensional Layouts

4.1 Core Concepts & Properties

• Use display: grid on a container

• Define columns & rows with grid-template-columns and grid-template-rows

• Use grid-gap (or newer gap) for spacing

• Place items via auto-placement or explicitly using grid-column, grid-row

4.2 Responsive Grid with Auto-Fit / Auto-Fill

One of Grid’s most powerful patterns:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

• auto-fit / auto-fill — fills as many columns as possible

• minmax(200px, 1fr) — items have a minimum width of 200px but can stretch

This pattern creates fluid columns that adapt to viewport width.

4.3 Grid Example: Article Layout

<div class="layout">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "nav aside"
    "footer footer";
  grid-template-columns: 200px 1fr;
  gap: 1rem;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

This defines a responsive layout that reflows from multi-column to single column on small screens.

5. Combining Flexbox & Grid in Real UIs

In many cases, you’ll layer both:

• Use Grid for the overall page layout

• Use Flexbox for internal alignment (e.g. navbar, card content)

• E.g. a card grid using Grid, and within each card use Flexbox for buttons or header layout

Example:

<section class="card-grid">
  <article class="card">
    <h2>Title</h2>
    <p>Some text</p>
    <div class="card-actions">
      <button>Read</button>
      <button>Share</button>
    </div>
  </article>
  <!-- more cards -->
</section>

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

This approach gives robust flexibility in layout design.

6. Media Queries & Breakpoint Strategy

To adapt layouts at different screen widths, use media queries:

/* default (mobile first) styles */

@media (min-width: 600px) {
  /* tablet / small desktop */
}

@media (min-width: 1024px) {
  /* large desktop */
}

Best practices:

• Use mobile-first: base styles for small screens, then enhance

• Choose breakpoints based on content needs, not device models

• Combine with max-width and container constraints to avoid too wide layouts

7. Example: Responsive Page Layout

Let’s build a simple responsive page using both Grid and Flexbox.

HTML

<div class="page">
  <header class="page-header">My Website</header>
  <nav class="page-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
  </nav>
  <main class="page-main">
    <section class="posts">
      <article class="post">Post 1</article>
      <article class="post">Post 2</article>
      <article class="post">Post 3</article>
    </section>
    <aside class="page-sidebar">Sidebar content</aside>
  </main>
  <footer class="page-footer">© 2025 My Website</footer>
</div>

CSS

/* Reset & base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Page grid layout */
.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "footer";
  gap: 1rem;
  min-height: 100vh;
}

.page-header { grid-area: header; background: #333; color: white; padding: 1rem; text-align: center; }
.page-footer { grid-area: footer; background: #333; color: white; padding: 1rem; text-align: center; }

.page-main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "posts"
    "sidebar";
  gap: 1rem;
  padding: 1rem;
}

/* Navigation using flex */
.page-nav {
  background: #444;
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem;
}
.page-nav a {
  color: white;
  text-decoration: none;
}

/* Posts & sidebar styling */
.posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.post {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 6px;
}
.page-sidebar {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 6px;
}

/* Responsive breakpoints */
@media (min-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }
  .page-main {
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "posts sidebar";
  }
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

This layout:

• Uses Grid for the overarching page structure

• Uses Grid again for posts layout

• Uses Flexbox for navigation items

• Reflows at 768px: shifts from one-column to two-column layout

8. Debugging Layouts & Common Issues

• If items overflow or break grid, check min-width constraints or flex-basis

• Use browser dev tools “Layout” or “Grid” inspection tools

• Watch for collapsing margins, unexpected gaps

• Test at many viewport widths — 320 px, 480 px, 768 px, 1024 px, etc.

• When combining Flexbox and Grid, be careful about nested container behavior

✅ Summary & What’s Next

You now have a solid understanding of:

• The strengths of Flexbox and CSS Grid

• How and when to use each

• Responsive layout patterns (auto-fit, auto-fill)

• Combining layout systems in real UI

• Media query strategies and debugging tips

In the next post, we’ll explore Responsive Web Design & Media Queries (Mobile-First Approach) — how to write flexible CSS, fluid layouts, and adapt your UI at breakpoints.

Stay tuned for “Responsive Web Design & Media Queries (Mobile-First Approach)”.