Fundamentos de grid

grid-template-columns: repeat(3, 1fr) crea tres columnas iguales en una sola línea, y el navegador coloca cada hijo en la siguiente celda libre.

Filas y columnas a la vez

Grid, el módulo CSS Grid Layout, está hecho para la maquetación en dos dimensiones: filas y columnas a la vez. Dibujas la cuadrícula en el contenedor y los elementos caen en sus celdas. Mientras que flexbox parte de los elementos y deja que ellos resuelvan sus tamaños, grid parte de la maquetación y acomoda los elementos en ella. Por eso es la herramienta natural para galerías de fotos, listados de tarjetas y la forma general de una página con encabezado, barra lateral, contenido principal y pie de página.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 10px;
}
.gallery .wide { grid-column: span 2; }    /* this item covers two columns */

Pistas y la unidad fr

grid-template-columns enumera el ancho de cada columna, llamada pista. Puedes usar cualquier longitud, como 200px 1fr, pero grid agrega una unidad propia: fr, una fracción del espacio libre. 1fr 1fr 1fr crea tres columnas iguales; 2fr 1fr hace que la primera columna sea el doble de ancha que la segunda. La unidad fr reparte solo el espacio que queda después de las pistas fijas y los gaps, así que 200px 1fr da una barra lateral de 200 píxeles y deja que la columna principal tome el resto. repeat(3, 1fr) es una forma más corta de escribir 1fr 1fr 1fr. grid-template-rows hace lo mismo con las filas, pero a menudo las filas se dejan tal cual, tan altas como su contenido.

Colocar los elementos

Por defecto, los elementos llenan la cuadrícula en el orden del código, una celda cada uno, de izquierda a derecha y luego a la fila siguiente. Para agrandar un elemento, grid-column: span 2 le hace ocupar dos columnas, y grid-row: span 2, dos filas. Las líneas entre pistas se numeran desde 1, así que una cuadrícula de tres columnas tiene las líneas de 1 a 4, y grid-column: 1 / 3 significa de la línea 1 a la línea 3. grid-column: 1 / -1 estira un elemento a todo el ancho, porque los números negativos cuentan desde el final.

Ponerles nombre a las áreas

Para maquetar una página, grid-template-areas te permite dibujar la maquetación con palabras. Cada cadena entre comillas es una fila y cada palabra, una celda; repetir una palabra hace que un área abarque esas celdas. Luego cada elemento recibe grid-area con el nombre correspondiente. La maquetación de abajo se lee casi como un boceto: el encabezado arriba de lado a lado, la barra lateral y el contenido principal uno junto al otro, y el pie de página abajo. Cambiar la maquetación para un celular significa reescribir solo estas pocas cadenas, a menudo dentro de una media query.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 16px;
}
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

Columnas que se ajustan a la pantalla

Vale la pena memorizar un patrón de las guías de grid de MDN: grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)). minmax(150px, 1fr) dice que cada columna debe medir al menos 150 píxeles y puede crecer para repartirse el espacio, y auto-fill crea tantas columnas como quepan. El resultado es una galería que muestra dos columnas en un celular y cinco o seis en una pantalla ancha, otra vez sin media query. Igual que flexbox, grid puede colocar los elementos en un orden distinto al del HTML, y vale la misma advertencia: mantén iguales el orden de lectura y el orden visual.