CSS3 Layouts & Responsive Design

Learning Objectives

By the end of this module, you will be able to:

Aligned to: CO2 — Design and develop well-structured, standards-compliant web pages using HTML5 and CSS3.  ·  CO5 — Build responsive, accessible user interfaces that adapt across devices and screen sizes. Builds directly on CSS3 Fundamentals (selectors, cascade, box model, color, typography).

2.1 Flexbox

A one-dimensional layout system — arranges items along a single row or column. The go-to tool for laying out the contents of a component: a navbar, a row of cards, a set of buttons, or centering content.

Container properties

Turning on Flexbox is a single declaration on the parent element; every property below is then set on that same parent to control how its children are arranged.

Item properties

These are set on the flex items (the children) rather than the container.

2.2 CSS Grid

A two-dimensional layout system — lays items out along rows and columns at the same time. The natural choice for page-level and section-level layout, while Flexbox remains the natural choice for arranging items within a single component.

Defining tracks

.page {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;                            /* row + column gap */
}

The fr unit represents a fraction of the remaining free space in the grid container — trivial to write flexible, equal-width (or proportionally weighted) columns. minmax(150px, 1fr) lets a track grow but never shrink below a floor size — a common technique for responsive card grids without a single media query.

Placing items with named areas

Instead of positioning items by row/column line numbers, a grid can be given named regions on the container, and each child is simply assigned to a region name — a visual, ASCII-art-like syntax that makes the overall page structure easy to read directly from the CSS.

Flexbox vs. Grid — choosing the right tool

In practice, most real pages use both together: Grid for the overall page skeleton, and Flexbox inside individual components placed within that grid.

2.3 Positioning

The position property controls how an element is placed relative to the normal document flow, its ancestors, or the viewport.

2.4 CSS Variables (Custom Properties)

Let a value be defined once and reused throughout a stylesheet. Declared with a double-hyphen prefix, typically on :root so they're available globally.

:root {
  --primary-color: #1572B6;
  --text-color: #0A1B2E;
  --spacing-md: 1rem;
  --radius: 8px;
}

.card {
  color: var(--text-color);
  border-radius: var(--radius, 4px); /* 4px fallback if undefined */
  padding: var(--spacing-md);
}

Unlike Sass or LESS variables, CSS custom properties are a genuine part of the CSS language: resolved live in the browser, readable/updatable from JavaScript, and can be re-declared at a narrower scope — inside a class, a component, or a media query — to override the global value only where needed. This makes them the standard technique for theming, including light/dark mode.

2.5 CSS Transitions and Animations

transition animates a property smoothly between two values whenever that value changes — most commonly on :hover or :focus. @keyframes go further: a multi-step sequence that can run independently of user interaction, loop, and reverse.

Laboratory Activity 1

Responsive Landing Page: Layout & Motion  ·  index.html + styles.css  ·  20 points

2.6 Mobile-First Approach

Write the base CSS for the smallest, simplest screen first, then progressively layer on enhancements for larger screens using min-width media queries.

2.7 Fluid Layouts

Avoid fixed pixel widths for major containers — size them with percentages, max-width, and modern CSS functions so the layout reflows naturally.

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

2.8 Responsive Images

The baseline rule for any image in a fluid layout: prevent it from overflowing its container.

img {
  max-width: 100%;
  height: auto;
}

srcset and sizes

srcset lets the browser choose the best-resolution image file for the user's screen size and pixel density; sizes tells the browser how wide the image will actually be displayed at different viewport widths.

The <picture> element and object-fit

<picture> goes further than srcset: it can swap in an entirely different image file for art direction (a tighter crop on mobile) or serve a modern format like WebP with a fallback.

<picture>
  <source media="(min-width: 768px)" srcset="hero-wide.webp">
  <source srcset="hero-tall.webp">
  <img src="hero-tall.jpg" alt="Product hero shot">
</picture>

2.9 Media Queries

A media query applies a block of CSS only when a condition about the viewport (or device) is true.

@media (min-width: 768px) {
  .sidebar { display: block; }
}

While not a strict standard, most teams converge on a similar set of reference breakpoints:

2.10 Introduction to Bootstrap 5

A free, open-source CSS framework: a responsive grid system, prebuilt components, and utility classes — assemble a consistent, responsive interface quickly without writing custom CSS from scratch.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

The grid system

Bootstrap's grid follows a consistent container → row → column nesting pattern, built on a 12-column system. .container centers content with a responsive max-width, while .container-fluid spans the full viewport width. Responsive column classes like col-md-6 change a column's width at each breakpoint — e.g. stacking full-width on mobile, side-by-side from md up — without a single custom media query.

Components & utility classes

Laboratory Activity 2

Make It Responsive, Then Rebuild in Bootstrap 5  ·  20 points

Part 1 — Add a mobile-first stylesheet

Part 2 — Rebuild in Bootstrap 5

Formative Assessment

14 quick recall & application questions covering both parts of this module

1. Which display value creates a one-dimensional Flexbox layout?
2. Which Flexbox container property controls alignment along the cross axis?
3. Which CSS Grid unit represents a fraction of the remaining free space in the grid?
4. Which property defines named layout regions in a Grid container?
5. Which position value removes an element from normal flow but keeps it fixed relative to the viewport even while scrolling?
6. Which position value behaves like relative until a scroll threshold is reached, then like fixed?
7. How is a global CSS custom property declared?
8. Which function reads a CSS variable, with an optional fallback value?
9. Which at-rule defines an animation's keyframe steps?
10. Name the two parts every transition declaration must include, at minimum.
11. True or False: mobile-first CSS primarily relies on max-width media queries.
12. Which HTML attribute lets the browser automatically choose the best image resolution for the viewport?
13. Which Bootstrap 5 class, applied to a column's parent, creates a responsive 12-column grid layout?
14. Which Bootstrap utility hides an element by default but displays it from the md breakpoint upward?

Key Takeaways

CSS3 Layouts & Responsive Design: Flexbox · Grid · Positioning · Variables · Transitions & Animations · Mobile-First · Fluid Layouts · Responsive Images · Media Queries · Bootstrap 5

1. Flexbox handles one-dimensional, component-level layout; CSS Grid handles two-dimensional, page-level layout — most real interfaces use both together.
2. Positioning (static, relative, absolute, fixed, sticky) gives fine-grained control for sticky headers, fixed UI elements, and precisely placed overlays or badges.
3. CSS custom properties centralize a design's colors, spacing, and other repeated values, making large stylesheets far easier to maintain and theme.
4. Transitions and keyframe animations add polish and communicate state changes clearly to users, without requiring JavaScript for simple cases.
5. Mobile-first design, fluid layouts, responsive images, and media queries combine to produce a page that works well on any device, from a small phone to a large desktop monitor.
6. Bootstrap 5 trades a degree of fine-grained design control for speed and consistency — a strong choice for prototypes and time-boxed projects, while a hand-rolled system offers more control over a unique visual identity.
7. Together, this module completes the core front-end layout toolkit and sets up the next lesson's introduction to JavaScript, which adds interactivity on top of these layouts.

References

Course resources for this topic