Display Grid en CSS tiene fama de salvador. De herramienta definitiva. De solución elegante a muchos de los problemas de maquetación que durante años hemos ido resolviendo con trucos, márgenes imposibles y algún que otro position: absolute que nadie se atrevía a tocar.
Y sí, CSS Grid es una herramienta potentísima.
Pero también es ese compañero de trabajo brillante que, de vez en cuando, consigue que dudes de tus propias capacidades.
Porque cuando funciona, parece magia.
Y cuando no entiendes por qué no funciona, parece que el problema eres tú.
¿Qué es display grid en CSS y para qué sirve?
Cuando escribimos display: grid en CSS estamos convirtiendo un elemento en un contenedor Grid. A partir de ahí podemos organizar sus elementos hijos utilizando filas, columnas y áreas.
CSS Grid es un sistema de maquetación bidimensional. Esto significa que permite controlar simultáneamente filas y columnas, algo que lo diferencia de Flexbox, que está pensado principalmente para trabajar en una dimensión cada vez.
Dicho de una forma menos técnica: Grid permite decidir cómo se estructura un diseño y cuánto espacio ocupa cada elemento.
Puedes definir columnas, establecer filas, crear áreas y distribuir los elementos dentro de una estructura.
Por ejemplo, una página puede tener:
- Una cabecera a todo lo ancho.
- Un menú lateral.
- Un contenido principal.
- Una barra secundaria.
- Un pie de página.
Todo ello puede organizarse mediante una estructura Grid sin necesidad de recurrir a soluciones improvisadas.
El momento en el que CSS Grid te hace sentir imparable
Hay días en los que todo encaja.
Defines las columnas.
Asignas las áreas.
Ajustas los espacios.
Y de repente ocurre.
Funciona.
No hay parches. No hay márgenes negativos. No hay cinco elementos con position: absolute intentando mantenerse en su sitio.
Solo una estructura clara.
Es en ese momento cuando entiendes por qué CSS Grid es una de las herramientas fundamentales del diseño web moderno.
En Lumazaki utilizamos Grid cuando la estructura del diseño necesita ese nivel de control. La herramienta no es el objetivo: es el medio para conseguir una interfaz clara, flexible y adaptada a diferentes tamaños de pantalla.
Diseñar no es colocar cosas
Y aquí está una de las partes más interesantes.
Grid no consiste simplemente en colocar cajas dentro de una cuadrícula.
La maquetación también habla de jerarquía visual.
Qué elemento debe destacar.
Qué contenido necesita más espacio.
Dónde empieza una sección.
Qué elementos pueden agruparse.
Cuánto espacio debe existir entre ellos.
Incluso los espacios vacíos forman parte del diseño.
Por eso, antes de escribir CSS conviene haber pensado la estructura.
Cuando el diseño tiene sentido, el código tiene mucho más fácil acompañarlo.
Grid frente a Flexbox: ¿cuándo utilizar cada uno?
Una de las dudas más habituales al empezar con CSS moderno es saber cuándo utilizar Grid y cuándo Flexbox.
La diferencia no es complicada.
Flexbox resulta especialmente útil cuando quieres organizar elementos principalmente en una dirección: una fila o una columna.
Por ejemplo:
- Un menú de navegación.
- Una fila de botones.
- Un grupo de elementos alineados.
- Una lista de tarjetas sencilla.
Grid, en cambio, resulta especialmente interesante cuando necesitas controlar simultáneamente filas y columnas.
Por ejemplo:
- La estructura general de una página.
- Una galería.
- Un dashboard.
- Una composición con diferentes áreas.
- Un conjunto de tarjetas con una estructura determinada.
Y, por supuesto, no tienes que elegir uno para siempre.
Grid y Flexbox pueden trabajar juntos.
De hecho, es bastante habitual utilizar Grid para la estructura general de una página y Flexbox para organizar elementos dentro de cada componente.
Cuando Grid te pone contra las cuerdas
También están esos otros días.
Los de una columna rebelde.
Un elemento que no aparece donde debería.
Una altura que no entiendes.
Un grid-template-areas que parece perfectamente lógico y, aun así, no funciona.
Y entonces ocurre algo que ningún desarrollador quiere admitir:
recuerdas las tablas.
No con cariño.
Pero sí con cierta nostalgia.
No porque fueran mejores.
Sino porque eran previsibles.
Por suerte, antes de volver a ellas siempre puedes revisar algo tan sencillo como la estructura del contenedor, las filas, las columnas y las propiedades que estás aplicando a los elementos hijos.
Muchas veces el problema no está en Grid.
Está en que hemos pedido al navegador que haga algo diferente de lo que nosotros creíamos haberle pedido.
Algunas propiedades de CSS Grid que conviene conocer
No necesitas memorizar todas las propiedades de Grid para empezar a utilizarlo.
Pero hay algunas especialmente importantes:
grid-template-columns permite definir las columnas del grid.
grid-template-rows permite establecer sus filas.
gap controla el espacio entre filas y columnas.
grid-column y grid-row permiten decidir dónde se coloca un elemento.
grid-template-areas permite crear áreas con nombres y organizar la estructura de una manera muy visual.
Por ejemplo, grid-template-areas puede hacer que la estructura conceptual de una página resulte casi legible como un pequeño mapa.
Y ahí está una de las grandes ventajas de Grid: el código puede llegar a describir bastante bien la estructura visual que tienes en la cabeza.
Responsive design: donde Grid realmente brilla
Una de las grandes ventajas de CSS Grid aparece cuando la pantalla cambia de tamaño.
Una composición que funciona perfectamente en escritorio puede necesitar otra distribución en una tablet o en un móvil.
Con Grid podemos modificar las columnas, cambiar la posición de determinados elementos o incluso reorganizar completamente las áreas mediante media queries.
Esto permite crear diseños adaptables sin tener que construir una versión completamente diferente de cada página.
Y aquí aparece una idea fundamental del diseño web:
no diseñamos para una pantalla concreta. Diseñamos para diferentes situaciones de uso.
Cómo usamos CSS Grid en Lumazaki
En Lumazaki no creemos en utilizar una herramienta simplemente porque esté de moda.
Grid tiene sentido cuando ayuda a construir una estructura más clara, flexible y mantenible.
A veces será la mejor solución.
Otras veces será Flexbox.
Y en determinados casos puede existir una solución todavía más sencilla.
Porque utilizar una tecnología más avanzada no significa automáticamente hacer un trabajo mejor.
La mejor herramienta es la que resuelve el problema sin crear otros.
Conclusión: Grid no es el problema
display: grid no es caótico.
Es exigente, sí.
Pero también es bastante honesto.
Te obliga a entender la estructura que estás intentando construir. Te hace pensar en filas, columnas, jerarquías y relaciones entre elementos.
Y eso es precisamente lo interesante.
Porque maquetar una web no consiste únicamente en conseguir que las cosas estén en su sitio.
Consiste en conseguir que tengan sentido juntas.
CSS Grid puede ayudarte muchísimo con eso.
Solo hay una pequeña condición:
primero tienes que saber dónde quieres poner las cosas.
Y sí.
Eso último no lo puede solucionar ningún grid-template-columns.