¿Qué es CSS Grid?
CSS Grid Layout es un sistema de diseño bidimensional integrado en los navegadores modernos. Define un contenedor de cuadrícula con display: grid, luego controla las columnas con grid-template-columns y las filas con grid-template-rows. Las unidades fraccionarias (fr) distribuyen el espacio disponible proporcionalmente. Los elementos hijos pueden abarcar múltiples columnas o filas usando grid-column: span N y grid-row: span N.
Cómo usar el Generador de CSS Grid
-
Configure el número de columnas y filas usando los campos numéricos (1–12 cada uno).
-
Ajuste grid-template-columns y grid-template-rows para controlar los tamaños (ej. 1fr 2fr, 200px auto).
-
Configure el espacio entre celdas (ej. 10px, 1rem).
-
Haga clic en cualquier celda de la vista previa para seleccionarla (se vuelve naranja).
-
Configure col-span y row-span en el panel Expansión de celda, luego haga clic en Aplicar. Las celdas con expansión se vuelven verdes.
-
Haga clic en la pestaña CSS o HTML para cambiar el formato de salida, luego copie al portapapeles.
-
Haga clic en Restablecer todo para comenzar con una nueva cuadrícula 3×3.