CSS Grid irregular: cómo crear layouts avanzados y responsive

Los grids irregulares son una de las cosas más potentes que tiene CSS Grid.

Cuando un grid es regular, todos los elementos suelen ocupar espacios parecidos y la estructura se mantiene bastante simple. Pero hay veces donde no necesitas o no quieres hacer un grid regular, sino una composición donde algunos elementos ocupen más espacio que otros.

Ahí es donde entran los grids irregulares.

Qué es un grid irregular en CSS

Un grid irregular es una estructura donde los elementos no tienen todos el mismo tamaño ni ocupan exactamente el mismo espacio dentro de la cuadrícula.

Con CSS Grid se puede indicar desde dónde hasta dónde va un elemento, tanto en filas como en columnas.

Esto permite crear diseños más visuales, más dinámicos y menos rígidos.

Estructura básica de un grid

Para empezar, se puede tener un contenedor padre con varios elementos dentro.

<div class="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>

Ese contenedor padre es el que se convierte en grid. Luego, desde CSS, se definen las columnas, las filas y el espacio entre elementos.

.parent { display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: 50px 100px 50px; gap: 5px; }

Con esto ya se crea una cuadrícula. Después se puede empezar a modificar cada elemento para que ocupe posiciones diferentes dentro del grid.

Seleccionar elementos concretos del grid

Para aplicar estilos a un elemento específico, se puede usar una clase propia o un selector como :nth-child().

Por ejemplo, si quieres seleccionar el segundo elemento del grid, puedes usar:

.parent div:nth-child(2) { background: goldenrod; }

Esto selecciona el segundo elemento dentro del contenedor padre.

📌 Recomendación: usar :nth-child() puede servir en casos concretos, pero casi siempre es mejor colocar una clase al elemento si puedes modificar el HTML.

Usar grid-row y grid-column

Las propiedades grid-row y grid-column permiten indicar en qué parte del grid se coloca un elemento.

Con estas propiedades puedes decidir desde qué línea empieza y hasta dónde se desplaza.

.parent div:nth-child(2) { grid-row: 2; grid-column: 1 / span 2; }

En este caso, el segundo elemento empieza en la fila 2 y en las columnas ocupa desde la línea 1, desplazándose dos espacios.

Entender las líneas del grid

En CSS Grid es importante entender que las posiciones se cuentan por líneas.

Por ejemplo, si tienes varias columnas, no solo cuentas las columnas, también cuentas las líneas que las separan.

Cuando escribes algo como:

grid-column: 1 / 2;

Estás indicando que el elemento va desde la línea 1 hasta la línea 2.

Pero cuando usas span, el comportamiento cambia:

grid-column: 1 / span 2;

En ese caso, estás indicando que el elemento empieza en la línea 1 y se desplaza dos espacios.

Propiedad	Qué indica
grid-column: 1 / 2;	Va desde la línea 1 hasta la línea 2.
grid-column: 1 / span 2;	Empieza en la línea 1 y se desplaza dos espacios.

Propiedades individuales de Grid

Además de usar los atajos grid-row y grid-column, también existen propiedades individuales.

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Estas propiedades permiten controlar con más detalle dónde empieza y dónde termina cada elemento.

.item { grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 2; }

También se puede usar el atajo:

.item { grid-row: 1 / 3; grid-column: 1 / 2; }

💡 Consejo: si estás empezando, puede ser más fácil practicar primero con las propiedades individuales y luego pasar a los atajos.

Cuándo usar grids irregulares

Los grids irregulares son útiles cuando quieres que algunos elementos ocupen más espacio que otros.

Por ejemplo, se pueden usar en:

• Galerías de imágenes.
• Calendarios visuales.
• Tarjetas destacadas.
• Portafolios.
• Secciones tipo revista.
• Diseños donde algunos bloques deben llamar más la atención.

En vez de tener una cuadrícula donde todo se ve igual, puedes elegir ciertos elementos para que ocupen más filas o más columnas.

Layouts tipo masonry o Pinterest

Durante mucho tiempo se usaron librerías para crear diseños tipo masonry, parecidos a los tablones de Pinterest.

Este tipo de diseño funciona como un grid, pero no es completamente regular. Los elementos pueden tener diferentes alturas y se van acomodando para llenar mejor los espacios.

El problema es que, con CSS Grid tradicional, hacer este tipo de diseño puede ser más complejo cuando cada elemento tiene un tamaño diferente.

Qué es Grid Lanes

Grid Lanes es una forma moderna de crear layouts tipo masonry usando CSS.

La idea es poder crear una estructura donde los elementos se adapten mejor y no queden tantos huecos vacíos cuando las imágenes o tarjetas tienen diferentes tamaños.

Un ejemplo de estructura podría ser un contenedor con muchas imágenes dentro.

<div class="container"> <img src="imagen-1.jpg" alt=""> <img src="imagen-2.jpg" alt=""> <img src="imagen-3.jpg" alt=""> <img src="imagen-4.jpg" alt=""> </div>

Luego se puede trabajar el contenedor con una estructura responsive usando repeat, auto-fill, minmax y 1fr.

.container { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

Con una estructura así, el diseño puede adaptarse mejor al tamaño disponible de la pantalla.

⚠️ Importante: Grid Lanes es una función muy nueva. Puede servir para practicar y probar, pero no conviene usarla en producción sin revisar primero la compatibilidad del navegador.

Crear un grid responsive

Una parte importante de estos layouts es que también sean responsive.

Una forma sencilla de lograrlo es usando repeat, auto-fill, minmax y 1fr.

.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

Esto permite que las columnas se adapten al espacio disponible.

Cuando hay más espacio, pueden entrar más columnas. Cuando el espacio se reduce, los elementos se acomodan en menos columnas.

Diferencia entre grid regular y grid irregular

Tipo de grid	Características	Uso común
Grid regular	Todos los elementos mantienen una estructura similar.	Listados simples, tarjetas iguales o secciones ordenadas.
Grid irregular	Algunos elementos pueden ocupar más filas o columnas.	Galerías, calendarios, layouts destacados y diseños creativos.
Masonry o Grid Lanes	Los elementos se acomodan según su tamaño para reducir espacios vacíos.	Diseños tipo Pinterest o galerías con imágenes de diferentes alturas.

Resumen de propiedades importantes

Propiedad	Para qué sirve
display: grid;	Convierte un contenedor en una cuadrícula.
grid-template-columns	Define las columnas del grid.
grid-template-rows	Define las filas del grid.
gap	Agrega espacio entre los elementos.
grid-row	Indica la posición del elemento en las filas.
grid-column	Indica la posición del elemento en las columnas.
span	Indica cuántos espacios debe ocupar un elemento.
:nth-child()	Permite seleccionar un elemento según su posición.

Conclusión

CSS Grid permite crear estructuras regulares e irregulares con mucho control.

Cuando quieres que todos los elementos tengan una distribución simple, un grid regular puede ser suficiente. Pero cuando necesitas que algunos elementos ocupen más espacio o tengan una posición diferente, puedes usar grid-row, grid-column y span.

También existen propuestas modernas como Grid Lanes para crear layouts tipo masonry, aunque todavía conviene tratarlas con cuidado y revisar su compatibilidad antes de usarlas en producción.

Lo importante es entender cómo funcionan las líneas del grid, cómo se posicionan los elementos y cómo se puede adaptar la estructura para crear diseños más avanzados y responsive.