CSS Grid

CSS Grid (Grid Layout) es el sistema de layout bidimensional de CSS. Se activa con display: grid sobre un elemento contenedor, que a partir de ese momento define una cuadrícula con filas y columnas. Sus hijos directos se colocan automáticamente en esa cuadrícula — cada uno ocupa una o más celdas — sin necesidad de declarar nada en ellos por defecto.

El problema que Grid resuelve es estructural: los layouts de página reales tienen dos dimensiones. Una barra de navegación, una galería de tarjetas, un dashboard con widgets, un layout clásico de header/sidebar/main/footer: todos necesitan control simultáneo sobre columnas y filas. Flexbox trabaja en una dimensión a la vez (o filas o columnas); Grid trabaja en las dos. Con Grid, el contenedor es quien manda: vos definís la estructura, y los ítems se ubican en ella.

Grid no reemplaza a Flexbox — los complementa. La práctica estándar en producción es usar Grid para el layout macro de la página y Flexbox para los componentes internos de cada zona. Un header puede ser un contenedor flex internamente mientras ocupa una celda de la grilla de la página. Esta combinación es el patrón que se repite en cualquier proyecto moderno.

Antes de Grid, construir layouts de dos dimensiones en CSS requería floats, hacks con display: table, o poziciones absolutas que se rompían con el contenido dinámico. Grid es la primera herramienta nativa de CSS diseñada específicamente para el layout bidimensional — y es la que el navegador usa para razonar sobre la estructura de la página.

Cómo funciona

Contenedor e ítems

La distinción central de Grid es entre contenedor e ítems. El contenedor es el elemento que recibe display: grid (o display: inline-grid). Todos sus hijos directos se convierten automáticamente en ítems grid — sin que sea necesario declarar nada en ellos. Los nietos y descendientes más profundos no participan en la grilla: Grid actúa solo un nivel hacia abajo.

.pagina {
  display: grid; /* .pagina es el contenedor */
}
/* todos los hijos directos de .pagina son ítems grid */

Las propiedades de Grid se dividen en dos grupos: las del contenedor — que definen la estructura de la grilla — y las del ítem — que controlan cómo cada hijo se ubica dentro de ella. Esta página documenta el modelo del contenedor; las propiedades del ítem se cubren en grid-column/grid-row, grid-area y justify-self.

Líneas, pistas, celdas y áreas

La cuadrícula de Grid se construye con cuatro conceptos que es importante distinguir:

• Líneas de grilla (grid lines): las líneas horizontales y verticales que dividen el espacio. Se numeran automáticamente empezando en 1 desde el borde inicial. Una grilla de 3 columnas tiene 4 líneas verticales (1, 2, 3, 4) y otras tantas horizontales según las filas.
• Pistas (tracks): el espacio entre dos líneas consecutivas. Una pista de columna es el espacio entre línea vertical 1 y línea vertical 2. Una pista de fila es el espacio entre línea horizontal 1 y línea horizontal 2.
• Celdas (cells): la intersección de una pista de columna con una pista de fila. Es la unidad mínima de la grilla.
• Áreas (areas): un grupo rectangular de celdas contiguas. Un ítem puede ocupar varias celdas a la vez, formando un área.

Los ítems se ubican entre líneas: “desde la línea de columna 1 hasta la 3, y desde la línea de fila 1 hasta la 2”. Eso lo controlan grid-column y grid-row (propiedades del ítem, tanda 19). El contenedor solo define cuántas líneas hay y cómo se distribuye el espacio.

Propiedades del contenedor

Las propiedades que se aplican al contenedor grid definen la estructura de la cuadrícula:

Alineación en Grid

Grid comparte el modelo de alineación de CSS Box Alignment con Flexbox. Los mismos valores (start, end, center, stretch, space-between, space-around, space-evenly) aparecen en ambos contextos, pero con una diferencia clave: en Grid, el eje en línea (horizontal en escritura occidental) es el que controla justify-*, y el eje de bloque (vertical) es el que controla align-*. Esta asignación es siempre fija en Grid — no rota con ninguna propiedad equivalente a flex-direction.

Hay dos pares de propiedades de alineación en el contenedor:

justify-items y align-items — alinean el contenido de cada ítem dentro de su celda. Por defecto ambas tienen valor stretch, que hace que el ítem ocupe toda la celda. Cambiándolos, los ítems se comprimen a su tamaño natural y quedan posicionados dentro de la celda.

justify-content y align-content — alinean la grilla completa dentro del contenedor cuando el contenedor es más grande que la cuadrícula. Usan los mismos valores que en Flexbox: start, center, space-between, etc. Solo tienen efecto visible cuando la grilla tiene tamaño fijo y sobra espacio.

Los ítems pueden sobrescribir la alineación del contenedor con justify-self y align-self a nivel individual. Estas propiedades se documentan en justify-self y align-self junto con grid-column/grid-row y grid-area.

display: grid vs display: inline-grid

display: grid hace que el contenedor sea un bloque (ocupa todo el ancho de su padre). display: inline-grid hace que el contenedor se comporte como elemento en línea externamente — su tamaño se ajusta a la grilla — mientras que internamente los ítems siguen siendo grid items. En la práctica, display: grid es el valor más usado.

La regla: cuándo Flexbox, cuándo Grid

Flexbox para una dimensión; Grid para dos.

La distinción conceptual es entre quién manda: en Flexbox, el contenido define su tamaño y el contenedor distribuye lo que queda; en Grid, el contenedor define la estructura y los ítems se adaptan a ella.

No son mutuamente excluyentes — en producción se combinan. Grid define la estructura de la página; Flexbox distribuye el contenido dentro de cada zona:

Página (Grid para el layout global)
├── Header  (Flexbox internamente: logo + nav + acciones)
├── Nav     (Flexbox: lista de links)
├── Main    (puede tener un sub-Grid para tarjetas)
└── Footer  (Flexbox: copyright + links)

Cuándo preferir Grid aunque sea posible con Flexbox:

• Necesitás que ítems en distintas filas se alineen en columna.
• El layout tiene zonas bien definidas (header/nav/main/footer).
• Querés control bidimensional preciso sobre la estructura.

Gotchas conceptuales

• Solo los hijos directos son ítems grid. Los nietos no participan en la grilla. Si necesitás que un nieto también sea grid item, aplicá display: grid en su padre inmediato.
• Sin grid-template-columns, el grid tiene una sola columna. display: grid sin más propiedades es un grid de una columna — los ítems se apilan en columna como en flujo normal. La cuadrícula aparece cuando definís las pistas.
• float y vertical-align no tienen efecto en los ítems. El contexto grid los ignora, igual que Flexbox.
• Las líneas empiezan en 1, no en 0. Es un punto de confusión frecuente para quien viene de lenguajes de programación con índices base 0.
• grid-template-columns sola no crea filas explícitas. Las filas adicionales se crean automáticamente como grid implícito — el navegador las genera según las necesite. Para controlar su tamaño, se usa grid-auto-rows.

Vigente / legacy

CSS Grid es ampliamente compatible desde 2017 y hoy es baseline widely available. Es la primera herramienta nativa de CSS diseñada específicamente para el layout bidimensional. No existe una técnica legacy equivalente: los layouts previos basados en floats o display: table son código obsoleto en proyectos nuevos. No se necesitan prefijos de vendor.

Contenedor

El contenedor grid es el elemento que recibe display: grid. Es quien define la estructura de la cuadrícula: cuántas columnas y filas hay, cuánto espacio ocupa cada pista, y cómo se distribuye el espacio sobrante. Los ítems se ubican dentro de esa estructura — por defecto automáticamente, y con precisión explícita usando las propiedades del ítem.

Las propiedades que se aplican al contenedor son:

• grid-template-columns — define las pistas de columna (cantidad, tamaño, unidades fr, repeat(), minmax())
• grid-template-areas — layout declarativo con nombres de zona para ubicar ítems con nombres en vez de líneas

Ítems

Los ítems grid son los hijos directos del contenedor. Se ubican automáticamente en la cuadrícula siguiendo el flujo de colocación automática. Las propiedades del ítem permiten ubicarlos con precisión: entre qué líneas de columna y de fila ocupa cada uno, o a qué área nombrada pertenece.

Las propiedades que se aplican a los ítems son:

• grid-column / grid-row — define entre qué líneas de la grilla se extiende el ítem en columna y fila respectivamente
• grid-area — shorthand que combina grid-column y grid-row, o asigna el ítem a un área nombrada con grid-template-areas
• justify-self — alinea el ítem horizontalmente dentro de su celda, anulando justify-items del contenedor