Áreas de plantilla de la cuadrícula
Asigne nombres a las áreas de la cuadrícula con grid-template-areas para crear diseños legibles y semánticos.
Áreas de plantilla de la cuadrícula es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Áreas con nombre de la cuadrícula
grid-template-areas permite asignar nombres a las regiones de la cuadrícula mediante arte ASCII. Hace que los diseños sean muy legibles y fáciles de mantener.
Definición de áreas de plantilla
Cada cadena entre comillas representa una fila. Las celdas con el mismo nombre forman un área rectangular. Use . para las celdas vacías.
<div class="page" style="min-height:240px;">
<header style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<aside style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</aside>
<main style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>Colocación de elementos por nombre
Asigne elementos de la cuadrícula a áreas con nombre mediante la propiedad grid-area y el nombre del área (sin comillas):
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'header header' 'sidebar main' 'footer footer';min-height:220px;gap:4px;">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<div class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<main style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>Reglas para las áreas de plantilla
Las áreas con nombre deben ser rectangulares. Cada celda solo puede formar parte de un área. El nombre de un área no puede aparecer en celdas desconectadas, ya que eso no sería válido.
Celdas vacías con .
Use uno o más puntos para marcar celdas vacías en grid-template-areas:
<div class="layout" style="display:grid;min-height:200px;">
<div style="grid-area:logo;background:#4f8cff22;border:1px solid #4f8cff;">Logo</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:sidebar;background:#b57bff22;border:1px solid #b57bff;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>Áreas adaptables con consultas de medios
Redefina grid-template-areas en las consultas de medios para cambiar por completo la estructura del diseño:
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Narrow (default) preview below. Widen your browser to ≥768px to see the media query apply the two-column layout live.</p>
<div class="page" style="min-height:200px;margin-bottom:16px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Preview of the ≥768px layout (static reference — not driven by the media query):</p>
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-areas:'header header' 'sidebar main' 'footer footer';gap:4px;min-height:160px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>Líneas con nombre generadas
Al asignar un nombre a un área, CSS crea automáticamente líneas de cuadrícula con nombre: area-start y area-end tanto para las filas como para las columnas.
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;grid-template-areas:'aside main' 'aside main';gap:0;min-height:160px;">
<div style="grid-area:aside;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Aside</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content</div>
<div class="overlay" style="grid-row:1/3;background:rgba(255,99,71,0.3);border:2px dashed tomato;padding:4px;">Overlay via named lines main-start / main-end</div>
</div>Combinación de áreas y números de línea
Las áreas con nombre y los números de línea explícitos pueden coexistir en la misma cuadrícula. Los elementos se pueden colocar por nombre, línea o extensión.
Flujo de trabajo para diseñar cuadrículas visualmente
Un flujo de trabajo habitual consiste en esbozar primero el diseño mediante áreas de plantilla y, después, definir los tamaños de las columnas y las filas. Así se separa la estructura de los aspectos relacionados con el tamaño.
<div class="dashboard" style="display:grid;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;">Header</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:ads;background:#b57bff22;border:1px solid #b57bff;">Ads</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>Áreas de plantilla y accesibilidad
El orden visual de Grid puede diferir del orden de origen del DOM. Los lectores de pantalla siguen el orden del DOM, no la colocación visual. Asegúrese de que el orden del DOM tenga sentido lógico aunque los elementos se reordenen visualmente mediante la colocación en Grid.
Abreviatura grid-template
Combine grid-template-areas, grid-template-columns y grid-template-rows en una sola declaración grid-template.
<div class="page" style="display:grid;min-height:200px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>Comprobación rápida
En grid-template-areas, ¿qué carácter se utiliza para marcar una celda vacía?
Repaso
grid-template-areas utiliza arte ASCII para asignar nombres a las regiones del diseño. Los elementos se colocan con grid-area: name. Las áreas deben ser rectangulares y las celdas vacías utilizan .. Redefina las áreas en las consultas de medios para crear diseños totalmente adaptables con CSS claro y legible.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Áreas de plantilla de la cuadrícula» es gratis?
Sí — el texto completo de «Áreas de plantilla de la cuadrícula» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Áreas de plantilla de la cuadrícula»?
Asigne nombres a las áreas de la cuadrícula con grid-template-areas para crear diseños legibles y semánticos. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Áreas de plantilla de la cuadrícula»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Display Grid y columnas y filas de plantilla
- La unidad fr y repeat
- Gap y colocación en la cuadrícula
- Áreas de plantilla de la cuadrícula