Marc Semper Lloret
← CSS: diseño, maquetación y responsive

Sesión 10 · Semana 4

CSS Grid

Hoy · Hoja de ruta

  1. 1. Aprende: Qué problema resuelve Grid que Flexbox no, y qué significa la unidad fr.
  2. 2. Haz: Convierte tu catálogo en una cuadrícula.
  3. 3. Comprueba: Observa qué pasa al estrechar la ventana. Todavía no lo arregles.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Cuál es la diferencia entre margin y gap?
  2. ¿Qué hace flex-wrap?
  3. Decide si una botonera, una tarjeta horizontal y un catálogo necesitan Flexbox, Grid o ninguno.

Dos dimensiones a la vez

Flexbox coloca en una línea. Considera ahora este problema:

Producto  Producto  Producto
Producto  Producto  Producto
Producto  Producto  Producto

Aquí no hay una dirección: hay filas y columnas, y quieres que las columnas estén alineadas entre filas. Con Flexbox se puede aproximar, y las columnas nunca acaban de cuadrar porque cada fila reparte su espacio por su cuenta. Grid está diseñado exactamente para esto.

.catalogo {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
}
Vista previaTres columnas alineadas y filas creadas automáticamente

Nova 14

Portátil ligero

Vision 27

Monitor IPS

Type Pro

Teclado mecánico

Dock One

Base USB-C

Wave

Ratón inalámbrico

Focus

Webcam 2K

Grid alinea cada tarjeta con las columnas de las demás filas; por eso es una herramienta bidimensional.

Tres declaraciones y tienes una cuadrícula de tres columnas con sus filas alineadas. Fíjate en que no has dicho cuántas filas hay: Grid las crea según los elementos que haya.

La unidad fr

fr

Una fracción del espacio libre del contenedor. 1fr 1fr 1fr reparte lo disponible en tres partes iguales; 2fr 1fr da el doble a la primera columna.

Es distinta del porcentaje, y la diferencia importa: 33.33% no descuenta el gap, así que tres columnas al 33.33 % con separación desbordan. 1fr sí lo descuenta, porque reparte lo que queda después de los huecos. Por eso con Grid no tienes que hacer cuentas.

grid-template-columns: repeat(3, 1fr);   /* lo mismo, sin repetirte */
grid-template-columns: 250px 1fr;        /* una fija y otra elástica */
grid-template-columns: 1fr 2fr;          /* una parte y dos partes */

repeat() es solo una abreviatura, pero se vuelve importante en la sesión siguiente.

El vocabulario

Las piezas de una cuadrícula
  1. Líneas · las divisiones, numeradas desde 1
  2. Pistas · las columnas y filas que quedan entre líneas
  3. Celdas · el cruce de una columna con una fila
  4. Áreas · un grupo rectangular de celdas, que puedes nombrar

Conviene fijarse en que se numeran las líneas, no las columnas. Una cuadrícula de tres columnas tiene cuatro líneas verticales: la 1 al principio y la 4 al final. Es la fuente de casi todos los desajustes de la sesión siguiente.

El inspector de Grid

En DevTools, junto a un elemento con display: grid, aparece una etiqueta grid. Púlsala y el navegador dibuja encima de la página las líneas con su numeración, las pistas y los huecos.

Úsalo siempre

No intentes imaginar mentalmente una cuadrícula compleja si el navegador puede dibujártela. Cuando un elemento no cae donde esperabas, el inspector te enseña en un segundo qué línea es la 3 de verdad.

Tarea 10 · Tu catálogo en cuadrícula

En productos.html, convierte el contenedor de las fichas en un Grid.

  1. Aplica display: grid y gap al contenedor de los article.
  2. Prueba repeat(2, 1fr), después repeat(3, 1fr) y después repeat(4, 1fr). Quédate con la que mejor te encaje en tu pantalla.
  3. Abre el inspector de Grid y localiza las líneas, las pistas y los huecos.
  4. Ahora estrecha la ventana hasta 400 px y observa qué pasa con las tarjetas.

Todavía no lo arregles

Vas a ver columnas ridículamente estrechas, con una palabra por línea. Es lo esperado, y es el problema que resuelve la sesión de mañana.

Anota qué has visto y a qué anchura ha empezado a verse mal. Ese número es tu primer breakpoint candidato, y lo has obtenido de la única forma legítima: mirando cuándo el contenido deja de funcionar.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Cuándo eliges Grid en lugar de Flexbox?
  2. ¿Por qué 1fr no es lo mismo que 33.33%?
  3. Una cuadrícula de cuatro columnas, ¿cuántas líneas verticales tiene?
Ver respuestas

1 · Cuando el problema tiene filas y columnas a la vez y quieres que se alineen entre sí.

2 · Porque fr reparte el espacio que queda después de descontar los gap, y el porcentaje no los descuenta.

3 · Cinco: una a cada lado de cada columna, contando los dos extremos.