Utilice auto-fillo auto-fitcomo número de repetición de la repeat()notación.
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
Cuando auto-fillse da como número de repetición, si el contenedor de cuadrícula tiene un tamaño definido o tamaño máximo en el eje relevante, entonces el número de repeticiones es el entero positivo más grande posible que no hace que la cuadrícula se desborde de su contenedor de cuadrícula.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
La cuadrícula repetirá tantas pistas como sea posible sin desbordar su contenedor.
En este caso, dado el ejemplo anterior (ver imagen) , solo 5 pistas pueden caber en el contenedor de rejilla sin desbordarse. Solo hay 4 elementos en nuestra cuadrícula, por lo que se crea un quinto como una pista vacía dentro del espacio restante.
El resto del espacio restante, pista # 6, finaliza la cuadrícula explícita. Esto significa que no había suficiente espacio para colocar otra pista.
auto-fit
La auto-fitpalabra clave se comporta igual que auto-fill, excepto que después del algoritmo de ubicación de elementos de la cuadrícula, las pistas vacías dentro del espacio restante se contraerán a 0.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
La cuadrícula seguirá repitiendo tantas pistas como sea posible sin desbordar su contenedor, pero las pistas vacías se contraerán a 0.
Una pista colapsada se considera que tiene una función de tamaño de pista fija de 0px.
A diferencia del auto-fillejemplo de la imagen, la quinta pista vacía se contrae, terminando la cuadrícula explícita justo después del cuarto elemento.
auto-fill vs auto-fit
La diferencia entre los dos se nota cuando minmax()se utiliza la función.
Úselo minmax(186px, 1fr)para clasificar los elementos de 186pxa 186pxmás una fracción del espacio sobrante en el contenedor de la cuadrícula.
Cuando se usa auto-fill, los elementos crecerán una vez que no haya espacio para colocar pistas vacías.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Cuando se usa auto-fit, los elementos crecerán para llenar el espacio restante porque todas las pistas vacías se contraen a 0px.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Patio de recreo:
Inspeccionar pistas de llenado automático
Inspección de pistas de ajuste automático
grid-template-columns: auto auto auto auto;funciona en este caso? =)