Responsive Layouts

Most responsive layouts are variations on four patterns.

1. Stack on small, columns on large

1
2
3
4
5
6

<style>
  .row { display: grid; gap: 10px; }
  .row > div { background: #d0e8f2; padding: 14px; border: 1px solid #1a5276; }
  @media (min-width: 420px) { .row { grid-template-columns: 2fr 1fr; } }
</style>
<div class="row"><div>Main content</div><div>Sidebar</div></div>

On narrow screens the sidebar sits under the main content. When there is room, it goes to the side.

2. Cards that reflow by themselves

1

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }

No breakpoints. See auto-fit and auto-fill.

3. Change the navigation

On a phone, a row of ten links does not fit. Common options are a stacked list, a collapsed menu button or a horizontally scrollable row.

1
2
3
4
5
6
7
8
9

<style>
  nav { display: flex; flex-direction: column; background: #1a5276; }
  nav a { color: #fff; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid #ffffff33; }
  @media (min-width: 420px) {
    nav { flex-direction: row; }
    nav a { border-bottom: 0; }
  }
</style>
<nav><a href="#">Home</a><a href="#">Shop</a><a href="#">Journal</a><a href="#">About</a></nav>

4. Limit the width on large screens

Text running across a 2000px screen is hard to read. Center the content in a container:

1
2
3
4

.container {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

That one rule leaves a 1rem gutter on each side on small screens and caps the width at 70rem on large ones.

What to avoid

• Fixed pixel widths on large containers.
• Hiding important content on phones. Rearrange it instead.
• Horizontal scrolling of the whole page. Test at 320px.