Propiedad CSS grid-template-areas
Aprende a usar CSS grid-template-areas para nombrar regiones de cuadrícula, crear layouts visualmente y reorganizarlos con media queries.
La propiedad grid-template-areas te permite diseñar visualmente una cuadrícula CSS dibujando el layout con nombres en lugar de números. Se aplica a un contenedor de cuadrícula y se le pasa una cadena entre comillas por cada fila de la cuadrícula. Dentro de cada cadena se escribe un nombre para cada celda de columna, y las celdas que comparten el mismo nombre se combinan en una única área con nombre rectangular.
Cada elemento de la cuadrícula se coloca entonces haciendo referencia a uno de esos nombres con la propiedad grid-area — por ejemplo, grid-area: header; coloca ese elemento donde hayas escrito header en la plantilla. Como las cadenas se alinean unas bajo otras como un dibujo ASCII, el código fuente termina pareciéndose a la página que produce, lo que hace que los layouts complejos sean mucho más fáciles de leer y reorganizar que establecer grid-row-start, grid-column-start y sus variantes abreviadas de forma manual.
Referencia de la propiedad
| Valor inicial | none |
| Se aplica a | Contenedores de cuadrícula |
| Heredable | No |
| Animable | No |
| Versión | CSS Grid Layout Module Level 1 |
Sintaxis
grid-template-areas: none | <string>+;none es el valor predeterminado e indica que no se han definido áreas con nombre. De lo contrario, el valor es una o más cadenas entre comillas — una por fila.
Cómo interpretar las cadenas
Unas pocas reglas aclaran la sintaxis:
- Una cadena = una fila. Tres cadenas entre comillas crean tres filas; el número de nombres en cada cadena determina el número de columnas.
- Cada cadena debe contener el mismo número de tokens, de lo contrario el navegador trata toda la declaración como inválida y la ignora.
- Un nombre repetido abarca varias celdas. Escribir el mismo nombre en dos o más celdas adyacentes — horizontal, vertical o en un rectángulo — las fusiona en un área. La forma debe ser rectangular; una forma en L es inválida.
- Un punto (
.) marca una celda vacía que no pertenece a ningún área con nombre. Varios puntos consecutivos (p. ej.,...) cuentan como una sola celda vacía y son una convención habitual para mejorar la legibilidad. - Nombrar un área no dimensiona sus pistas. Usa grid-template-columns y grid-template-rows — o la abreviatura grid-template — para controlar las dimensiones.
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"menu main right"
"footer footer footer";
}Aquí header y footer abarcan las tres columnas, mientras que menu, main y right se sitúan uno junto al otro en la fila central.
Valores
| Valor | Descripción |
|---|---|
none | No se definen áreas de cuadrícula con nombre. Los elementos se colocan por otros medios (números de línea, span o colocación automática). |
<string>+ | Una o más cadenas entre comillas que dibujan la plantilla. Cada cadena representa una fila; cada token separado por espacios en blanco dentro de una cadena representa una celda. Los tokens repetidos forman áreas con nombre rectangulares; un token . es una celda sin nombre (vacía). |
Ejemplo básico de layout
El layout clásico de página — encabezado, barra lateral, contenido y pie de página — es la demostración más sencilla de por qué existen las áreas con nombre.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 { grid-area: header; }
.box2 { grid-area: menu; }
.box3 { grid-area: main; }
.box4 { grid-area: right; }
.box5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
"header header header header header header"
"menu main main main right right"
"menu footer footer footer footer footer";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box1">Header</div>
<div class="box2">Menu</div>
<div class="box3">Main</div>
<div class="box4">Right</div>
<div class="box5">Footer</div>
</div>
</body>
</html>Resultado
Celdas vacías con puntos
Un token de punto coloca un elemento en ningún área con nombre, dejando esa celda desocupada. En el ejemplo a continuación, item1 abarca las dos primeras columnas de una cuadrícula de cinco columnas; las tres celdas restantes de esa fila están vacías.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box { grid-area: item1; }
.grid-container {
display: grid;
grid-template-areas: "item1 item1 . . .";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Layouts responsivos con media queries
grid-template-areas se combina de forma natural con las media queries: simplemente reescribe las cadenas dentro del bloque del breakpoint y el layout se redibuja sin cambios en el marcado y sin necesidad de renumerar las líneas de la cuadrícula.
/* Mobile: single-column stack */
.page {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"menu"
"main"
"footer";
}
/* Desktop: sidebar left, content right */
@media (min-width: 700px) {
.page {
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"menu main"
"footer footer";
}
}Cada elemento de la cuadrícula conserva su nombre en grid-area; solo cambia la plantilla. Esta es la razón principal por la que las áreas con nombre se prefieren frente a la colocación por número de línea en los diseños responsivos.
Errores comunes
Las áreas deben ser rectangulares
Si el mismo nombre aparece en forma de L, en diagonal o en cualquier patrón no rectangular a lo largo de las celdas, el navegador trata toda la declaración grid-template-areas como inválida y recurre a none. Cada área con nombre debe formar un rectángulo continuo.
/* INVALID — "content" forms an L-shape */
.bad {
grid-template-areas:
"header header"
"content sidebar"
"content content"; /* content is now L-shaped → invalid */
}
/* VALID — "content" is rectangular */
.good {
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
}Todas las filas deben tener el mismo número de columnas
Cada cadena entre comillas debe tener el mismo número de tokens separados por espacios en blanco. Rellena las filas más cortas con tokens de punto para que las columnas se alineen:
/* INVALID — row 2 has only 2 tokens, row 1 has 3 */
.bad {
grid-template-areas:
"a a b"
"c c";
}
/* VALID — three tokens in every row */
.good {
grid-template-areas:
"a a b"
"c c .";
}Nombrar un área no dimensiona sus pistas
Las áreas con nombre le indican al navegador qué celdas van juntas, no qué tamaño tienen esas celdas. Combina siempre grid-template-areas con grid-template-columns y grid-template-rows:
.container {
display: grid;
grid-template-columns: 180px 1fr; /* sidebar fixed, content fluid */
grid-template-rows: 60px 1fr 40px; /* header, body, footer heights */
grid-template-areas:
"header header"
"nav content"
"nav footer";
}Los elementos sin área coincidente se colocan automáticamente
Si el nombre de grid-area de un hijo no coincide con ningún área de la plantilla, el navegador lo coloca automáticamente usando el algoritmo grid-auto-flow — cae en la siguiente celda implícita disponible en lugar de desaparecer.
La abreviatura grid-template
La propiedad grid-template combina grid-template-rows, grid-template-columns y grid-template-areas en una sola declaración:
.container {
display: grid;
grid-template:
"header header" 60px
"nav content" 1fr
"footer footer" 40px
/ 180px 1fr;
}El tamaño de fila sigue a cada cadena en la misma línea; los tamaños de columna van después de la / final. El resultado es idéntico a escribir las tres propiedades por separado.