Responsive Layout

Module 3 · Section 6 of 7

Responsive Layout

The most useful responsive pattern is a container with a max-width, centred with auto margins:

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

Use this class on every section. Content stays readable at any viewport width without writing media queries for every component.

For two-column layouts, CSS Grid with a sensible minimum column width handles the breakpoint automatically:

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-6);
}

This is the pattern I use on the product grid on this platform. At large viewports it’s three columns. At small viewports it’s one. No media query required.