#16 Grid: cuadrículas#16 Grid: cuadrículas

Filas y columnas a la vez

Flexbox es genial para colocar cosas en una fila (o una columna). Pero cuando quieres una cuadrícula, con filas y columnas alineadas a la vez, como una galería de fotos, un catálogo de productos o la estructura completa de una página, la herramienta es CSS Grid.

Como en Flexbox, hay un contenedor (con display: grid) y sus hijos directos, que se colocan en las celdas.

1
2
3
4

Con dos líneas has hecho una cuadrícula de tres columnas. Los elementos se van colocando de izquierda a derecha y de arriba abajo, y cuando se acaba una fila, empiezan la siguiente. No hace falta decir cuántas filas hay: se crean solas.

Definir las columnas

grid-template-columns dice cuántas columnas hay y cuánto mide cada una: un valor por columna.

La unidad fr

fr significa fracción del espacio libre. Es la unidad estrella de Grid:

1
2
3
4

repeat()

Para no escribir lo mismo muchas veces: repeat(4, 1fr) es igual que 1fr 1fr 1fr 1fr.

Elementos que ocupan más

Un elemento puede ocupar varias columnas con grid-column: span 2, o varias filas con grid-row: span 2. Así se hacen esas galerías con una foto destacada:

1
2
3
4
5

La galería que se adapta sola

Este es probablemente el truco de CSS más útil que vas a aprender. Una sola línea crea una galería que pone tantas columnas como quepan:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Léelo así: «repite columnas que midan como mínimo 200px y como máximo 1fr, y mete tantas como quepan (auto-fit)».

1
2
3
4
5
6

¿Grid o Flexbox?

No compiten: se complementan, y en una misma página usarás los dos.

Una regla práctica: Grid para la estructura de la página, Flexbox para lo que hay dentro de cada parte.

Errores típicos

• Poner display: grid en los hijos en lugar de en el contenedor.
• Escribir grid-template-column (sin la «s» final) o grid-template-columns: 3; (hay que dar el tamaño de cada columna).
• Usar márgenes para separar las celdas en lugar de gap.
• Imágenes que se salen de la celda: dales width: 100% y height: auto.
• Usar Grid para un menú en fila sencillo, donde Flexbox es más natural.

Ejercicios

Ejercicio 1: la cuadrícula de fotos (fácil)

Coloca estas seis fotos en una cuadrícula de 3 columnas iguales con 8px de separación. Haz que las imágenes ocupen todo el ancho de su celda.

1
2
3
4
5
6
7
8

.fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.fotos img {
  display: block;
  width: 100%;
  height: auto;
}

Ejercicio 2: adaptable (medio)

Cambia la cuadrícula del ejercicio anterior para que se adapte sola: columnas de al menos 140px, tantas como quepan.

.fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

Ejercicio 3: la estructura de una página (reto)

Usa Grid para que la cabecera y el pie ocupen todo el ancho, y en medio haya un contenido principal (3 partes) y una barra lateral (1 parte).

1
2
3
4
5
6

.pagina {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 12px;
}

.pagina header,
.pagina footer {
  grid-column: span 2;
}

Ficha resumen

• display: grid en el contenedor + grid-template-columns con un tamaño por columna.
• fr = fracción del espacio libre. repeat(3, 1fr) = tres columnas iguales.
• gap separa filas y columnas.
• grid-column: span 2 / grid-row: span 2 = ocupar varias celdas.
• Galería adaptable: repeat(auto-fit, minmax(200px, 1fr)).
• Grid para dos dimensiones y la estructura; Flexbox para una dirección y el interior de cada parte.

Glosario