Responsive layout foundations

Begin with a fluid single column

Let content use available space while maintaining a readable maximum.

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

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

Add columns only when the content has room, not because a particular device name appears in a design.

@media (min-width: 48rem) {
  .cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

Reflow acceptance

At 320 CSS pixels and 200% zoom, ordinary page layout should not require horizontal scrolling. Code and genuine data tables may scroll inside clearly bounded containers.

Exercise

Test at 320, 768, and 1440 pixels. Find the first width where content becomes uncomfortable, then place the media query there instead of copying a device breakpoint.