Container Query min-width: 768px — Two-Column Grid

min-width: 768px — The Container-Aware "Tablet" Breakpoint

768px is etched into front-end muscle memory because it matches the iPad Mini portrait width. Translating it to a container query gives you the same intent — "I have tablet-class space" — without binding the rule to the viewport.

The CSS

.tile-host {
  container-type: inline-size;
}

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

@container (min-width: 768px) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

Why This Beats @media (min-width: 768px)

Imagine the same tile grid appearing inside:

1. A full-width landing page
2. A 50% modal
3. A 33% sidebar widget

A media query at 768px would show two columns in all three when the viewport is wide — even though the modal at 50% of 1440px is only 720px wide and would feel cramped. The container query sizes itself to actual available space.

Bumping the Gap with the Switch

Going from one column to two is a good moment to also widen the gap. Single-column lists tolerate tight gaps (~12-16px) because items sit edge-to-edge horizontally. Two-column grids feel cleaner with 20-24px gaps because the eye needs to differentiate columns.

Layering with Other Breakpoints

This rule works as the middle layer of a three-tier system:

@container (min-width: 768px)  { /* 2 columns */ }
@container (min-width: 1024px) { /* 3 columns */ }
@container (min-width: 1280px) { /* 4 columns */ }

Each layer overrides the previous one for hosts that grow wider.