Galería de imágenes con CSS Grid que se adapta sola

Una galería de imágenes con CSS Grid que se reacomoda sola a cualquier ancho de pantalla, sin una sola media query, con miniaturas del mismo tamaño aunque las fotos originales no lo sean.

El código

<ul class="galeria">
  <li><img src="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-5.jpg" alt="Placa número 1" width="640" height="420"></li>
  <li><img src="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-zero-2-w.jpg" alt="Placa número 2" width="640" height="420"></li>
  <li><img src="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-5.jpg" alt="Placa número 3" width="640" height="420"></li>
  <li><img src="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-zero-2-w.jpg" alt="Placa número 4" width="640" height="420"></li>
  <li><img src="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-5.jpg" alt="Placa número 5" width="640" height="420"></li>
  <li><img src="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-zero-2-w.jpg" alt="Placa número 6" width="640" height="420"></li>
</ul>

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 0;
  list-style: none;
}
.galeria img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

En un marco de 720 píxeles salen 3 columnas y cada miniatura es cuadrada (comprobado en los tres navegadores), aunque las fotos miden 640 × 420. Ábrelo en el editor y cambia el ancho: las columnas se reacomodan.

Cómo funciona

• repeat(auto-fill, minmax(180px, 1fr)) crea tantas columnas como quepan de al menos 180 píxeles, y reparte el sobrante entre ellas.
• aspect-ratio: 1 hace la imagen cuadrada, y object-fit: cover la recorta para llenar el cuadro sin deformarla, como una miniatura de Instagram. Con contain se vería entera, con franjas vacías.
• La galería es una lista (ul): un lector de pantalla anuncia «lista de 6 elementos», que ya es información útil. Cada imagen lleva su alt.

auto-fill o auto-fit

<p>auto-fill</p>
<div class="g fill"><div>1</div><div>2</div></div>
<p>auto-fit</p>
<div class="g fit"><div>1</div><div>2</div></div>

body { font-family: system-ui, sans-serif; }
.g { display: grid; gap: 8px; margin-bottom: 12px; }
.fill { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.fit  { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.g div { padding: 16px; background: #1e64af; color: white; border-radius: 6px; }

Solo se nota cuando hay menos elementos que columnas. auto-fill deja creadas las columnas vacías, así que los dos elementos conservan su tamaño de miniatura; auto-fit las colapsa, y los dos se estiran hasta llenar el ancho. Para una galería, auto-fill suele quedar mejor; para una fila de tarjetas que debe llenar el espacio, auto-fit.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.