Generation STEM
Learning LibraryWebsite Development LibraryTeens

Responsive design: one page, every screen

The same page has to look right on a phone and a desktop. Responsive design makes one layout adapt — reflowing content at breakpoints instead of shipping separate sites.

The big idea

Responsive design uses flexible units and media-query breakpoints so a single layout rearranges itself to fit any screen width.

See it in code

1The basics

Responsive design starts with fluid units — sizes that flex. max-width: 100% lets a box shrink to fit whatever screen it's on, instead of a fixed pixel width that might overflow:

html
<style>
  .box {
    max-width: 100%;
    padding: 16px;
    background: #eef2ff;
    border-radius: 8px;
    text-align: center;
  }
</style>

<div class="box">This box fits any screen width.</div>
A box sized in fluid units, fitting the space it's given:

max-width: 100% means 'never wider than the space available'. Fluid units are the foundation — they bend instead of breaking.

2A step further

Grids can be fluid too. repeat(3, 1fr) makes three columns that share the space equally — 1fr is one fluid fraction of the row:

html
<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .box { padding: 16px; background: #eef2ff; border-radius: 8px; text-align: center; }
</style>

<div class="grid">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
</div>
Three fluid columns sharing the row with fr units:

The columns flex with the width — but there are always three, which gets cramped on a narrow phone. That's the problem a breakpoint solves.

3In our world

Now the fix: a breakpoint. The grid is one column by default (phone-friendly), and @media (min-width: 500px) switches to three columns once there's room. Resize the preview and watch it reflow:

html
<style>
  .grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .box { padding: 16px; background: #eef2ff; border-radius: 8px; text-align: center; }

  /* on wider screens, switch to three columns */
  @media (min-width: 500px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
  }
</style>

<div class="grid">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
</div>
A grid that stacks on narrow screens and spreads on wide ones:

The breakpoint is the key: below 500px the boxes stack (easy to read on a phone); at or above it, they spread into three columns. 1fr and repeat(3, 1fr) are fluid units — they share available space rather than using fixed pixel widths.

The same idea, everywhere

Designing for a range of conditions instead of one fixed target is a broad engineering habit: code that handles any input size, layouts that survive translation into longer languages, systems that scale from one user to millions. Responsive design is that mindset applied to screens.

Try it yourself

Add a second breakpoint at min-width: 800px that switches to a different column count. Then swap fixed widths for % or fr units elsewhere and notice how much more gracefully things resize.

The common mistake

Designing only for the width you happen to be on. A layout that's perfect on your laptop can be unusable on a phone. Test narrow and wide, use fluid units over fixed pixels, and add breakpoints where the design starts to break — 'mobile-first' means starting from the small screen.

What it unlocks

Responsive layouts build on CSS (flexbox and grid), style your HTML, and complete the toolkit alongside Tailwind.

Related concepts