ModernCSSLayouts:HowSubgridandContainerQueriesChangedEverything

For nearly two decades, responsive web design relied on screen viewport dimensions via @media (max-width: ...). Today, container queries and CSS Subgrid provide a fundamentally more modular way to architect web interfaces.

The Power of Container Queries

A card component should adapt based on the width of the parent container it resides in—not the entire browser window:

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

Now the same component seamlessly renders as a vertical stack in a sidebar and as a horizontal banner in the main column.

Aligning Nested Items with CSS Subgrid

Prior to Subgrid, cards in adjacent grid columns could not align their internal headings or footers without rigid, fixed heights. grid-template-rows: subgrid allows child elements to inherit and lock into the parent grid's tracks:

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}