El elemento de la cuadrícula se contrae en un tamaño de pantalla más pequeño

¿Por qué 4 no sube por debajo de 3?

Porque los puntos 1 y 2 se han grid-column: span 2aplicado. Lo que significa que ya hay dos columnas disponibles y que el elemento 4 no tiene ninguna razón para pasar a la siguiente fila.

Haga que todas las columnas tomen una fila completa.

Agregue esto a su código:

@media (max-width: 600px) {
  .container > div {
    grid-column: span 1 !important; (you need to override the span 2 rules higher up)
  }
}

demo revisada

Y el motivo del colapso del elemento 4 no tiene nada que ver con su consulta de medios.

Si observa de cerca, encontrará que el elemento 4 se colapsa cuando el ancho de la pantalla es de 640 px. Esto es antes de que se alcance la consulta de medios de 600 px.

Aquí está el problema:

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))

Con un ancho de pantalla de 640 px, el elemento 3 alcanza los 280 px, el ancho mínimo que puede tener.

Como resultado, el elemento 4 se envía a la segunda columna, que fue creada por grid-column: span 2en sus hermanos.

Sin embargo, en este tamaño de pantalla, solo hay espacio para una columna explícita (es decir, definida). La segunda columna debe generarse en la cuadrícula implícita (es decir, no definida).

Y, debido a que el valor predeterminado de grid-auto-columnsla propiedad que dimensiona las columnas implícitas es auto, la segunda columna toma el ancho de la celda más ancha.