Flexbox es fantástico para ordenar elementos en una fila o en una columna. Pero hay momentos en los que necesitas algo más ambicioso: filas y columnas al mismo tiempo. Una cuadrícula de verdad. Un tablero. Un layout con dos dimensiones donde cada celda tiene su sitio exacto.
Ahí aparece CSS Grid.
Si Flexbox es excelente organizando una fila de invitados, Grid es el arquitecto que diseña todo el salón: decide dónde van las mesas, cuántas hay, qué tamaño tiene cada una y cómo se reparten en el plano.
Grid es un sistema de layout bidimensional. Esa palabra grande significa algo simple: puede controlar a la vez:
Igual que con Flexbox, todo empieza activándolo en el contenedor padre con una sola línea:
Con eso, el elemento .tablero se convierte en un contenedor grid, y sus hijos pasan a comportarse como celdas dentro de una cuadrícula.
Casi. Si únicamente pones display: grid, los hijos se apilan en una sola columna (porque todavía no le has dicho cuántas columnas quieres). El verdadero poder de Grid llega cuando defines la estructura de la cuadrícula, y eso lo verás en la próxima lección con grid-template-columns.
Pero el primer paso siempre es el mismo: encender Grid en el padre.
Aquí hay una idea muy importante: Grid tiene auto-placement. Suena técnico, pero significa algo bastante humano: cuando no le das instrucciones especiales a cada hijo, Grid los va colocando en la siguiente celda libre.
Si defines tres columnas y tienes seis elementos, Grid hará esto:
Y si tienes siete, ocho o veinte elementos, seguirá creando filas nuevas según las necesite. Tú diseñas la estructura general; Grid va rellenando el tablero sin pedir permiso cada cinco segundos.
Para que Grid deje de parecer magia, piensa en estas tres piezas:
En esta primera toma de contacto no hace falta dominar todos los nombres técnicos. Lo importante es entender la lógica: el padre crea la cuadrícula, y los hijos entran dentro.
Si te suena familiar, es porque la regla de oro se repite:
No pongas display: grid a cada celda. Lo activas una sola vez en el contenedor, y los hijos entran automáticamente en el sistema de la cuadrícula.
Porque resuelven problemas diferentes. No son rivales: son herramientas distintas para tareas distintas.
Algunos casos típicos para cada uno:
| Usa Flexbox para... | Usa Grid para... |
|---|---|
| Una barra de navegación | Una galería de imágenes |
| Botones alineados | La portada de un periódico |
| Un header con logo y menú | Un dashboard con varias zonas |
| Una lista de tags | Un calendario |
En proyectos reales, lo más habitual es combinarlos: Grid para la estructura general de la página, y Flexbox dentro de cada zona para alinear sus elementos.
No compiten. Se complementan. Son como dos herramientas distintas en la caja del desarrollador que ya no quiere sufrir gratis.
Una vez entendido display: grid, las siguientes preguntas naturales son:
La buena noticia es que Grid responde a todas esas preguntas con bastante elegancia. La mala es que, cuando lo descubras, luego te molestará cualquier layout hecho a martillazos.
Convierte .tablero en un contenedor grid usando display: grid. En la próxima lección le darás forma a la cuadrícula con columnas de verdad.
Acabas de pasar de alinear cajas a diseñar superficies...