CSS Grid, explicado tocando la rejilla

Cambia el número de columnas, el gap y la alineación, haz que una celda ocupe 2×2 y mira el CSS que se genera.

Laboratorio de CSS Grid

Grid crea una rejilla de filas y columnas y coloca los elementos en las celdas. A diferencia de Flexbox, controla las dos dimensiones a la vez.

fr, repeat() y minmax()

La unidad fr ("fracción") reparte el espacio libre. repeat() evita repetir a mano.

.rejilla {
  display: grid;

  /* 3 columnas iguales */
  grid-template-columns: repeat(3, 1fr);

  /* barra lateral fija + contenido flexible */
  grid-template-columns: 250px 1fr;

  /* columnas que se adaptan solas: tantas de min. 200px como quepan */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 16px;
}

Que una celda ocupe varias

En cada hijo puedes decir cuántas columnas o filas abarca:

.destacada {
  grid-column: span 2;   /* ocupa 2 columnas */
  grid-row: span 2;      /* y 2 filas */
}

/* o posición exacta por líneas de la rejilla */
.cabecera {
  grid-column: 1 / -1;   /* de la primera línea a la última: todo el ancho */
}

Grid vs Flexbox

No compiten: se usan juntas. Grid para la estructura general, Flexbox dentro de cada celda.