Para este séptimo ejemplo, combina algunos de los conceptos que ya aprendiste a fin de crear un diseño adaptable con elementos secundarios flexibles y ubicados de forma automática. Bastante bien. Los términos clave que debes recordar aquí son repeat, auto-(fit|fill) y minmax(), que recuerdas por la sigla RAM.
En conjunto, se ven así:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Estás usando repeat() de nuevo, pero esta vez estás usando la palabra clave auto-fit en lugar de un valor numérico explícito. Esto habilita la ubicación automática de estos elementos secundarios. Estos elementos secundarios tienen un valor mínimo base de 150px con un valor máximo de 1fr, lo que significa que en pantallas más pequeñas ocuparán el ancho completo de 1fr y, a medida que alcancen un ancho de 150px, comenzarán a fluir sobre la misma línea.
Con auto-fit, las pistas completamente vacías se contraerán y se convertirán en 0, y las pistas llenas aumentarán y ocuparán espacio. Sin embargo, si cambias esta opción a auto-fill, las pistas vacías ocuparán la misma cantidad de espacio que si se completaran:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
HTML
<div class="parent white">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
CSS
.parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}