Primeros pasos con CSS-Grid

Hasta ahora utilizábamos todo tipo de recursos para conseguir la maqueta perfecta: al principio lo hacíamos con tablas, después pasamos por float y clear both, o por las posiciones absolutas y relativas… por mencionar algunas de las soluciones que teníamos a nuestro alcance.

Sin embargo, todo evoluciona y esos tiempos oscuros se han terminado: CSS-Grid nos permite disponer los elementos en filas y columnas al mismo tiempo, manejando dos dimensiones a la vez. Así, con una única regla de CSS en el elemento contenedor, es posible crear un grid con todos sus ítems hijos.

¿Supone esto un solapamiento con Flexbox o que sustituya este sistema? Lo cierto es que no, que deberían convivir. Con CSS-Grid lo que hacemos es generar la cuadrícula y, una vez creada, con Flexbox podemos alinear los elementos como sea necesario. Flexbox se encarga del flujo del documento y Grid de generar, alinear y ordenar las filas y columnas.

Es importante destacar que su compatibilidad es bastante buena y se encuentra ya muy estandarizada, pudiendo utilizarse en casi todos los navegadores actuales.

Con todo esto, creo que CSS-Grid puede convertirse, junto con Flexbox, en el nuevo estándar para la maquetación web. Y por eso en este artículo he querido recopilar los conceptos más básicos para familiarizarse con este sistema.

Composición y terminología básica

Grid container
La base de todo, ya que es el elemento padre que hace de contenedor y al que se le aplica display:grid para generar la rejilla con sus ítems hijos directos.

Grid item
Cada uno de los elementos secundarios directos del grid container (el hijo).

Grid lines
Son las líneas horizontales y/o verticales que forman la cuadrícula del grid.

Podemos hacer referencia a ella por número (empezando en el 1) o por nombre. Si eliges esta segunda opción siempre debe de ir entre […] [nombre-de-la-línea]. Gracias a grid lines también podemos posicionar los elementos y darles tamaño.

.gridLines {
  display: grid;
  grid-template-columns: [col-1] 1fr [col-2] 2fr;
}

Grid tracks
Los espacios que hay entre dos grid lines. Pueden ser de columnas o filas (es importante tener en cuenta que no es la celda en sí). Esto nos permite asignar un nombre para un grid row o grid column y definir la altura de un grid column o la anchura de una grid row.

En el ejemplo del código anterior, podemos ver definido un grid-column (grid-template-columns) con el nombre de una de sus grid-lines llamada [col-1] y su tamaño (grid-track) de 1fr.

Grid cell
Se refiere a la intersección de un grid row y un grid column o, lo que es lo mismo, el espacio entre 4 grid lines. Es la unidad mas pequeña para colocar un grid item.

Grid area
El espacio del grid que queda rodeado por 4 grid lines, son varias grid cell juntas.

Propiedades y utilidades

Display
Como comentábamos al principio, se debe de aplicar al elemento contenedor de todos los ítems que van a formar la cuadrícula.

.container {
  display: grid | inline-grid;
}

grid-templates-columns/grid-templates-rows
Nos permite definir el número de elementos (columnas o filas) y su tamaño. Va separado por espacios.

.container {
  display: grid;
  grid-template-columns: [col-1] 1fr [col-2] 2fr;
  grid-template-rows: [col-1] 1fr [col-2] 2fr;
}

De forma abreviada hablamos de grid-templates.

grid-templates-areas
Especifica el espacio y la posición que va a contener el área que hemos seleccionado para ello.

.container {
  display: grid;
  grid-template-areas:  “head head”
                        “content”
                        “footer footer”;
  grid-template-columns: [col-1] 1fr [col-2] 2fr;
  grid-template-rows: [col-1] 1fr [col-2] 2fr;
}

.item-a {
  grid-area: head;
}

.item-b {
  grid-area: content;
}

.item-c {
  grid-area: footer;
}

Grid gaps
Nos sirve para establecer una separación entre grid items, es el espacio entre tracks.

grid-row-gap: 10px
grid-column-gap: 30px

/* Su escritura abreviada sería gap: <grid-row-gap> <grid-column-gap> */
grid-gap: 10px 30px

Grid-auto-columns/grid-auto-rows implícito
Con esta propiedad podemos modificar las columnas de los grid-tracks auto generados (implícitas). Las pistas implícitas se crean cuando hay más elementos de cuadrícula que celdas indicadas, como en este ejemplo grid-auto-rows/columns-> → nos referimos a las filas/columnas creadas de manera implícitas.

Grid-auto-flow
Con esta propiedad indicamos el flujo en el que van ir los ítems hijos.

Align-content/justify-items
En grid también podemos utilizar align-content y justify-items de forma parecida a como lo hacemos en Flexbox con justify-content y align-items.

.container {
  justify-items: start | end | center | stretch;
}

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

Grid-column-start/end grid-row-start/end
Determina la ubicación de un elemento en la cuadrícula haciendo referencia a grid-lines.

Grid-area
Asigna un nombre a un elemento para que pueda ser referenciado por una plantilla creada con la propiedad grid-template-areas.

Justify-self
Con esta propiedad podemos alinear el contenido que hay dentro de una celda, a lo largo del eje x.

.item {
  justify-self: start | end | center | stretch;
}

Order
El ítem seleccionado queda ordenado en una posición especifica. Es el mismo concepto que en Flexbox.

Unidad fr

La fracción es un nuevo método para establecer dimensiones que solo funciona en Grid. Se encarga de distribuir el espacio una vez dispuestos los elementos. Puede combinar con gap o anchos de tamaño fijo o %: grid-template-columns: 2fr 250px.

Palabras clave tamaños

min-content → el contenedor será tan pequeño como sea la palabra mas grande.

max-content → el contenedor será tan grande como toda la frase.

fit-content() → es igual que max-content, pero en este caso su contenido tiene como límite el valor que se le dé a la función.

auto-fit → llena el grid con tracks con un mínimo y un máximo, sin completar el espacio cuando no es posible (deja tracks vacías).

auto-fill → elimina los grid tracks vacíos. No deja espacios.

Son palabras clave muy potentes para combinarlas con las funciones, sobre todo con repeat():

• grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
• grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));

Funciones
Ahora que ya tenemos los conceptos y términos claros, veamos algunas funciones básicas de gran utilidad:

repeat(): Repite tantos elementos como le indiques, con el tamaño indicado. Un ejemplo:

/* sin repeat */
.class {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr; /* 👈 */
  gap: 5px;
}

/* con repeat */
.class {
  display: grid;
  grid-template-columns: repeat(3, 2fr); /* 👈 */
  gap: 5px;
}

Puede convivir con otro valor de tamaño que no se repita → grid-template-columns: repeat(2, 1fr) 2fr; Se puede asignar tanto a columns como a rows y se puede indicar dentro la de la función el nombre de las grid lines, y así crear patrones.

minmax() Define un rango de tamaño tanto mínimo como máximo para el tamaño del track. Hay que tener en cuenta que solo se puede emplear en Grid. Ejemplo de minmax combinada con repeat().

grid-template-columns:
  [start]
  repeat(4,
      [col-lg-start] minmax(80px, 1fr)
      [col-lg-end col-md-start] minmax(40px, 1fr)
      [col-md-end col-sm-start] minmax(20px, 1fr)
  )
  [end]
;

Recursos

Os compartimos algunas herramientas para empezar a utilizar CSS-Grid y sacarle todo el partido.
Tanto Chrome como Firefox nos muestran en sus devTools de una manera muy visual casi todas la propiedades de grid layout.

También contamos con distintos generadores de grid layouts (sobre todo para poder echar un vistazo a cómo se comporta todo y cacharrear con ello):

• Grid Layoutit
• CSS Grid Generator
• Griddy
• Cssgr
  

Y si has llegado hasta aquí y te interesa profundizar todavía más en las bases y alcance de CSS Grid, te recomiendo que consultes este artículo en CSS-Tricks o este otro de MDN.