Grid (introducción)

Una dimensión vs. dos

Flexbox (Lección 10) piensa en una sola dirección a la vez: una fila, o una columna. Para la enorme mayoría de los casos —menús, tarjetas, centrar contenido— alcanza y sobra.

Grid piensa en dos dimensiones al mismo tiempo: filas y columnas, como una cuadrícula. Tiene sentido cuando el layout en sí es una grilla real — una galería de fotos, un tablero, el layout general de una página con encabezado/menú lateral/contenido/pie.

Para este curso, alcanza con la idea básica — no hace falta dominar todo lo que Grid permite hacer.

display: grid y grid-template-columns

.galeria {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

display: grid activa Grid en el contenedor, igual que display: flex activa Flexbox. grid-template-columns define cuántas columnas hay y de qué ancho — 1fr 1fr 1fr son tres columnas de igual ancho (fr significa "fracción" del espacio disponible). gap agrega espacio entre las celdas, tanto horizontal como verticalmente, sin necesitar márgenes en cada elemento.

Los elementos hijos se van acomodando solos en esas columnas, fila tras fila, en el orden en que aparecen en el HTML — sin que tengas que decir en qué celda va cada uno.