CSS Grid es el sistema de layout bidimensional de CSS que te permite controlar filas y columnas a la vez. Si vienes de resolver maquetaciones con floats, tablas o incluso Flexbox solo, vas a notar un salto enorme en control y claridad de código.
En esta guía te explico cómo funciona CSS Grid desde las propiedades básicas hasta técnicas avanzadas como subgrid, con ejemplos de código que puedes copiar y probar directamente. También incluyo una comparativa con Flexbox para que sepas cuándo usar cada uno.
Qué es CSS Grid
CSS Grid Layout es un módulo de CSS que crea cuadrículas bidimensionales. A diferencia de Flexbox, que trabaja en un solo eje (horizontal o vertical), Grid te permite definir filas y columnas simultáneamente y colocar elementos en cualquier celda de esa cuadrícula.
Antes de CSS Grid, los desarrolladores frontend resolvíamos la maquetación con floats, frameworks de 12 columnas (tipo Bootstrap) o combinaciones de position: absolute que resultaban frágiles y difíciles de mantener. Grid nació para resolver ese problema de raíz, directamente desde CSS.
Todos los navegadores modernos lo soportan desde 2017. En 2026, su compatibilidad es del 97%+ según Can I Use, así que puedes usarlo en producción sin problema.
Para activarlo, solo necesitas una propiedad en el contenedor:
/* Activa CSS Grid en el contenedor */
.contenedor {
display: grid;
}Con display: grid el contenedor pasa a ser un grid container y sus hijos directos se convierten en grid items (elementos de la cuadrícula).
Conceptos básicos: contenedor, filas, columnas y celdas
Antes de escribir código, conviene entender los cuatro elementos clave de cualquier cuadrícula CSS Grid.
Grid container
Es el elemento padre con display: grid. Define la estructura de la cuadrícula: cuántas filas, cuántas columnas y qué tamaño tiene cada una.
Filas y columnas (tracks)
Las filas son las bandas horizontales y las columnas las verticales. En CSS Grid se llaman tracks. Las defines con grid-template-rows y grid-template-columns.
Celdas y áreas
Cada intersección de una fila con una columna crea una celda. Puedes agrupar varias celdas para formar un área con nombre usando grid-template-areas, lo que resulta muy útil para layouts completos de página.
Líneas de la cuadrícula
Entre cada track hay una línea numerada. Una cuadrícula de 3 columnas tiene 4 líneas verticales (1, 2, 3, 4). Estas líneas son las que usas para posicionar elementos con grid-column y grid-row.
Tutorial CSS Grid paso a paso
Vamos directamente a código. Cada ejemplo es funcional: puedes copiarlo y pegarlo en tu editor para ver el resultado. Si no tienes un proyecto abierto, crea un archivo HTML con un div contenedor y varios div hijos con texto o color de fondo para visualizar cómo se comportan.
Definir una cuadrícula básica
El primer paso es crear el contenedor y definir las columnas:
/* Cuadrícula de 3 columnas iguales */
.grid-basico {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* 1fr = 1 fracción del espacio disponible */
gap: 16px;
/* gap sustituye a grid-gap (obsoleto) */
}La unidad 1fr reparte el espacio disponible en fracciones iguales. Si escribes 1fr 2fr 1fr, la columna central ocupa el doble que las laterales. Es la unidad más usada en CSS Grid porque se adapta automáticamente al ancho del contenedor.
¿Y qué pasa con las filas? Se definen igual, con grid-template-rows:
/* Cuadrícula con 3 columnas y 2 filas */
.grid-completo {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px auto;
/* Primera fila: 200px fijos. Segunda fila: se adapta al contenido */
gap: 16px;
}También puedes usar la función repeat() para simplificar:
/* Equivalente a 1fr 1fr 1fr */
grid-template-columns: repeat(3, 1fr);
/* 12 columnas iguales (como Bootstrap) */
grid-template-columns: repeat(12, 1fr);Colocar elementos en la cuadrícula
Por defecto, los elementos se colocan en orden automático, celda por celda. Para posicionar un elemento en un lugar concreto, usa las líneas de la cuadrícula:
/* El elemento ocupa de la línea 1 a la 3 (2 columnas) */
.elemento-destacado {
grid-column: 1 / 3;
}
/* Atajo: span indica cuántas columnas ocupa */
.elemento-ancho {
grid-column: span 2;
/* Ocupa 2 columnas desde donde le toque */
}Grid explícito vs implícito
Cuando defines columnas y filas con grid-template-columns y grid-template-rows, creas un grid explícito. Pero si tienes más elementos de los que caben en esas filas definidas, CSS Grid crea filas adicionales de forma automática. Esas filas extra forman el grid implícito.
Puedes controlar el tamaño de las filas implícitas con grid-auto-rows:
/* Filas explícitas: 2 filas de 200px */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 200px 200px;
grid-auto-rows: 150px;
/* Si hay más de 6 elementos, las filas extra miden 150px */
}Esto es especialmente útil cuando el número de elementos es dinámico (productos de una tienda, posts de un blog). Defines las columnas y dejas que las filas se generen solas con el tamaño que necesites.
Layout con áreas nombradas
Esta es una de las funcionalidades más potentes de CSS Grid. Puedes darle nombre a cada zona del layout y luego «dibujar» la estructura de forma visual:
/* Layout de página completa con áreas */
.pagina {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
/* Asignar cada elemento a su área */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Al leer grid-template-areas, ves el layout como si fuera un esquema. Es mucho más legible que trabajar con números de línea para estructuras complejas.
Un detalle útil: si necesitas dejar una celda vacía, usa un punto (.) en el mapa de áreas:
grid-template-areas:
"header header header"
". main sidebar"
"footer footer footer";
/* El punto deja la celda vacía */Técnicas avanzadas de CSS Grid
Ajuste automático con auto-fill y auto-fit
Para crear grids que se adapten solos al espacio disponible sin media queries, usa auto-fill o auto-fit junto con minmax():
/* Columnas que se ajustan solas */
.galeria {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
/*
auto-fill: crea columnas vacías si sobra espacio
auto-fit: expande las columnas existentes para llenar el espacio
En la mayoría de casos, auto-fit da mejor resultado visual.
*/Este patrón es el más útil de CSS Grid para componentes responsivos. Una sola línea sustituye a varias media queries. Lo uso en prácticamente todos los proyectos para galerías, listados de tarjetas y secciones de features.
La diferencia entre auto-fill y auto-fit se nota cuando sobra espacio. Con auto-fill, el navegador crea columnas vacías invisibles; con auto-fit, las columnas existentes se estiran para ocupar todo el ancho. En la mayoría de diseños, auto-fit da un resultado más limpio.
Espaciado con gap
La propiedad gap controla el espacio entre filas y columnas. Puedes definir un valor único o separar filas y columnas:
/* Mismo espacio en filas y columnas */
gap: 20px;
/* Diferente: 20px entre filas, 10px entre columnas */
gap: 20px 10px;
/* Propiedades individuales */
row-gap: 20px;
column-gap: 10px;Líneas con nombre
Además de usar números, puedes ponerle nombre a las líneas de la cuadrícula. Esto hace que el código sea más legible cuando trabajas con layouts complejos:
/* Líneas con nombre para un layout claro */
.layout {
display: grid;
grid-template-columns:
[sidebar-start] 250px
[sidebar-end main-start] 1fr
[main-end];
}
/* Posicionar un elemento usando los nombres */
.contenido {
grid-column: main-start / main-end;
}Los nombres de línea son opcionales, pero en proyectos grandes donde varias personas tocan el CSS, hacen una diferencia real en la mantenibilidad del código.
Posicionamiento por capas con z-index
Cuando dos elementos ocupan la misma celda, puedes controlar cuál queda encima con z-index. Esto abre la puerta a overlays y composiciones visuales sin recurrir a position: absolute:
/* Dos elementos en la misma posición */
.imagen-fondo {
grid-column: 1 / 4;
grid-row: 1 / 3;
z-index: 1;
}
.texto-superpuesto {
grid-column: 2 / 3;
grid-row: 1 / 2;
z-index: 2;
/* Queda encima de la imagen */
}Alineación de elementos
CSS Grid ofrece control de alineación en ambos ejes. Estas propiedades van en el contenedor:
/* Alineación en el contenedor */
.grid {
/* Alinea el contenido de las celdas en el eje horizontal */
justify-items: center; /* start | end | center | stretch */
/* Alinea el contenido de las celdas en el eje vertical */
align-items: center; /* start | end | center | stretch */
/* Atajo para ambos a la vez */
place-items: center;
}
/* Alineación individual de un elemento */
.elemento {
justify-self: end;
align-self: start;
}CSS Subgrid: la pieza que faltaba
Subgrid permite que un elemento hijo herede las líneas de la cuadrícula de su padre. Antes de subgrid, si tenías un grid dentro de otro grid, cada uno definía sus propias filas y columnas de forma independiente. Eso hacía imposible alinear elementos anidados con la cuadrícula principal.
Desde finales de 2023, todos los navegadores modernos soportan subgrid (Chrome 117+, Firefox 71+, Safari 16+). Ya puedes usarlo en producción.
/* Ejemplo: tarjetas con contenido alineado */
.lista-tarjetas {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.tarjeta {
display: grid;
/* Hereda las filas del padre */
grid-row: span 3;
grid-template-rows: subgrid;
/*
Ahora el título, contenido y botón de cada tarjeta
se alinean con los de las tarjetas vecinas,
sin importar cuánto texto tenga cada una.
*/
}
.tarjeta-titulo { /* Fila 1: alineada con las demás */ }
.tarjeta-contenido { /* Fila 2: alineada con las demás */ }
.tarjeta-boton { /* Fila 3: alineada con las demás */ }El caso de uso más claro de subgrid es el de las tarjetas de igual altura donde el título, la descripción y el botón de cada tarjeta se alinean horizontalmente con las tarjetas vecinas. Antes de subgrid, lograr eso requería hacks con Flexbox y margin-top: auto.
Subgrid también funciona en columnas:
grid-template-columns: subgrid. Puedes heredar en un eje y definir el otro manualmente.
Otro uso práctico: formularios donde las etiquetas y los campos de todas las filas deben estar alineados. Con subgrid, defines las columnas en el formulario padre y cada fila hereda esa alineación sin necesidad de anchos fijos.
CSS Grid responsive
CSS Grid tiene herramientas integradas que reducen la necesidad de media queries. Estas son las técnicas que uso habitualmente.
La unidad fr y los porcentajes
La unidad fr es relativa al espacio disponible dentro del contenedor grid. A diferencia de los porcentajes, fr calcula el espacio restante después de restar los tracks con tamaño fijo y el gap. Eso evita el problema clásico de que tres columnas al 33% se desborden cuando les sumas márgenes.
Combina fr con unidades fijas para layouts híbridos:
/* Sidebar fijo + contenido flexible */
grid-template-columns: 280px 1fr;
/* Sidebar flexible con mínimo */
grid-template-columns: minmax(200px, 300px) 1fr;minmax() para control de tamaño
minmax(min, max) define un rango de tamaño para un track. Es clave para que los elementos no se compriman demasiado ni se estiren en exceso:
/* Columnas de mínimo 200px, máximo 1fr */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* Filas con altura mínima de 100px */
grid-template-rows: repeat(3, minmax(100px, auto));Media queries para cambios de estructura
Cuando necesitas cambiar la estructura del layout de verdad (por ejemplo, pasar de sidebar + contenido a una sola columna), las media queries siguen siendo necesarias:
/* Desktop: 2 columnas */
.layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-areas:
"sidebar main";
}
/* Móvil: 1 columna, sidebar debajo */
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
grid-template-areas:
"main"
"sidebar";
}
}grid-auto-flow para flujo automático
grid-auto-flow controla en qué dirección y cómo se colocan los elementos que no tienen una posición explícita asignada:
/* Flujo por filas (por defecto) */
grid-auto-flow: row;
/* Flujo por columnas */
grid-auto-flow: column;
/* dense: rellena huecos con elementos más pequeños */
grid-auto-flow: dense;
/* Útil en galerías de imágenes con tamaños diferentes */CSS Grid vs Flexbox: cuándo usar cada uno
Es la duda más frecuente cuando empiezas con CSS moderno: ¿cuándo uso Grid y cuándo Flexbox? No es una cuestión de elegir uno u otro. CSS Grid y Flexbox resuelven problemas diferentes y funcionan muy bien combinados. La clave está en entender para qué sirve cada uno.
| Criterio | CSS Grid | Flexbox |
|---|---|---|
| Ejes | Bidimensional (filas + columnas) | Unidimensional (fila o columna) |
| Uso ideal | Layouts de página, cuadrículas complejas | Componentes en línea, barras de navegación |
| Control del tamaño | El contenedor define la estructura | El contenido define el tamaño |
| Posicionamiento | Explícito por líneas o áreas | Secuencial con orden flexible |
| Solapamiento | Permite elementos superpuestos | No permite solapamiento |
| Espaciado | gap (filas y columnas) | gap (solo en un eje) |
Cuándo usar CSS Grid
- Layout general de página (header, sidebar, main, footer)
- Galerías de imágenes o tarjetas
- Dashboards y cuadrículas de datos
- Cualquier diseño que necesite alinear elementos en dos ejes
Cuándo usar Flexbox
- Barras de navegación y menús
- Alineación de elementos dentro de un componente
- Distribución de botones o iconos en una fila
- Centrado vertical y horizontal de un solo elemento
Combinados: el patrón más frecuente
En la práctica, lo más habitual es usar Grid para la estructura general y Flexbox para los componentes internos:
/* Grid para el layout de página */
.pagina {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 24px;
}
/* Flexbox para la navegación dentro del header */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}Herramientas para trabajar con CSS Grid
No necesitas memorizar todas las propiedades desde el primer día. Estas herramientas te ayudan a visualizar cuadrículas, generar código y aprender más rápido.
DevTools del navegador
Tanto Chrome como Firefox incluyen un inspector de CSS Grid integrado. En Chrome, abre DevTools, selecciona el contenedor grid y activa el badge «grid» en el panel de Elements. Verás una superposición con las líneas numeradas, los nombres de las áreas y el tamaño de cada track. Firefox tiene un inspector similar en su pestaña de Layout.
Mi recomendación: usa las DevTools como herramienta principal. La visualización en tiempo real es más útil que cualquier generador externo, porque ves exactamente lo que ocurre con tus datos y tu contenido real.
Generadores y recursos online
- CSS Grid Generator (cssgrid-generator.netlify.app): generador visual donde dibujas la cuadrícula y te da el código CSS listo para copiar.
- Grid by Example (gridbyexample.com): colección de patrones y ejemplos de Rachel Andrew, una de las autoras de la especificación CSS Grid.
- Layoutit Grid (grid.layoutit.com): otro generador visual con soporte para áreas nombradas. Exporta código CSS y HTML.
Preguntas frecuentes
¿Qué es 1fr en CSS?
1fr significa una fracción del espacio disponible. Es una unidad exclusiva de CSS Grid. Si defines grid-template-columns: 1fr 2fr, el espacio se divide en 3 partes: la primera columna ocupa 1/3 y la segunda 2/3. La ventaja frente a porcentajes es que fr calcula el espacio restante después de restar los tracks con tamaño fijo y los gaps.
¿Qué es un grid en programación?
En programación general, un grid es una estructura de datos en forma de tabla o cuadrícula (filas y columnas). En el contexto de CSS y desarrollo web, CSS Grid se refiere específicamente al módulo de CSS que permite crear layouts bidimensionales en páginas web, controlando la posición y el tamaño de los elementos en filas y columnas.
¿Qué es display grid?
display: grid es la propiedad CSS que activa el modo de cuadrícula en un elemento. Convierte al elemento en un grid container y a sus hijos directos en grid items. A partir de ahí puedes definir filas, columnas, áreas y posicionar los elementos dentro de la cuadrícula.
¿CSS Grid reemplaza a Flexbox?
No. Son complementarios. CSS Grid es ideal para layouts de página (bidimensionales) y Flexbox para componentes en una sola dirección (menús, botones, alineaciones). En la mayoría de proyectos reales se usan ambos: Grid para la estructura general y Flexbox para los elementos internos de cada sección.
¿Qué navegadores soportan CSS Grid?
Todos los navegadores modernos: Chrome, Firefox, Safari, Edge y Opera. El soporte global supera el 97%. La única excepción relevante es Internet Explorer 11, que solo soporta una versión antigua de la especificación con prefijo -ms-. Si no necesitas compatibilidad con IE11 (que Microsoft dejó de soportar oficialmente en 2022), puedes usar CSS Grid sin preocupaciones en cualquier proyecto.
¿Cuál es la diferencia entre grid-gap y gap?
Son la misma propiedad. grid-gap fue el nombre original, pero se renombró a gap porque también funciona en Flexbox. Hoy en día, usa siempre gap (sin el prefijo grid-). Todos los navegadores lo soportan y es la forma recomendada por la especificación actual.
¿Qué es CSS Subgrid y cuándo lo necesito?
Subgrid permite que un grid anidado herede las líneas de su grid padre. Lo necesitas cuando quieres que elementos dentro de diferentes hijos se alineen con la cuadrícula principal. El caso más común: tarjetas en una fila donde el título, contenido y botón de cada tarjeta queden perfectamente alineados con los de las demás.
CSS Grid cambia por completo la forma de pensar en layouts web. En lugar de adaptar tu diseño a las limitaciones de las herramientas, defines la estructura que necesitas y los elementos se colocan donde les corresponde.
Si estás empezando, te recomiendo practicar con el inspector de tu navegador: crea un contenedor grid, juega con las propiedades y observa cómo se transforma la cuadrícula en tiempo real. Es la forma más rápida de interiorizar cómo funciona cada propiedad.
Para seguir aprendiendo sobre CSS y desarrollo frontend, puedes echar un vistazo a la categoría de CSS del blog o al artículo sobre inspiración en diseño web donde encontrarás más recursos. Si quieres entender mejor la diferencia entre frontend y backend, también lo cubro con detalle.
