Module 5 — Responsive Design: Flexbox, Grid & Media Queries

Learning Objectives

Understand principles of responsive design and mobile-first workflows.
Use Flexbox to build flexible 1D layouts for navbars, toolbars, cards and simple grids.
Use CSS Grid for complex 2D layouts and template areas.
Create responsive breakpoints with media queries and fluid units.
Debug layout issues using browser DevTools and layout inspection tools.

Key Terms & Definitions

Responsive Design: Designing layouts that adapt to different screen sizes and orientations.
Mobile-first: Design approach starting from small screens and scaling up with media queries.
Breakpoint: Viewport width where styles change via media queries.
Flexbox: CSS layout module for one-dimensional layouts — display:flex.
Main axis / Cross axis: Flexbox axes used for alignment (row/column).
justify-content: Flex property that aligns items along the main axis.
align-items: Flex property that aligns items along the cross axis.
flex-wrap: Allows flex items to wrap to multiple lines.
flex-basis: Initial main size of a flex item before remaining space is distributed.
flex-grow / flex-shrink: Control how items expand or shrink to fill space.
CSS Grid: Two-dimensional layout system using rows and columns.
Grid container: Element with display:grid that defines grid tracks.
Grid-template-columns/rows: Defines the track sizes for columns and rows.
Grid-gap / gap: Space between grid tracks.
Grid areas: Named regions of the grid using grid-template-areas.
minmax(): Grid function to set a minimum and maximum size for tracks.
auto-fit / auto-fill: Functions used with minmax() for responsive grids.
Fraction unit (fr): Grid unit representing a fraction of available space.
Fluid layout: Uses percentages, viewport units and flexible sizing instead of fixed pixels.
Container queries: Newer feature (not widely supported) to query container size (not covered here in depth).
Aspect ratio: Maintain proportional dimensions using aspect-ratio where supported.
Viewport units: Units relative to the viewport: vw, vh, vmin, vmax.
Media Query: CSS rule applied only when conditions about viewport are met (e.g., max-width).
Breakpoint strategy: Choosing where to place breakpoints: content-driven, not device-driven.
Responsive images: Using srcset and picture to serve appropriate image sizes.
Progressive enhancement: Start simple, layer in advanced layout features for capable browsers.

Detailed Theory — Flexbox, Grid & Media Queries

5.1 Principles of responsive design

Responsive design ensures content is readable and usable on any device. The mobile-first approach sets base styles for small screens and uses media queries to enhance layouts for larger viewports. Use fluid units (%, rem, vw) and avoid fixed widths when possible.

5.2 Flexbox fundamentals

Flexbox excels at arranging items in a row or column. To create a flex container:

.row { display: flex; flex-wrap: wrap; align-items: center; }

Key properties:

flex-direction — row or column.
justify-content — space-between, center, flex-start, flex-end.
align-items — center, stretch, baseline.
flex shorthand — flex: 1 0 200px (grow shrink basis).

Example: building a responsive navbar where items wrap into a vertical stack on small screens.

5.3 Flexbox techniques and patterns

Use flex for card lists, navbars, footers and small layout components. For equal-height columns, make the container display:flex and allow items to grow. Beware of using percentage widths inside flex items without proper flex-basis or min-width constraints.

5.4 CSS Grid fundamentals

Grid provides two-dimensional control. Define container as grid and set template columns/rows:

.grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 16px; }

Use grid-template-areas for readable layouts:

.layout { grid-template-areas: "header header"
                              "sidebar main"
                              "footer footer"; }
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

5.5 Responsive Grid strategies

Combine repeat(), minmax() and auto-fit/auto-fill to auto-flow responsive columns:

.gallery { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

This creates as many columns as fit the container, each at least 220px wide and flexible above that.

5.6 Media queries and breakpoint strategy

Use content-driven breakpoints: inspect when layout breaks and add a query there. Typical queries:

@media (min-width: 720px) { /* tablet+ rules */ }
@media (min-width: 1024px) { /* desktop rules */ }

Prefer min-width (mobile-first) and avoid targeting devices by name. Test using DevTools and responsive resizing.

5.7 Combining Flexbox and Grid

Use Grid for overall page layout and Flexbox for local component alignment. Example: a Grid with header/sidebar/main, while buttons inside header use Flexbox for alignment.

5.8 Responsive images and performance

Use srcset to provide multiple resolutions and let the browser choose. Always set width/height or use CSS to reserve space and avoid layout shifts.

<img src="small.jpg" srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" sizes="(max-width:600px) 100vw, 50vw" alt="...">

5.9 Debugging layout problems

Use DevTools to inspect the grid/flex overlays, check computed sizes, and test different values live. Look for unexpected margins, min-widths, or overflow caused by fixed-size content.

Interactive Playground — Flexbox & Grid Try-it

Edit the HTML/CSS and press Run to preview a responsive layout. Use the device toolbar to test breakpoints.

Editor (HTML + CSS)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Flex & Grid Demo</title><style>
body{font-family:system-ui,Arial;padding:18px}
.container{display:grid;grid-template-columns:1fr;gap:12px}
.header{background:#111;color:#fff;padding:12px;border-radius:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{background:#fff;color:#111;padding:12px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.flex-row{display:flex;gap:8px;align-items:center}
</style></head>
<body>
  <div class="container">
    <div class="header flex-row"><h2 style="margin:0;flex:1">Gallery</h2><button>Action</button></div>
    <div class="cards">
      <div class="card"><h3>Item 1</h3><p>Description</p></div>
      <div class="card"><h3>Item 2</h3><p>Description</p></div>
      <div class="card"><h3>Item 3</h3><p>Description</p></div>
      <div class="card"><h3>Item 4</h3><p>Description</p></div>
    </div>
  </div>
</body>
</html>

Preview

Practical Labs — Step-by-step

Lab 1 — Build a responsive card grid

Create gallery.html with a grid of product cards using repeat(auto-fit, minmax(...)).
Ensure cards have consistent heights and images maintain aspect ratio. Test the grid by resizing the browser.

Lab 2 — Responsive navbar using Flexbox

Create a header with logo on the left and navigation links on the right. Use Flexbox to space items and wrap on small screens.
Create a hamburger toggle using JS to show/hide links on mobile (keep it accessible).

Lab 3 — Complex page layout using Grid

Create a page with header, sidebar, main content and footer using CSS Grid and grid-template-areas.
Change the grid on larger screens to place sidebar left and content right; on small screens stack them vertically.

Exercises for Mastery

Refactor an existing page to use Grid for layout and Flexbox for header/buttons. Measure improvement in code clarity.
Implement responsive images in a gallery with srcset and observe network requests in DevTools to confirm correct image sizes are loaded.
Design a content-driven breakpoint set: identify where content breaks and add media queries at those widths (document your choices).

Faith Corner

"Commit your work to the Lord, and your plans will be established." — Proverbs 16:3. Be patient with layout problems — systematic debugging reveals the solution.

ARISE AFRICA NETWORK VOCATIONAL COURSE (AAN)