La retícula es una de las herramientas básicas del diseño gráfico: la usaste en editorial, en carteles, en identidad. CSS Grid lleva esa retícula a la web: defines columnas y filas y colocas cada elemento en ellas.

<section class="galeria">
  <img src="img/01.jpg" alt="…">
  <img src="img/02.jpg" alt="…">
  <img src="img/03.jpg" alt="…">
  <img src="img/04.jpg" alt="…">
</section>

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* tres columnas iguales */
  gap: 1rem;                               /* medianil */
}

• display: grid activa la retícula en el contenedor.
• grid-template-columns define las columnas. fr significa "fracción del espacio disponible": 1fr 1fr 1fr (o repeat(3, 1fr)) son tres columnas iguales; 2fr 1fr, una doble que la otra.
• gap es el medianil: el espacio entre columnas y filas.

Las filas se crean solas según haga falta. Si quieres fijarlas, usa grid-template-rows.

Las líneas de la retícula se numeran desde 1. Un elemento puede ocupar varias celdas:

línea: 1       2       3       4
       ┌───────┬───────┬───────┐
       │   destacado   │       │   .destacado { grid-column: 1 / 3; }
       ├───────┼───────┼───────┤
       │       │       │       │
       └───────┴───────┴───────┘

.destacado {
  grid-column: 1 / 3;     /* de la línea 1 a la 3: ocupa dos columnas */
}
.vertical {
  grid-row: span 2;       /* ocupa dos filas */
}

Para la composición de una página completa, las áreas con nombre se leen casi como un boceto:

Esta línea crea tantas columnas como quepan, de al menos 200 px cada una:

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

• minmax(200px, 1fr): cada columna mide como mínimo 200 px y como máximo una fracción.
• auto-fit: el navegador calcula cuántas caben.

Es una galería adaptable sin media queries.

📌 Nota. De la retícula tipográfica a CSS Grid: una retícula de 12 columnas con medianil de 20 px se escribe grid-template-columns: repeat(12, 1fr); gap: 20px;. Los márgenes de página serían el padding del contenedor.

No compiten: se combinan. Lo habitual es Grid para la composición general y Flexbox dentro de cada pieza (la cabecera, una tarjeta, una fila de botones).

• Olvidar que Grid, como Flexbox, afecta a los hijos directos del contenedor.
• Usar % para columnas y que el gap haga desbordar la página: usa fr.
• Colocar todo con números de línea cuando las áreas con nombre serían más legibles.