Playground de CSS Grid
Crea y previsualiza diseños con CSS Grid en tiempo real: modo constructor, código a mano, preajustes y copia al instante
Controles
Vista previa en vivo
—
Cómo funciona el playground de CSS Grid
Crea diseños con CSS Grid de forma visual o escribiendo el código. Empieza con preajustes, personalízalos en tiempo real y copia CSS listo para producción.
Constructor visual
Define filas, columnas y separaciones de forma visual. Arrastra los controles o introduce valores exactos: la cuadrícula se actualiza en tiempo real. No necesitas saber CSS para empezar.
CSS a mano
Cambia al modo manual y escribe tú mismo grid-template-columns, grid-template-rows y gap. La vista previa refleja tu código mientras escribes.
Biblioteca de preajustes
Empieza con patrones de diseño habituales: santo grial, barra lateral, panel de control, cuadrícula de tarjetas y más. Cada preajuste genera código editable que puedes personalizar.
Copiar CSS
Copia en un clic el código CSS Grid generado. El resultado es limpio, está listo para producción y usa la sintaxis moderna de grid, compatible con todos los navegadores principales.
Preguntas frecuentes
CSS Grid es un sistema de maquetación bidimensional integrado en CSS. Permite definir filas y columnas y colocar elementos en las celdas sin floats ni trucos de posicionamiento. Grid es compatible con todos los navegadores modernos y es el estándar para diseños de página complejos.
Usa Grid para diseños bidimensionales en los que necesitas controlar filas y columnas a la vez: paneles de control, cuadrículas de tarjetas y plantillas de página. Usa Flexbox para la alineación en una sola dimensión: barras de navegación, grupos de botones y elementos en línea.
Sí. Un elemento de la cuadrícula puede ser a su vez un contenedor grid. Es habitual en los paneles de control: toda la página es una cuadrícula y cada panel tiene sus propias subcuadrículas para su diseño interno.
La unidad fr significa “fracción del espacio disponible” (fraction). 1fr 2fr quiere decir que la segunda columna recibe el doble de espacio que la primera. Es la forma más flexible de dimensionar las pistas de la cuadrícula y evita calcular porcentajes a mano.