CSS Grid: La guía completa para principiantes y avanzados

CSS Grid Layout (o simplemente CSS Grid) es un sistema de diseño bidimensional que ha cambiado por completo la forma en que creamos interfaces web.

Durante años, CSS nos ha permitido maquetar páginas, pero siempre con soluciones improvisadas: primero con tablas, luego con flotados (floats), posicionamiento y inline-block. Ninguno de estos métodos fue diseñado específicamente para la maquetación y, por eso, tenían muchas limitaciones (como la falta de alineación vertical).

Flexbox es un gran avance en diseño web, pero su enfoque unidimensional hace que no siempre sea la mejor opción. Aquí es donde CSS Grid brilla: es el primer módulo creado con el propósito exclusivo de resolver los problemas de diseño web, permitiéndonos estructurar nuestras interfaces de manera más intuitiva y eficiente.

En esta guía, exploraremos los conceptos clave de Grid según la versión más reciente de la especificación. No abordaremos la sintaxis obsoleta de Internet Explorer, aunque Grid sigue siendo compatible con IE 11.

Conceptos básicos de CSS Grid

Desde marzo de 2017, la mayoría de los navegadores incorporaron soporte nativo y sin prefijos para CSS Grid, incluyendo Chrome, Firefox, Safari (también en iOS) y Opera.

Por otro lado, Internet Explorer 10 y 11 lo admiten, pero con una implementación antigua y una sintaxis obsoleta. ¡El momento de empezar a usar Grid es ahora!

Para comenzar, lo primero es definir un contenedor como una cuadrícula con display: grid. Luego, se establecen las dimensiones de las filas y columnas con grid-template-columns y grid-template-rows. Finalmente, se ubican los elementos hijos dentro de la cuadrícula con grid-column y grid-row.

Al igual que Flexbox, el orden en el código fuente no afecta la posición de los elementos en la cuadrícula.

Esto significa que puedes reordenar tu diseño fácilmente con media queries, adaptándolo a distintos tamaños de pantalla con solo unas pocas líneas de CSS.

Imagina definir toda la estructura de una página y luego reorganizarla completamente para dispositivos móviles sin modificar el HTML.

CSS Grid es uno de los módulos más potentes que se han incorporado a CSS, brindando flexibilidad y control total sobre el diseño de nuestras interfaces.

Te dejo una gráfica para que sea más visual:

Imagen tomada de platzi.

Términos clave en CSS Grid

Contenedor: El elemento padre que define la cuadrícula.

Ítem: Cada elemento hijo dentro de la cuadrícula.

Línea (grid line): Las líneas horizontales y verticales que separan las celdas.

Celda (grid cell): La unidad mínima de la cuadrícula, equivalente a un solo "cuadro".

Banda (grid track): Una fila o columna completa dentro de la cuadrícula.

Área (grid area): Un conjunto de celdas que forman una región dentro de la cuadrícula.

Grid Container

Es el elemento al que se le aplica display: grid; y actúa como el contenedor principal de todos los elementos de la cuadrícula. En este ejemplo, el contenedor es el grid container.

<div class="contenedor">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

Grid Item

Son los elementos hijos directos del contenedor de la cuadrícula. En este ejemplo, los elementos item son grid items, pero sub-item no lo es.

<div class="contenedor">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Grid Line

Son las líneas divisorias que conforman la estructura de la cuadrícula. Pueden ser verticales (líneas de columna) o horizontales (líneas de fila) y se encuentran a ambos lados de una fila o columna. En este ejemplo, la línea amarilla representa una línea de columna.

Grid Cell

Es el espacio comprendido entre dos líneas de fila y dos líneas de columna adyacentes. Representa la unidad más pequeña dentro de la cuadrícula. En este ejemplo, la grid cell está ubicada entre las líneas de fila 1 y 2 y las líneas de columna 2 y 3.

Grid Track

Es el espacio comprendido entre dos líneas de la cuadrícula adyacentes. Puede representar una fila o una columna dentro de la cuadrícula. En este ejemplo, el grid track se encuentra entre la segunda y tercera línea de fila.

Grid Area

Es el espacio total delimitado por cuatro líneas de la cuadrícula. Puede estar compuesto por una o varias grid cells. En este ejemplo, el grid area se encuentra entre las líneas de fila 1 y 3 y las líneas de columna 1 y 3.

Propiedades de CSS Grid

CSS Grid se compone de una serie de propiedades que se aplican tanto al contenedor de la cuadrícula (grid container) como a los elementos de la cuadrícula (grid items).

Propiedades del Grid Container

Estas propiedades se aplican al elemento padre que define la cuadrícula:

display: grid / display: inline-grid
Define el contenedor como una cuadrícula.

grid-template-columns
Especifica el tamaño y número de columnas.

grid-template-rows
Define el tamaño y número de filas.

grid-template-areas
Permite nombrar áreas dentro de la cuadrícula.

grid-column-gap / column-gap
Espacio entre columnas.

grid-row-gap / row-gap

Espacio entre filas.

grid-gap / gap
Espacio entre filas y columnas.

justify-items
Alinea los elementos dentro de sus celdas en el eje horizontal.

align-items
Alinea los elementos dentro de sus celdas en el eje vertical.

place-items
Combinación de align-items y justify-items.

justify-content
Alinea la cuadrícula dentro del contenedor en el eje horizontal.

align-content
Alinea la cuadrícula dentro del contenedor en el eje vertical.

place-content
Combinación de align-content y justify-content.

grid-auto-columns
Define el tamaño de las columnas generadas automáticamente.

grid-auto-rows
Define el tamaño de las filas generadas automáticamente.

grid-auto-flow
Controla cómo se colocan los elementos automáticamente en la cuadrícula.

Propiedades del Grid Item

Estas propiedades se aplican a los elementos hijos dentro de la cuadrícula:

grid-column-start
Define en qué línea de columna comienza el elemento.

grid-column-end
Define en qué línea de columna termina el elemento.

grid-column
Atajo para grid-column-start y grid-column-end.

grid-row-start
Define en qué línea de fila comienza el elemento.

grid-row-end
Define en qué línea de fila termina el elemento.

grid-row
Atajo para grid-row-start y grid-row-end.

grid-area
Asigna un elemento a un área de la cuadrícula nombrada con grid-template-areas.

justify-self
Alinea un elemento dentro de su celda en el eje horizontal.

align-self
Alinea un elemento dentro de su celda en el eje vertical.

place-self
Combinación de align-self y justify-self.

¿Quieres ir un paso más allá?

Si estás interesado en potenciar tu carrera como desarrollador frontend o desarrollador Web, te recomiendo leer este artículo:

Cómo iniciar y crecer como desarrollador frontend en 2025

En él encontrarás consejos prácticos, recursos y estrategias para comenzar y avanzar en el mundo del desarrollo frontend.

Ejemplos prácticos

Crear una cuadrícula de 3 columnas y 2 filas:

.container {
  display: grid;
  grid-template-columns: 100px 200px 150px;
  grid-template-rows: 50px 100px;
}

Con la propiedad display: grid, indicamos que el elemento será un contenedor de cuadrícula. Luego, con grid-template-columns y grid-template-rows, establecemos el tamaño y la cantidad de columnas y filas que compondrán la cuadrícula.

Es importante asegurarnos de que el número de elementos hijos dentro del grid sea el adecuado para la estructura que definimos. La cantidad de filas y columnas que configuremos con grid-template-columns y grid-template-rows determinará cómo se distribuyen los elementos.

Por ejemplo, si definimos una cuadrícula de 2x2, tendremos espacio para 4 elementos; una 2x3 podrá contener 6 elementos, una 2x4 albergará 8 elementos, y así sucesivamente.

Si el número de elementos no coincide con la cantidad de celdas disponibles, pueden ocurrir dos situaciones:

• Si hay más elementos de los esperados, los adicionales se colocarán automáticamente en nuevas filas sin un formato definido, a menos que establezcamos reglas específicas.

• Si hay menos elementos, solo se ocuparán las celdas necesarias, y las restantes quedarán vacías.

A medida que añadimos más elementos al grid, podemos ajustar las propiedades grid-template-columns y grid-template-rows para expandir la estructura y acomodar el nuevo contenido de manera organizada.

Ver todos los detalles y ejemplos 🔥

Si quieres aprender más sobre CSS Grid con ejemplos prácticos, puedes leer el artículo completo aquí 👉 CSS Grid: La Guía Completa para Principiantes y Avanzados.

Te dejo el ejemplo final, ver ejemplo.

Conclusiones sobre CSS Grid

CSS Grid es una poderosa herramienta para diseñar layouts complejos de manera flexible y eficiente. A lo largo de este tema, hemos visto cómo estructurar cuadrículas utilizando display: grid y definir filas y columnas con grid-template-columns y grid-template-rows.

También exploramos conceptos clave como celdas, áreas, líneas y tracks, que nos permiten organizar mejor los elementos dentro del grid.

Te invito a visitar mi blog, donde encontrarás más contenido sobre JavaScript, React, CSS, IA, buenas prácticas y mucho más. 👉 johnserrano.co/blog ¡No te lo pierdas!

Gracias por leer. ❤️