¿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>