Container Query min-width: 1024px — Three-Column Grid

min-width: 1024px — Container-Aware Desktop Layout

1024px is the historical "small desktop" threshold. As a container query it means the host has enough room for three columns of meaningful content (~330px each plus gaps).

The CSS

.feature-host {
  container-type: inline-size;
  container-name: features;
}

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

@container features (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container features (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

When to Choose 1024px Over 960px or 1100px

• <960px: a tight three-column grid produces ~280px columns — fine for icons + short labels but cramped for cards.
• 1024px: comfortable for cards with image, title, and ~3 lines of body copy.
• >1100px: you start to lose the rationale for capping at three columns; consider a 4-column tier above this.

Pairing with Container Query Units

Three-column grids on wide hosts also benefit from larger gaps and padding. Container query units make this fluid:

@container features (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2cqi, 2rem);
  }
  .feature-card {
    padding: clamp(1rem, 3cqi, 2rem);
  }
}

This way a 1024px host gets ~20px padding while a 1600px host gets ~32px — without writing a fourth breakpoint.

Don't Stop at Three

For very wide hosts you can stack one more rule:

@container features (min-width: 1400px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}