2.5 CSS Grid

Grid coloca los elementos en dos dimensiones: filas y columnas a la vez. Es ideal para la maquetación general de la página y galerías.

Propiedad	Ejemplo	Efecto
display	grid	Activa la rejilla
grid-template-columns	repeat(3, 1fr) · 200px 1fr	Define las columnas (fr = fracción del espacio)
grid-template-rows	auto 1fr auto	Define las filas
gap	10px	Espacio entre celdas
grid-column / grid-row	span 2 · 1 / 3	Un elemento ocupa varias celdas

Maquetación con áreas

¿Flexbox o Grid?

Flexbox para colocar elementos en una línea (un menú, una fila de botones). Grid para la estructura de la página o una rejilla de elementos. Se pueden combinar: un Grid para la página y Flexbox dentro de cada zona.