Grid básico: display, columnas, fr y gap

En CAT-25 aprendiste a distribuir ítems en una dimensión con Flexbox. Grid extiende eso a dos dimensiones — controlás filas Y columnas al mismo tiempo, con precisión.

`display:grid` — el contenedor bidimensional

display:grid convierte un elemento en un contenedor grid. Sus hijos directos se vuelven automáticamente ítems grid sin que necesiten ninguna propiedad extra.

.galeria {
  display: grid;
}

Sin propiedades adicionales, el grid tiene una sola columna — los ítems se apilan igual que en el flujo normal. La estructura aparece cuando definís las pistas.

`grid-template-columns` y `grid-template-rows` — las pistas

Las pistas son las columnas y filas del grid. Se definen en el contenedor:

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

Cada valor es el tamaño de una pista. Con 6 ítems y 3 columnas, el grid crea 2 filas automáticamente (el grid implícito — Referencia).

Las pistas no tienen que ser iguales:

grid-template-columns: 200px 1fr 200px; /* sidebar | contenido | sidebar */

La unidad `fr` — fracciones del espacio disponible

fr (fraction) representa una fracción del espacio disponible después de restar los gaps y los valores fijos.

/* 3 columnas iguales: cada una ocupa 1/3 del espacio disponible */
grid-template-columns: 1fr 1fr 1fr;

/* La del medio es el doble de ancha */
grid-template-columns: 1fr 2fr 1fr;

/* Combinación fijo + fluido */
grid-template-columns: 250px 1fr;
/* La primera es siempre 250px; la segunda ocupa el resto */

fr es fluido — se adapta al contenedor. Si el contenedor tiene 900px y hay 3 columnas de 1fr, cada una mide 300px. Si el contenedor se achica, cada columna se achica también.

Por qué fr es mejor que %: el porcentaje no descuenta el gap; fr sí. Con fr no hace falta calcular calc(33.33% - 16px) para que las columnas no rompan el layout.

Nota: fr se observa en el preview — el valor que devuelve el motor es en píxeles resueltos (variables según el ancho del contenedor). Por eso el ejercicio usa 150px en lugar de 1fr para que el check sea honesto.

`gap` — espacio entre pistas

gap agrega espacio entre las pistas (filas Y columnas), pero no en los bordes externos del grid.

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

/* Si querés separaciones distintas por eje: */
.dashboard {
  row-gap: 24px;
  column-gap: 12px;
}

Ya conocés gap de Flexbox (CAT-25) — funciona exactamente igual en Grid.

Tu turno: convertí el .galeria en un grid de 3 columnas de 150px con gap de 16px. Observá en el preview cómo las 6 tarjetas se distribuyen en 2 filas de 3.