CSS Grid

¿Qué es CSS Grid?

CSS Grid es un sistema de diseño bidimensional integrado en CSS. Permite organizar elementos en filas y columnas simultáneamente, brindando un control total sobre cómo se ubican, dimensionan y alinean los elementos en una página. Antes de Grid, los desarrolladores dependían de floats, tablas o trucos de posicionamiento para crear diseños complejos. Grid reemplazó todo aquello con un único y potente mecanismo.

La distinción clave son las dos dimensiones. Flexbox organiza los elementos en una sola dirección: una fila o una columna. Grid organiza los elementos en ambas direcciones a la vez: defines las columnas y las filas, y luego ubicas los elementos en las celdas resultantes. Esto lo convierte en la opción natural para diseños a nivel de página, rejillas de tarjetas, dashboards y cualquier diseño donde los elementos deban situarse en un plano bidimensional estructurado.

Contenedor grid y elementos grid

Para usar Grid, debes establecer display: grid en un elemento padre. Ese padre se convierte en el grid container y sus hijos directos se convierten en grid items.

/* style.css */
.container {
  display: grid;
}

Una vez que el contenedor es un grid, defines cuántas columnas y filas tiene, qué ancho tienen y cómo se ubican los elementos dentro de ellas. Los elementos que no se posicionan explícitamente son ubicados automáticamente por el algoritmo de grid, llenando las celdas vacías en orden.

Columnas y filas de la plantilla de Grid

Las propiedades más fundamentales de Grid son grid-template-columns y grid-template-rows. Estas definen las pistas (tracks) —las columnas y filas— de tu grid.

/* style.css */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: auto 1fr auto;
}

• 200px 1fr 2fr crea tres columnas: una columna fija de 200 píxeles y luego dos columnas flexibles que dividen el espacio restante en una proporción de 1 a 2.
• auto 1fr auto crea tres filas: la primera y la última se ajustan al tamaño de su contenido (shrink-wrap), mientras que la fila central se expande para llenar la altura disponible.

También puedes usar el atajo grid-template-columns para definir todo en un solo lugar:

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  gap: 1rem;
}

La unidad fr

La unidad fr significa fracción del espacio restante (fraction of remaining space). Distribuye el espacio disponible proporcionalmente entre las pistas después de haber contabilizado los tamaños fijos.

/* style.css */
.grid {
  grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
}

/* style.css */
.grid {
  grid-template-columns: 200px 1fr 2fr; /* fixed + two flexible columns */
}

En el segundo ejemplo, la primera columna ocupa 200 píxeles; luego, el resto se divide de modo que la tercera columna reciba el doble de espacio que la segunda. La unidad fr es la forma más común de dimensionar las pistas de Grid porque se escala naturalmente con el contenedor.

repeat(), auto-fill y auto-fit

Escribir el mismo valor varias veces es tedioso. La función repeat() te permite repetir un patrón de tracks:

/* style.css */
.grid {
  grid-template-columns: repeat(4, 1fr); /* four equal columns */
}

auto-fill y auto-fit van un paso más allá. Repiten un patrón de tracks tantas veces como quepan en el contenedor:

/* style.css */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

• auto-fill crea tantos tracks como quepan, incluso si algunos quedan vacíos.
• auto-fit colapsa los tracks vacíos, expandiendo los restantes para llenar el espacio.

En la práctica, se comportan de manera idéntica cuando se combinan con minmax(), por lo que la elección rara vez es determinante.

minmax()

minmax() define un rango de tamaño para una pista: un mínimo y un máximo:

minmax(200px, 1fr)

Esto significa que la pista tendrá al menos 200 píxeles de ancho, pero puede crecer hasta ocupar 1fr del espacio restante. Combinado con auto-fill o auto-fit, minmax() es el motor detrás de las grids responsivas que se adaptan sin necesidad de media queries.

Grid gap

La propiedad gap define el espacio entre los elementos del grid:

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

Puedes configurar los espacios de filas y columnas de forma independiente:

/* style.css */
.grid {
  row-gap: 1rem;
  column-gap: 2rem;
}

El gap solo crea espacio entre los elementos, no alrededor de los bordes del contenedor, lo que resulta más limpio que añadir márgenes a los elementos del grid.

Líneas de cuadrícula y celdas de cuadrícula

Las líneas de cuadrícula son las líneas divisorias horizontales y verticales que definen la estructura de la cuadrícula. Las columnas se numeran de izquierda a derecha empezando por el 1, y las filas de arriba hacia abajo empezando por el 1. Los espacios entre las líneas se denominan celdas de cuadrícula.

/* style.css */
.item {
  grid-column: 1 / 3; /* spans from line 1 to line 3 (two columns) */
  grid-row: 1 / 2;    /* spans from line 1 to line 2 (one row) */
}

Las líneas también pueden ser negativas: -1 se refiere a la última línea. Comprender las líneas es fundamental para lograr una ubicación precisa de los elementos.

Ubicación de elementos en el Grid

Puedes controlar dónde se ubica cada elemento utilizando las propiedades de posicionamiento:

• grid-column — qué columnas ocupa el elemento.
• grid-row — qué filas ocupa el elemento.
• grid-area — un atajo para row-start / column-start / row-end / column-end.

/* style.css */
.header {
  grid-column: 1 / -1; /* span all columns */
  grid-row: 1;
}

.sidebar {
  grid-column: 1;
  grid-row: 2 / 4;
}

.main {
  grid-column: 2 / -1;
  grid-row: 2 / 4;
}

Los elementos que no están posicionados explícitamente son ubicados automáticamente por el algoritmo del grid, llenando las celdas de izquierda a derecha y de arriba hacia abajo.

Áreas de grid nombradas

grid-template-areas te permite dibujar tu layout mediante strings, asignando un nombre a cada región:

/* style.css */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 1rem;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Esto es extremadamente legible. Puedes ver la forma del layout directamente en el CSS, y reorganizar el diseño es tan sencillo como reescribir el string de las template areas.

Alineación de Grid

Grid ofrece potentes controles de alineación que funcionan tanto en el contenedor como en los elementos individuales.

Alineación a nivel de contenedor:

/* style.css */
.grid {
  justify-items: center;  /* align items horizontally within their cell */
  align-items: center;    /* align items vertically within their cell */
  justify-content: center; /* align the grid tracks within the container */
  align-content: center;   /* align the grid tracks vertically within the container */
}

Alineación a nivel de elemento:

/* style.css */
.item {
  justify-self: end;
  align-self: start;
}

Estas propiedades utilizan los mismos valores que Flexbox — start, end, center, stretch y otros — por lo que la curva de aprendizaje es sencilla si ya conoces la alineación de Flexbox.

Patrones comunes de CSS Grid

Layout “Holy Grail”:

/* style.css */
.page {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}

Cuadrícula de tarjetas responsiva:

/* style.css */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Dashboard con barra lateral fija:

/* style.css */
.dashboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.dashboard-header { grid-column: 1 / -1; }
.dashboard-nav    { grid-area: nav / 1 / -1 / 2; }
.dashboard-main   { grid-area: main / 2 / -1 / 3; }

Contenido a ancho completo (full-bleed):

/* style.css */
.content {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

.content > * {
  grid-column: 2; /* center text in the narrow column */
}

Grillas responsivas sin media queries

Una de las mayores fortalezas de Grid es la capacidad de crear layouts responsivos sin necesidad de media queries. La combinación de auto-fit + minmax() se encarga de ello:

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

A medida que el viewport se reduce, las columnas se colapsan automáticamente. Cuando crece, aparecen nuevas columnas. No se requieren breakpoints. Este patrón funciona para grillas de tarjetas, galerías de imágenes, campos de formularios y casi cualquier componente que necesite adaptarse.

Para tener un mayor control, puedes añadir media queries encima:

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

Cuándo usar Grid vs Flexbox

La respuesta corta: Grid para dos dimensiones, Flexbox para una.

• Usa Grid cuando necesites organizar elementos en filas y columnas: layouts de página, dashboards, galerías de imágenes o rejillas de tarjetas.
• Usa Flexbox cuando necesites alinear o distribuir elementos a lo largo de un solo eje: barras de navegación, layouts de formularios, centrado de contenido o espaciado de elementos en una fila.

En la práctica, la mayoría de los proyectos utilizan ambos. Una página puede usar Grid para la estructura general y Flexbox para los componentes individuales dentro de esas áreas de grid. Se complementan entre sí, no compiten.

Mejores prácticas

• Usa grid-template-areas para los layouts de página: hace que el diseño sea legible y fácil de reorganizar.
• Prefiere auto-fit + minmax() para grids de componentes responsivos en lugar de escribir media queries para cada breakpoint.
• Usa gap en lugar de márgenes en los elementos del grid: mantiene el espaciado consistente y evita huecos en los bordes.
• Nombra tus áreas de grid de forma significativa — header, sidebar, main — y no area1, area2.
• Combina Grid y Flexbox: Grid para el layout macro y Flexbox para la alineación micro dentro de los componentes.
• Evita el exceso de grids: si una fila simple de Flexbox resuelve el problema, no recurras a Grid.

Errores comunes

• Usar grid para todo cuando Flexbox sería más sencillo.
• Olvidar que gap sustituye a los márgenes, lo que provoca un espaciado doble entre elementos.
• Confundir auto-fill y auto-fit cuando ambos se comportan igual con minmax().
• No utilizar áreas de grid nombradas, lo que resulta en posicionamientos numéricos difíciles de mantener.
• Sobrecomplicar los layouts con demasiados posicionamientos explícitos cuando el auto-posicionamiento funciona correctamente.
• Asumir que Grid es solo para el layout de la página; también funciona para componentes.

¿Vale la pena aprender CSS Grid en 2026?

Absolutamente. CSS Grid cuenta ahora con soporte universal y se ha convertido en la herramienta predeterminada para el diseño de layouts en la web. Todos los frameworks principales —React, Vue, Svelte, Astro— renderizan HTML que se estiliza con CSS, y entender Grid significa que puedes construir cualquier layout sin pelearte con tus herramientas. Los días de los hacks con float y los clearfixes han terminado, y los desarrolladores que dominan Grid escriben hojas de estilo más limpias, mantenibles y responsive. Ya sea que estés construyendo una landing page sencilla o un dashboard complejo, Grid te ofrece una precisión y flexibilidad que ningún otro método de layout de CSS puede igualar.

Cómo aprender CSS Grid

Una ruta práctica:

1. Aprende display: grid, grid-template-columns y grid-template-rows.
2. Entiende la unidad fr y cómo distribuye el espacio.
3. Practica auto-fit + minmax() para crear grids responsivas.
4. Construye un layout “Holy Grail” con grid-template-areas.
5. Aprende el posicionamiento de elementos con grid-column y grid-row.
6. Explora las propiedades de alineación: justify-items, align-items, justify-content, align-content.
7. Construye proyectos reales —un dashboard, una galería de fotos, una página de precios— hasta que Grid te resulte natural.

A partir de ahí, combina Grid con Flexbox y técnicas responsivas para crear layouts completos y listos para producción. Nuestro tutorial interactivo de CSS te guía paso a paso con ejercicios prácticos.