Áreas Grid CSS
Ítems Grid enseñó números de línea y span. Las áreas con nombre plantean una pregunta más amable: ¿puedes dibujar la página con palabras — header, sidebar, main, footer — y que cada hijo reclame una etiqueta? grid-template-areas es el mapa; grid-area es el pin.
Una caja de herramientas de áreas grid
📊 Áreas grid de un vistazo
| Propiedad / token | Trabajo diario |
|---|---|
grid-template-areas |
En el contenedor: cadenas entre comillas que nombran cada celda |
grid-area |
En un ítem: qué región con nombre ocupa ese hijo |
| Nombre repetido | El mismo nombre en celdas adyacentes = un rectángulo que abarca |
. (punto) |
Una celda vacía sin nombre |
| Tracks de plantilla | Sigue fijando el tamaño con grid-template-columns / rows |
Cada cadena entre comillas es una fila del mapa. Los nombres dentro de una fila se separan con espacios. Cada fila debe listar el mismo número de celdas, o la plantilla no es válida.
grid-template-areas — dibuja el mapa
Escribe la maquetación que pretendes con etiquetas claras. Un casco de página clásico suele verse como cuatro roles con nombre a lo largo de tres filas.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
grid-area — fija cada hijo
Cada hijo elige un nombre del mapa. Los nombres de clase pueden seguir estilo BEM; el token de área es lo que lee Grid.
.shell__header { grid-area: header; }
.shell__aside { grid-area: aside; }
.shell__main { grid-area: main; }
.shell__footer { grid-area: footer; }
Abarcar repitiendo un nombre
Para estirar una región, escribe el mismo nombre en cada celda que deba pertenecerle. La región debe seguir siendo un rectángulo sólido — sin formas en L.
.magazine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero hero hero"
"card1 card2 card3";
gap: 0.75rem;
}
.magazine__hero { grid-area: hero; }
Celdas vacías con un punto
Un . solo marca un hueco. Útil cuando un tablero de tarjetas debe dejar un hueco sin inventar un nombre falso.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"alpha ."
"beta gamma";
gap: 0.5rem;
}
.board__a { grid-area: alpha; }
.board__b { grid-area: beta; }
.board__c { grid-area: gamma; }
Un hábito tranquilo de áreas con nombre
Boceta el mapa en grid-template-areas, dimensiona tracks con columns/rows y luego fija hijos con grid-area. Mantén nombres cortos y rectangulares. Vuelve a grid-column / grid-row cuando una colocación puntual sea más clara que reescribir todo el mapa. Las reescrituras responsive del mapa esperan a Grid Responsive.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas:
"nav content"
"nav content";
gap: 1.25rem;
}
.page__nav { grid-area: nav; }
.page__content { grid-area: content; }
Pruébalo tú
- Dibuja un mapa header / aside+main / footer con
grid-template-areas. - Asigna cuatro hijos con valores
grid-areacoincidentes. - Construye un hero de tres columnas que repita
heroen la primera fila. - Deja una celda vacía con
.en un tablero dos por dos. - Mantén tamaños de track en el contenedor; anota el cambio de mapa para la siguiente lección Grid responsive.
Errores comunes
- Nombrar una región en L o desconectada (las áreas deben ser rectángulos)
- Conteos de celdas distintos entre filas entre comillas
- Poner
grid-template-areasen un hijo en lugar del contenedor - Tratar nombres de área como selectores de clase CSS — son tokens de plantilla
- Omitir
grid-template-columns/rowsy esperar que solo los nombres fijen tamaños
Resumen
- Las áreas con nombre convierten una maquetación en un mapa de celdas legible
grid-template-areasvive en el contenedor;grid-areaen cada ítem- Repite un nombre para abarcar; usa
.para celdas vacías - Mantén regiones rectangulares y empareja nombres con el tamaño de tracks
- La colocación por líneas sigue funcionando; los cambios de mapa responsive vienen después
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior