Grid básico: filas, columnas y la unidad fr

De una dimensión a dos

Imagina que diseñas la portada de un periódico: titular arriba, varias columnas de texto, una foto que ocupa dos de ellas, el pie abajo. Eso es maquetar en 2D, y es justo lo que Grid hace fácil.

Flexbox reparte elementos a lo largo de un eje (una fila o una columna). CSS Grid trabaja en dos dimensiones a la vez: filas y columnas. Es la herramienta indicada cuando quieres alinear contenido tanto horizontal como verticalmente, ya sea un panel de control, una galería de fotos o la maquetación de una página entera.

Activar la rejilla

El layout vive en el contenedor: en cuanto le pones display: grid, sus hijos directos se convierten en grid items y se colocan dentro de la rejilla. El contenedor define la estructura; los items la ocupan.

.galeria {
  display: grid;
  grid-template-columns: 200px 200px 200px;  /* 3 columnas de 200px */
}

La unidad fr: fracciones del espacio libre

Las medidas fijas (px) son rígidas: en una pantalla estrecha se desbordan. La unidad fr (fraction) reparte el espacio disponible en proporciones, como si cortaras una tarta en porciones. 1fr 1fr 1fr crea tres columnas que se reparten el ancho a partes iguales y se adaptan al tamaño del contenedor.

⚠️ TRAMPA CLÁSICA: 1fr no es "un tercio fijo". Es una fracción del sobrante. Si una columna lleva contenido ancho, fr reparte lo que queda después, no el total. Por eso 1fr 1fr puede no acabar en dos columnas idénticas si el contenido manda.

.galeria {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 columnas iguales y flexibles */
  grid-template-rows: 100px auto;      /* fila fija + fila que crece */
}

Puedes mezclar unidades: grid-template-columns: 250px 1fr; deja una columna fija de 250px (un sidebar) y otra que ocupa el resto.

Separación entre celdas: gap

gap es la separación entre celdas, sin tener que añadir margin a cada item (los márgenes de Grid no se colapsan y no sobran a los lados):

.galeria {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;             /* 16px entre filas y columnas */
}

Regla mental: el contenedor es el arquitecto que dibuja los planos de la rejilla (display, columns, rows, gap); los items son los inquilinos que solo deciden en qué hueco se instalan.