CSS Grid: Uso de fr, minContent, maxContent, autofill y autofit

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).