Adaptive Grid Layout with Container Queries

Adaptive Grid with Multiple Container Breakpoints

Container queries shine when you need a grid component that works in any context -- a narrow sidebar widget area, a medium panel, or a full-width section.

The CSS

.grid-container {
  container-type: inline-size;
  container-name: grid-area;
}

.adaptive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@container grid-area (min-width: 500px) {
  .adaptive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container grid-area (min-width: 800px) {
  .adaptive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Progressive Enhancement

The approach follows mobile-first principles within the container context:

1. Default (under 500px): Single column -- works in narrow sidebars and panels.
2. Medium (500px+): Two columns -- suitable for medium-width content areas.
3. Wide (800px+): Three columns -- takes advantage of generous horizontal space.

Why This Beats auto-fill

While grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) achieves something similar, container queries give you explicit control over exactly when columns change. This matters when you want specific column counts at specific widths for design consistency.

Combining with Gap Adjustments

You can also adjust gap sizes at each breakpoint for better visual rhythm:

@container grid-area (min-width: 800px) {
  .adaptive-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}