Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
grid-template-areas te permite diseñar el layout completo de tu página dibujándolo casi literalmente con nombres, como un mapa.
Explicación
grid-template-areas dibuja el layout completo con nombres:
grid-template-areasDefine el layout completo como un mapa de nombres, fila por fila, entre comillas.
grid-areaAsigna a un elemento el nombre del área donde debe ubicarse, definido antes en grid-template-areas.
"."Un punto en el mapa de áreas representa una celda vacía, sin ningún elemento asignado.
Reto rápido
Reordena el mapa de grid-template-areas para poner el nav a la derecha del main en vez de a la izquierda.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
grid-template-areas es ideal para layouts de página completa (header, sidebar, main, footer) porque el CSS se lee casi como un dibujo del diseño.
Dato extra
Puedes cambiar por completo el orden visual del layout en una media query solo reescribiendo grid-template-areas, sin tocar el HTML ni mover ningún elemento.
Error común
Que los nombres de área no formen un rectángulo perfecto en el mapa (por ejemplo, usar el mismo nombre en celdas que no son contiguas): CSS lo rechaza y el layout no funciona.
Siguiente paso
Ya diseñas layouts completos con Grid. Ahora hagamos que esos layouts se adapten a cualquier pantalla con diseño responsive.
Ir a la siguiente lección