Creación de un Diseño Web Responsive con CSS Grid, Auto-fill y minmax()

Con la llegada de CSS Grid se ha simplificado realizar un grid responsive, Cuando antes había que controlar los media querys para si estabas en desktop, tablet o móvil, y en cada formato asignarle un porcentaje al ancho del item, en la actualidad es mucho más simple, sin media querys.

.galeria {
  display: grid;
  gap: 1rem;
  grid-auto-rows: 22rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

Esto se hace de forma totalmente automática. Lógicamente, si quieres que a los 960 píxeles justos haya un grid de 3 columnas, lo tendrás que poner con media-query, pero no merece la pena (salvo contados casos).