CSS Grid Studio
Diseña layouts CSS Grid visualmente y copia el CSS listo para usar.
Diseño
Vista previa
CSS generado
Cómo funcionan las áreas de CSS Grid
grid-template-areas permite nombrar regiones de una grilla y organizarlas como un mapa visual: una cadena entre comillas por fila, cada palabra indica a qué área pertenece esa celda, y un punto (.) marca una celda vacía. Cada área nombrada debe formar un rectángulo sólido; si no, el navegador rechaza toda la declaración:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
grid-template-areas:
"header header header"
"sidebar main main";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
La unidad fr distribuye el espacio sobrante luego de restar las pistas de tamaño fijo (como px) — una pista 2fr toma el doble de espacio sobrante que una 1fr. Esta herramienta genera todo esto a partir de lo que pintas, según la especificación W3C CSS Grid Layout Module Level 2 — sin librerías externas.
Preguntas frecuentes
¿Qué es grid-template-areas?
Una propiedad de CSS Grid que permite nombrar regiones de la grilla y organizarlas como un mapa visual, una cadena entre comillas por fila, en vez de posicionar cada elemento por número de fila/columna.
¿Qué significa la unidad fr?
fr significa "fracción". Una pista de 1fr toma una parte del espacio sobrante luego de restar las pistas de tamaño fijo; 2fr toma el doble de espacio sobrante que 1fr.
¿Por qué mi área no genera CSS válido?
grid-template-areas exige que cada área nombrada forme un rectángulo sólido de celdas. Si pintas una forma no rectangular, esta herramienta lo marca y la excluye del CSS generado en vez de entregar una declaración rota.
¿Puedo exportar solo la cadena grid-template-areas?
Sí — está incluida al inicio del bloque de CSS generado junto a grid-template-columns, grid-template-rows y gap, más una regla grid-area por cada área nombrada.