Qué es CSS Grid
CSS Grid es el sistema de layout más potente que tiene CSS hoy. Te permite construir grillas bidimensionales con columnas y filas explícitas, controlar el alineamiento, y reasignar elementos a posiciones específicas. Es la herramienta correcta para layouts de página, dashboards, galerías y cualquier estructura que requiera control fino sobre dos ejes.
Conceptos clave
- grid-template-columns: define la cantidad y tamaño de columnas.
- grid-template-rows: define la cantidad y tamaño de filas (opcional).
- gap: espacio entre celdas.
- grid-template-areas: asigna nombres a regiones del grid.
- grid-column / grid-row: posiciona un item en columnas o filas específicas.
La unidad fr
fr (fraction) representa una fracción del espacio disponible después de descontar gaps y tamaños fijos. 1fr 2fr 1fr divide en proporción 1:2:1. Es la unidad ideal para grids responsive porque se adapta sin que tengas que calcular porcentajes a mano.
Patrones útiles
/* 3 columnas iguales */
grid-template-columns: repeat(3, 1fr);
/* mínimo 200px, máximo 1fr, auto-rellenar */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* sidebar 250px + contenido fluido */
grid-template-columns: 250px 1fr;El patrón repeat(auto-fill, minmax(200px, 1fr)) es la fórmula mágica para galerías: el grid agrega columnas a medida que hay espacio y mantiene cada item con un mínimo razonable.
Grid template areas
Para layouts complejos (header / sidebar / main / footer), grid-template-areas es la opción más legible:
grid-template-areas:
"header header"
"sidebar main"
"footer footer";Después asignás cada elemento con grid-area: header;. Cambiar el layout en mobile es modificar las áreas, no reordenar HTML.
Grid vs Flexbox
Grid es bidimensional: controlás filas y columnas a la vez. Flexbox es unidimensional: alineás items en una sola dirección. Para una grilla de productos, Grid. Para una toolbar horizontal, Flexbox. En layouts grandes los usás juntos: Grid para la macro-estructura, Flexbox dentro de cada celda.
Responsive
Grid permite media queries muy concisas. Cambiar de tres columnas a una en mobile es una línea: grid-template-columns: 1fr;. Combinado con auto-fill y minmax, podés tener grids que se adaptan sin escribir media queries explícitas.