¿Por qué grid-column-start y grid-column-end detienen el crecimiento de las otras filas cuando aumento el tamaño de la pantalla?

He visto esta misma pregunta en el siguiente enlace, pero creo que la respuesta no es satisfactoria.

https://stackoverflow.com/questions/50705273/css-grid-auto-fit-behaving-like-auto-fill-when-using-grid-column-start-end

Tengo seis divs dentro de un elemento div principal con una clase de “main”. Quiero que los seis divs sean responsivos en diferentes pantallas, así que he usado el siguiente CSS simplificado en el div principal.

.Main {
  display: grid;      
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: auto;      
}

Con el código anterior, cuando cambio el tamaño de la pantalla, encuentro que mis divs son responsivos muy bien.

Pero inmediatamente después de seleccionar el tercer div usando un selector pseudo a continuación, los otros cinco divs dejan de crecer de tamaño cuando cambio el tamaño de la pantalla.

Así es como estoy seleccionando el tercer div:

.Main div:nth-child(3){   
  grid-column-start: 1; 
  grid-column-end: -1;
}

¿Cuál podría ser el problema? Aún quiero un diseño responsivo.

“`html

<div class="Main">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="div5">Div 5</div>
<div id="div6">Div 6</div>
<div></div>
“`