Responsive con grid

Estrategias para lograr layouts que se adapten automáticamente a distintos tamaños de pantalla.

Media queries: permiten aplicar estilos CSS condicionales según el ancho de la pantalla.
@media (max-width: ...): se aplica cuando el ancho de la pantalla es menor o igual al valor indicado. Se suele usar para ajustar el diseño en pantallas pequeñas (ej: móviles).
@media (min-width: ...): se aplica cuando el ancho de la pantalla es mayor o igual al valor indicado. Se usa en enfoques mobile-first, donde se define primero el diseño para móvil y luego se añaden reglas para pantallas más grandes.
Uso de auto-fit y minmax() para crear cuadrículas fluidas que se adaptan sin necesidad de media queries, generando tantas columnas como quepan en el contenedor.
Uso de auto-fill: similar a auto-fit, pero mantiene huecos reservados para las columnas que no alcanzan a llenarse.
Combinación con grid-template-areas: permite reorganizar fácilmente el layout en función de breakpoints, cambiando la disposición de bloques enteros.
Unidades relativas (fr, %, auto, min-content, max-content) favorecen el comportamiento flexible en pantallas pequeñas.
Propiedades modernas como clamp() ayudan a fijar un ancho mínimo, ideal y máximo sin necesidad de múltiples media queries.

Ejemplo

Mueve el control de ancho del contenedor y cambia de técnica con el selector. auto-fit no necesita media queries, mientras que las otras dos opciones cambian la estructura en un punto de ruptura.

Selecciona técnica:

auto-fitmedia queriesgrid-template-areas

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

Edita el código o usa los selectores: el resultado cambia al instante.