Layout & Responsive Design

Responsive design mindset

A responsive website adapts to screen size, input method, zoom level, content length, and user settings. It should not depend on one perfect desktop width.

Flexbox

Flexbox is best for one-dimensional alignment: rows, columns, navigation bars, button groups, and centreing content along a single axis.

CSS Grid

Grid is best for two-dimensional layout where rows and columns both matter. It is ideal for cards, dashboards, galleries, and page templates.

Breakpoints

A breakpoint should be based on when the content needs a new layout, not just on popular device sizes. If cards become cramped at 820px, that is a natural breakpoint. Start with a layout that works in a narrow space, then introduce columns as room becomes available.

Fluid sizing and intrinsic layout

Responsive interfaces should use the space they have without depending on one exact width. Functions such as min(), max(), and clamp() help containers, gaps, and padding adapt smoothly. Grid patterns such as repeat(auto-fit, minmax(240px, 1fr)) allow cards to wrap based on their minimum useful width.

Testing and overflow debugging

Resize the browser, use real content, zoom the page, and test on mobile widths. Placeholder text can hide layout problems. If horizontal scrolling appears, inspect which element is wider than the viewport. Common causes include fixed widths, long unbroken text, images without limits, and grid columns with an inflexible minimum size.

Example code

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 30px);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: clamp(32px, 6vw, 80px);
}

@media (max-width: 840px) {
  .feature-grid,
  .hero {
    grid-template-columns: 1fr;
  }
}

Applied example: an adaptive card grid

This layout remains one column when space is tight and creates additional columns only when each card can stay readable.

.container {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 3vw, 28px);
}

.service-card img {
  width: 100%;
  height: auto;
}

Guided example: how to approach this lesson

Use these steps as a practical build process. The goal is not just to read the concept, but to know exactly how to apply it in your own page.

Step 1: Build mobile first

Start with a single-column layout. This usually works well on small screens and creates a solid base.

Step 2: Add columns when there is room

Use media queries to introduce two or three columns only when content has enough space.

Step 3: Test real content

Long headings, longer paragraphs, and real image sizes reveal layout problems that placeholder content hides.

More examples

Compare these examples carefully. The improved version shows the kind of code pattern you should aim for when building your own project.

Too rigid

.container {
  width: 1200px;
}

.cards {
  display: grid;
  grid-template-columns: 400px 400px 400px;
}

This layout will break on small screens because the widths are fixed.

Responsive

.container {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

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

This adapts to the available space and avoids horizontal scrolling.

Before moving on

Use this checklist to make sure you understand the lesson well enough to apply it without copying blindly.

Does the layout work at phone width?
Do cards wrap before they become cramped?
Are containers fluid instead of fixed?
Is the design tested with longer text?

Common mistakes to avoid

Using fixed 1200px containers.
Choosing breakpoints only from device names.
Not testing with long real text.
Hiding important content on mobile.

Practice task

Make the service-card homepage responsive without hiding important content.

Required outcome

Use a centred fluid container that keeps space at the sides of narrow screens.
Build an adaptive service-card grid with Grid and minmax().
Use Flexbox for the navigation or button group.
Test at narrow, medium, and wide widths with long headings and confirm there is no horizontal scrolling.

Stretch goal: Use one content-driven media query to change the hero from one column to two columns.

Previous lesson Next lesson

What you’ll learn

Track this lesson