CSS Grid: Uso de fr, minContent, maxContent, autofill y autofit
Clase 7 de 13 • Curso de CSS Grid Básico
Resumen
CSS tiene varias palabras claves que suelen resultar muy útiles al momento de crear código. Veamos algunas de ellas:
Palabras clave especiales para creación de código
- fr : es una unidad relativamente nueva de medida especial de CSS Grid para darle ancho o alto a filas y columnas. 1fr representa una fracción del total de columnas o filas.
- min-content : ajusta el ancho de la celda lo mínimo posible sin romper su contenido.
- max-content : ajusta el ancho de la celda lo máximo posible para mostrar su contenido.
- auto-fill : logra que la grilla ocupe el 100% del espacio que tiene. Agrega columnas “fantasma” que rellenan el espacio sobrante del contenedor.
- auto-fit : ensancha las columnas para que ocupen todo el espacio del contenedor.
- auto-fill y auto-fit: ayudan a la grilla a ocupar el 100% del espacio disponible.
Cómo funcionan las palabras clave especiales
Veamos cómo funcionan estas keywords directamente en el código:
Primero, creamos un index.html con cuatro contenedores. Llevando el 3 y 4 distintas mezclas y espaciados.
<div class="contenedor">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3 3 33 3 3 3 3 3 3 3 3 3 3 33333 3333 333</div>
<div class="item item-4">444 4 4 4 4 4 4 4 4 4444 4444 44 4 4 4 4</div>
</div>
Luego aplicamos en los estilos:
Cuatro columnas de 100px sin especificar su alto.
.contenedor {
border: 5px solid #e1bee7;
background-color: #fff1ff;
display: grid;
grid-template-columns: repeat(4, 100px);
}
.item {
border: 5px solid #00bcd4;
font-size: 2rem;
}
En el navegador observamos que todas las columnas tienen el mismo ancho.
Piensa en las columnas como fracciones: si la grilla tiene 4 columnas, todas del mismo ancho, cada columna es igual a una fracción de la grilla.
Entonces, si en vez de colocar 100px de ancho, colocamos 1fr, logramos que cada columna siempre tenga el mismo ancho, ocupando siempre el 100% del ancho de la pantalla.
grid-template-columns: repeat(4, 1fr);

También podemos agregar distintos valores proporcionales al ancho de la columa. Por ejemplo, podemos hacer que una columna sea del doble de ancho de la anterior, y así con las demás.
grid-template-columns: 1fr 3fr 1fr 2fr;

Podemos cambiar una sola columna para que use el ancho mínimo que ocupa su contenido con min-content. De esta manera, al redimensionar la pantalla, el ancho de las demás columnas cambiará, pero el de la modificada no, porque ya ocupa el ancho mínimo desde el principio.
grid-template-columns: 1fr 3fr min-content 2fr;

Lo mismo pasa si queremos que la celda use el ancho máximo. Tomará el espacio necesario para mostrar su contenido en una sola línea.
grid-template-columns: 1fr 3fr max-content 2fr;

Para explicar el auto-fill y auto-fit, creemos otro contenedor.
<div class="contenedor-1">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
<div class="contenedor-2">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
Aplicamos estilos:
.contenedor-1 {
border: 5px solid #e1bee7;
background-color: #fff1ff;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.contenedor-2 {
border: 5px solid #e1bee7;
background-color: #fff1ff;
display: grid;
margin-top: 100px;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
Para que funcione, es necesario especificar el ancho mínimo y máximo del contenedor. En este caso queremos que comience desde 100px y crezca hasta llegar a una fracción de la grilla. No colocamos valores absolutos para que el contenedor siempre se ajuste al ancho de la pantalla.


Como vemos en la grilla con auto-fit las columnas se expanden hasta ocupar todo el ancho. Mientras que en auto-fill se agregan columnas fantasma para rellenar el espacio faltante. Sin embargo, al reducir el tamaño vuelven a ocupar el mismo espacio mínimo.
Has aprendido bastante sobre CSS Grid, ¡ahora vamos a implementarlo a un proyecto!
Contribución creada por: José Miguel Ventimilla (Platzi Contributor).