Generador de CSS Grid
Construye diseños de cuadrícula CSS visualmente.
Preajustes de diseño (10)
Arrastra por las celdas para pintar un rectángulo o haz clic en una celda cada vez. Cada área con nombre debe seguir siendo rectangular.
Vista previa en vivo
Unidimensional: Generador de CSS Flexbox.
Crea una cuadrícula CSS con áreas con nombre
Pinta una cuadrícula de letras para áreas de plantilla, o elige un preajuste. La vista previa muestra cada región en un tono distinto.
Preguntas frecuentes
¿Qué es grid-template-areas?
Una forma de nombrar regiones de un diseño (header, sidebar, main…) y colocar elementos por nombre en vez de por número de línea. Haz clic en las celdas de abajo para pintar letras de área; el CSS se actualiza en vivo.
¿Puedo empezar con un preajuste?
Sí: diez preajustes de diseño, incluidos Holy grail, dashboard, magazine y app shell, cargan áreas con nombre en un clic.
¿Se sube algo?
No. El CSS se genera por completo en tu navegador.
Última actualización: