Modern CSS Layouts: Container Queries, Subgrid, and the End of Breakpoints-as-a-Lifestyle

Why container-first beats viewport-first

Responsive design used to mean “at 768px do X.” That breaks in component-based systems where the same card can appear in a sidebar, a modal, or a 3-column grid. Container queries let components respond to their own available space.

Container queries: a practical recipe

1. Mark a parent as a container.
2. Query the container width to adjust component layout.

.card-wrapper {  container-type: inline-size;}.card {  display: grid;  gap: 1rem;}@container (min-width: 520px) {  .card {    grid-template-columns: 160px 1fr;    align-items: start;  }}

Benefit: the card adapts anywhere it’s placed without extra page-level breakpoints.

Subgrid: consistent alignment across nested layouts

Subgrid helps when you want child items to align to a parent grid’s columns (e.g., product cards aligning titles and prices across rows). Instead of manually repeating column definitions, the child uses the parent’s grid track definitions.

When to use subgrid

• Repeated components that must align across a grid
• Editorial layouts with consistent baselines and gutters
• Complex forms where labels/inputs need global alignment

Layout patterns you can standardize

• Bento grid: varied tile sizes, consistent gaps, responsive rearrangement.
• Sidebar layout: switch from stacked to 2-column based on container width (not viewport).
• Card media layout: side-by-side on wide containers, stacked on narrow.

Progressive enhancement approach

• Start with a solid single-column base.
• Layer container queries for richer layout.
• Keep a few global media queries for major page shifts (nav patterns, global typography scaling).

CSS layout checklist

•  Components respond to container width, not just viewport width
•  Spacing uses consistent tokens (gap, padding)
•  Media elements reserve space (aspect-ratio)
•  Layout shifts avoided during async content load