Generador visual de CSS Grid
Pinta las áreas de tu página, ajusta columnas y filas y obtén un CSS Grid responsive listo para copiar.
Importar grid-template-areas
Arrastra sobre las celdas para pintar un área rectangular con el pincel elegido.
Vista previa
.layout {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto auto;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
gap: 16px;
}
.header {
grid-area: header;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}
.aside {
grid-area: aside;
}
.footer {
grid-area: footer;
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
}
Notas
- El CSS es mobile first: el diseño móvil va por defecto y el de escritorio dentro de @media (min-width). Sin diseño móvil solo se genera uno.
- Con «Usar áreas con nombre» se genera grid-template-areas y grid-area; desactívalo para obtener posiciones por líneas (grid-column y grid-row).
- Tailwind v4 no tiene clases para grid-template-areas, así que se usan propiedades arbitrarias y el variante min-[Npx].
- El orden visual del grid no cambia el orden del HTML: mantén un orden lógico para lectores de pantalla.
Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
grid-template-areas es la forma más legible de describir un layout, pero escribir las cadenas a mano es propenso a errores: una celda de más, un área en forma de L o un nombre repetido invalidan toda la regla sin que el navegador avise. Este generador te deja dibujar el diseño directamente pintando celdas, comprueba que cada área sea un rectángulo y muestra el resultado real con CSS Grid. Puedes crear un segundo diseño para móvil, elegir entre áreas con nombre o posiciones por líneas y exportarlo como CSS mobile first o clases de Tailwind.
Características
- ✓Pinta áreas con nombre arrastrando sobre la cuadrícula
- ✓Columnas y filas con fr, px, %, auto, min-content, minmax() o fit-content() y validación en vivo
- ✓Columnas automáticas con repeat(auto-fit, minmax()) para rejillas que se adaptan solas
- ✓Diseño móvil opcional con punto de corte configurable y CSS mobile first
- ✓Detecta áreas no rectangulares, nombres no válidos y áreas que faltan en un diseño
- ✓Salida con grid-template-areas o con posiciones por líneas, y compresión con repeat()
- ✓Exporta CSS, HTML y clases de Tailwind v4 con propiedades arbitrarias
- ✓Plantillas: santo grial, panel de control, artículo con barra lateral y galería
¿Cómo crear un layout con CSS Grid?
- 1
Define columnas y filas
Añade pistas y dales tamaño con fr, px, auto o minmax(), o parte de una plantilla.
- 2
Pinta las áreas
Elige o crea un nombre de área y arrastra sobre las celdas que debe ocupar.
- 3
Añade el diseño móvil
Opcionalmente crea una versión para pantallas pequeñas y elige el punto de corte.
- 4
Copia el código
Elige CSS, HTML o Tailwind y copia el resultado.
Preguntas frecuentes
¿Qué es grid-template-areas?
Una propiedad que describe el layout con cadenas de texto, una por fila, donde cada palabra es el nombre del área que ocupa esa celda y el punto indica una celda vacía. Luego cada elemento se coloca con grid-area: nombre.
¿Por qué mi grid-template-areas no funciona?
Las causas habituales son que un área no forme un rectángulo, que las filas tengan distinto número de celdas o que el número de columnas no coincida con grid-template-columns. Si hay un error, el navegador ignora la declaración completa. El generador detecta esos casos.
¿Qué hace repeat(auto-fit, minmax(200px, 1fr))?
Crea tantas columnas de al menos 200 px como quepan y reparte el espacio sobrante entre ellas. Es la forma de hacer rejillas de tarjetas responsive sin media queries.
¿Qué significa fr?
Es una fracción del espacio libre del contenedor. Con columnas 1fr 2fr, la segunda recibe el doble de espacio restante que la primera, después de descontar huecos y pistas de tamaño fijo.
¿Por qué el CSS es mobile first?
Porque el diseño más sencillo, el de móvil, queda como base y el de escritorio se añade con @media (min-width). Así los móviles descargan y aplican menos reglas y es el mismo enfoque que usa Tailwind.
Herramientas relacionadas
Incrusta Generador de CSS Grid en tu web
Integra Generador de CSS Grid en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/css-grid-generator"
width="100%"
height="700"
frameborder="0"
title="Generador de CSS Grid — miguelacm.es"
></iframe>