Grid
La rejilla grid-template-colums and rows repeat minmax grid-template

<< Flexibilidad a los items Posición items >>

Como hemos visto, flex nos ayuda muchísimo en el tema del posicionamiento, pero está pensado para estructuras de una sola dimensión, cuando queremos crear estructuras más complejas necesitamos algo más potente. En un sistema basado en un grid se define una cuadrícula a la que es posible darle un tamaño y posición.

La rejilla

Los elementos básicos de este nuevo esquema son los siguientes:

Contenedor: es el elemento padre, en su interior estarán los elementos (ítems)
Ítem: Cada uno de los hijos(elementos) que va a tener el contenedor en su interior.

    <div class="container">
        <div class="items item1">Celda 1</div>
        <div class="items item2">Celda 2</div>
        <div class="items item3">Celda 3</div>
        <div class="items item4">Celda 4</div>
   </div>

Podíamos haber puesto el valor inline-grid haciendo que la cuadrícula en lugar de ser en bloque sea en línea, de manera equivalente a si usáramos inline-block. Este valor nos condiciona a cómo se va a comportar la cuadrícula en el contenedor. Si usamos inline-grid la cuadrícula estará encima/debajo del container, pero si ponemos grid, la cuadrícula estará de izquierda/derecha en el container.

grid-template-colums and rows

El siguiente paso será configurar nuestra cuadrícula, es decir, utilizando las propiedades grid-template-columns y grid-template-rows, indicaremos las dimensiones de cada una de las celdas, diferenciando entre columnas y filas.

grid-template-columns: Nos permite establecer el tamaño de cada una de las columnas. Para ello, debemos separar por espacios el tamaño de cada columna pudiendo utilizar porcentajes (con respecto al contenedor grid), píxeles, auto, etc. o la unidad propia de grid llamada fr (fraction) que se refiere a fracciones del espacio disponible(restante) del grid. Ejemplo, una columna 2fr será el doble de ancha que una 1fr.
grid-template-rows: Nos permite establecer el tamaño de cada una de las filas.

Por ejemplo, si queremos crearnos una rejilla de 3x3 donde la columna del medio es el doble de ancha que las otras dos, y la primera fila y última tienen una altura de 40px dejando la altura de la fila del centro que se ajuste automáticamente al contenido (auto) sería:

.container{ 
     display: grid;
     grid-template-columns: 1fr 2fr 1fr; /* Otra opción para definir las columnas sería 25% 50% 25%*/
     grid-template-rows: 40px auto 40px;
}

Nota: Podemos combinar varias unidades diferentes, pudiendo utilizar píxeles (px), fracciones restantes (fr), porcentajes (%) de forma simultánea.

repeat

Si queremos repetir los valores de las columnas/filas, podemos utilizar el método repeat([num_veces], [valor o valores]), donde indicaríamos las veces que repetimos el valor que le indicamos. Si ponemos varios valores estaremos repitiendo los valores tantas veces como num_veces indiquemos. Veamos un ejemplo:

.container{ 
     display: grid;
     grid-template-columns: 100px repeat(2 50px) 100px; 
     grid-template-rows: repeat(2, 50px 60px);
}

Para la función repeat que hemos visto, además de decirle el número de veces que queremos repetir un valor, podemos usar las palabras reservadas como auto-fill y auto-fit. Con ellas, estaríamos diciéndole al navegador que rellene o ajuste el contenedor con múltiples elementos hijos dependiendo del tamaño del viewport (región visible del navegador). Si utilizamos por ejemplo repeat(auto-fill minmax(100px 1fr)), el navegador se encargará que los elementos hijos quepan en la primera línea con el tamaño mínimo y los que no entren entonces estarán en las siguientes filas del grid, de forma que se aproveche al máximo el contenedor consiguiendo un efecto similar que con los media queries. Los cambios los veremos sobre todo cuando el tamaño mínimo cambie (por ejemplo 50px, que no se llegue a llenar la primera fila). Con auto-fill veremos que se rellena y deja el resto del espacio libre, mientras que con auto-fit ajusta el tamaño para que cubran el tamaño máximo de la fila.

minmax

La función minmax(tam_min, tam_max) se puede utilizar para definir rangos flexibles de celda. Donde los valores que se le dan es el mínimo y el máximo del rango. Por ejemplo, grid-template-columns: minmax(100px auto); estaríamos diciendo que el tamaño mínimo sea 100px pero el máximo al ser auto, le estamos diciendo que se puede adaptar hasta alcanzar el tamaño total del contenido. Si en lugar de auto como máximo ponemos 500px, estaríamos diciendo que el tamaño de la celda será de 500px salvo que la ventana sea menor y por tanto el tamaño se reduzca hasta 100px (valor mínimo). Esta función puede ir dentro de la función repeat, por ejemplo: grid-template-columns: repeat(2 minmax(100px 500px))

grid-template

Como siempre, tenemos un atajo con la propiedad grid-template, que nos servirá para resumir en una sola propiedad los valores que le daríamos a grid-template-columns y grid-template-row. El formato sería: grid-template: grid-template-row/grid-template-columns.

Apartados de esta sección