¿Cómo hacer que los elementos de la última fila consuman el espacio restante en CSS Grid?

¿Hay alguna forma de forzar a todos los elementos de la última fila, de una cuadrícula, a llenar la fila, sin importar cuántos sean?

No sé la cantidad de elementos que estarán en la cuadrícula, por lo que no puedo apuntarlos directamente. Traté de usargrid-auto-flow: dense, pero en realidad no está ayudando.

Esta es mi pregunta visualizada::

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>
 

Respuestas a la pregunta(3)

Su respuesta a la pregunta