(1) whitespace im Quelltext verändert Rendering; (2) box höher als img.

[djr]

Ich will 4 Quadrate je nach viewport entweder als 4x1 Quadrat in einer Spalte oder als 2 Reihen mit je 2 Quadraten darstellen. Ganz vielleicht auch als Reihe mit 4 Quadraten nebeneinander.

.container {
  display: grid;
  grid-template-columns: repeat(var(--i, 1), 1fr);
}

@media (min-width: 20em) {
  .container {
    --i: 2;
  }
}
@media (min-width: 40em) {
  .container {
    --i: 4;
  }
}