CSS Grid ha transformado el diseño de layouts web. Más allá de grid-template-columns: 1fr 1fr 1fr hay un potente conjunto de características.

Named Grid Areas

Define layouts que se leen como un wireframe directamente en CSS. El reordenamiento responsivo es trivial cambiando grid-template-areas.

Auto-Fill vs Auto-Fit

auto-fill preserva tracks vacíos como espacio; auto-fit los colapsa a cero. Usa auto-fill para columnas predecibles y auto-fit para layouts fluidos.

Dense Packing

grid-auto-flow: dense rellena huecos moviendo elementos a filas anteriores. Cuidado con el orden de lectura para accesibilidad.

Subgrid

grid-template-rows: subgrid permite que grids anidados hereden los tracks del padre, alineando elementos entre tarjetas hermanas sin JavaScript.

Patrón RAM (Repeat, Auto, Minmax)

grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) crea grids responsivos sin media queries.

Layouts de dashboard

Combina named areas para la estructura principal con auto-fill para grids de widgets internos.