Crear una estructura HTML5 con CSS Grid es una de las formas más claras y mantenibles de empezar a maquetar una página web moderna. Si estás aprendiendo desarrollo frontend, seguramente ya te hayas encontrado con etiquetas como header, main, aside o footer, y también con propiedades como display: grid, grid-template-columns o grid-template-areas.
El problema es que muchas veces estos conceptos se explican por separado. Por un lado, se habla de la estructura básica de HTML5. Por otro, se muestran ejemplos aislados de CSS Grid Layout. Sin embargo, lo realmente útil es entender cómo se combinan ambas partes para construir una página sencilla, semántica y adaptable a distintos tamaños de pantalla.
En este artículo vamos a ver cómo maquetar con CSS Grid una estructura básica formada por cabecera, contenido principal, barra lateral y pie de página. Lo haremos paso a paso, explicando el HTML, el CSS, la lógica de las áreas del grid y cómo convertir el diseño en un layout responsive con CSS Grid.
La idea no es solo copiar y pegar código, sino entender qué está pasando en cada parte para que puedas adaptar esta base a tus propios proyectos.
Qué vamos a construir con HTML5 y CSS Grid Layout
Vamos a crear una estructura clásica de página web compuesta por cuatro zonas principales:
- una cabecera o
header;
- una zona de contenido principal con
main;
- una barra lateral con
aside;
- un pie de página con
footer.
Visualmente, en escritorio tendremos una estructura parecida a esta:
+-----------------------------+
| HEADER |
+------------------+----------+
| CONTENT | SIDEBAR |
+------------------+----------+
| FOOTER |
+-----------------------------+
En pantallas pequeñas, como móviles, reorganizaremos la estructura en una sola columna:
+----------+
| HEADER |
+----------+
| CONTENT |
+----------+
| SIDEBAR |
+----------+
| FOOTER |
+----------+
Esta es una de las ventajas principales de CSS Grid: permite definir una estructura visual clara sin alterar el orden semántico del HTML.
Es decir, podemos mantener un documento bien organizado para personas, navegadores, lectores de pantalla y buscadores, mientras adaptamos su distribución visual mediante CSS. Para reforzar esta parte desde la base, también puedes leer el artículo sobre HTML semántico y accesibilidad web, porque la estructura del documento influye directamente en cómo se interpreta una página.
Por qué usar una estructura básica HTML5
Antes de escribir el CSS, merece la pena detenernos en el HTML. A veces se piensa que maquetar consiste simplemente en colocar cajas en pantalla, pero una buena página web empieza mucho antes: empieza con una estructura clara.
HTML5 introdujo etiquetas semánticas que ayudan a describir mejor las partes de una página. En lugar de usar únicamente div, podemos utilizar elementos que tienen significado propio.
HTML5 no solo organiza: también comunica
Cuando usamos una etiqueta como main, estamos indicando que ahí se encuentra el contenido principal de la página. Cuando usamos aside, estamos diciendo que ese contenido es complementario. Y cuando usamos footer, estamos marcando una zona de cierre o información secundaria.
Esto mejora varios aspectos:
- la accesibilidad, porque las tecnologías de asistencia pueden interpretar mejor la página;
- la legibilidad del código, porque otros desarrolladores entienden antes la estructura;
- el SEO técnico, porque el contenido principal queda mejor identificado;
- el mantenimiento, porque cada zona tiene una responsabilidad clara.
Dicho de otra manera: una buena estructura básica HTML5 no consiste en llenar la página de etiquetas modernas, sino en elegir las etiquetas adecuadas para cada bloque de contenido.
El error de usar div para todo
Durante mucho tiempo, muchas maquetas web se construían casi exclusivamente con div. Técnicamente funcionaba, pero el resultado era menos expresivo:
<div class="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>
Este código puede ser válido, pero no comunica tanto como este:
<header></header>
<main></main>
<aside></aside>
<footer></footer>
Ambas versiones pueden verse igual con CSS, pero no significan lo mismo. La segunda versión es más clara, más semántica y más alineada con las buenas prácticas actuales.
Semántica no significa complicar el código
Un error frecuente es pensar que usar HTML semántico hace que el código sea más complejo. En realidad, suele ocurrir lo contrario. Cuando cada bloque tiene una etiqueta adecuada, el documento se entiende mejor y resulta más fácil de mantener.
La semántica no añade decoración ni comportamiento visual por sí misma. Su función es dar significado. Después, CSS se encarga de decidir cómo se presenta ese contenido en pantalla.
Código HTML de una estructura básica con CSS Grid
Empecemos con el HTML completo. La estructura será sencilla para que puedas entender bien la relación entre cada elemento y su área dentro del grid.
<div class="layout">
<header class="header">
<h1>Mi sitio web</h1>
</header>
<main class="content">
<h2>Contenido principal</h2>
<p>
Esta es la zona principal de la página. Aquí iría el contenido más importante:
artículos, servicios, productos, documentación o cualquier información central.
</p>
</main>
<aside class="sidebar">
<h2>Barra lateral</h2>
<p>
Este espacio puede utilizarse para enlaces relacionados, categorías,
información complementaria o llamadas a la acción.
</p>
</aside>
<footer class="footer">
<p>© 2026 Mi sitio web. Todos los derechos reservados.</p>
</footer>
</div>
Este ejemplo ya contiene una base sólida. Tenemos un contenedor general llamado .layout y dentro de él cuatro áreas principales.
Qué representa cada etiqueta
La etiqueta header representa la cabecera de la página o de una sección. Puede incluir el logotipo, el título del sitio, un menú de navegación o una introducción.
En este ejemplo contiene un h1, pero en una página real también podría incluir una navegación principal.
Main
La etiqueta main representa el contenido principal del documento. Es importante recordar que, por norma general, debería haber un único main por página.
Aquí es donde colocaríamos el contenido más relevante. En un blog, por ejemplo, sería el artículo. En una landing, podría ser la propuesta principal de valor.
Aside
La etiqueta aside se utiliza para contenido complementario. No debería contener información imprescindible para entender la página, sino elementos relacionados o secundarios.
Por ejemplo, una barra lateral puede incluir enlaces a artículos relacionados, categorías, filtros, anuncios, una biografía del autor o llamadas a la acción.
La etiqueta footer suele contener información de cierre: derechos de autor, enlaces legales, contacto, redes sociales o navegación secundaria.
No tiene por qué aparecer solo al final de una página completa. También puede existir un footer dentro de una tarjeta, artículo o sección, siempre que tenga sentido semántico.
Cómo maquetar con CSS Grid paso a paso
Una vez que tenemos el HTML, llega el momento de aplicar CSS. Aquí es donde entra en juego CSS Grid Layout.
CSS Grid nos permite crear filas y columnas de forma precisa. A diferencia de otros sistemas de maquetación más antiguos, no necesitamos usar float, tablas ni soluciones forzadas para construir una estructura de página.
Activar CSS Grid en el contenedor
La primera propiedad importante es display: grid.
.layout {
display: grid;
}
Con esta línea convertimos .layout en un contenedor grid. Sus hijos directos —header, main, aside y footer— pasan a comportarse como elementos de esa cuadrícula.
Pero, por ahora, el navegador todavía no sabe cómo queremos repartir las zonas. Para eso necesitamos definir columnas, filas y áreas.
Definir columnas y filas
Podemos empezar con una estructura de dos columnas:
.layout {
display: grid;
grid-template-columns: 1fr 280px;
}
Aquí estamos diciendo que la primera columna ocupará el espacio disponible gracias a 1fr, mientras que la segunda tendrá un ancho fijo de 280px.
La unidad fr significa fracción del espacio disponible. Es muy útil porque nos permite crear diseños flexibles sin depender siempre de porcentajes rígidos.
También podemos definir las filas:
.layout {
display: grid;
grid-template-columns: 1fr 280px;
grid-template-rows: auto 1fr auto;
}
En este caso, la primera fila mide lo que necesite el header, la segunda ocupa el espacio principal disponible y la tercera mide lo que necesite el footer.
Usar grid-template-areas
Una de las formas más claras de crear una estructura HTML5 con CSS Grid es utilizar grid-template-areas.
Esta propiedad permite nombrar zonas del layout y dibujarlas de forma visual en el CSS.
.layout {
display: grid;
min-height: 100vh;
grid-template-columns: 1fr 280px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
gap: 1rem;
}
Este bloque es muy expresivo. Podemos leerlo casi como un esquema:
"header header"
"content sidebar"
"footer footer"
La cabecera ocupa dos columnas. El contenido principal ocupa la primera columna. La barra lateral ocupa la segunda. El pie de página vuelve a ocupar todo el ancho.
Esta es una de las razones por las que grid-template-areas resulta tan útil en layouts básicos: permite entender la estructura de un vistazo.
Asignar cada elemento HTML a su área del grid
Una vez definidas las áreas, necesitamos decirle a cada elemento dónde debe colocarse.
.header {
grid-area: header;
}
.content {
grid-area: content;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
Cada valor de grid-area debe coincidir con uno de los nombres definidos en grid-template-areas.
Es importante que los nombres sean claros. Podrías usar nombres como top, left o box1, pero no serían tan descriptivos. En cambio, header, content, sidebar y footer explican perfectamente la función de cada zona.
CSS completo del layout
Uniendo todo, tendríamos este CSS base:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
background-color: #f5f5f5;
}
.layout {
display: grid;
min-height: 100vh;
grid-template-columns: 1fr 280px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
gap: 1rem;
padding: 1rem;
}
.header,
.content,
.sidebar,
.footer {
padding: 1.5rem;
border-radius: 0.75rem;
background-color: #ffffff;
}
.header {
grid-area: header;
}
.content {
grid-area: content;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
Este ejemplo ya crea una maqueta funcional, clara y fácil de modificar. No es un diseño visual complejo, pero sí una base muy útil para entender cómo maquetar con CSS Grid de forma ordenada.
Después puedes añadir microinteracciones o pequeños efectos visuales al diseño con recursos como las animaciones CSS o revisar la diferencia entre transition y animation en CSS. Eso sí: primero conviene tener una estructura sólida; los efectos deberían reforzar la experiencia, no esconder una maqueta confusa.
Cómo crear un layout responsive con CSS Grid
Hasta ahora tenemos una estructura pensada para pantallas medianas o grandes. Pero una web actual debe funcionar correctamente en móvil, tablet y escritorio.
Aquí entra otro punto importante: un layout responsive con CSS Grid no tiene por qué ser complicado. Podemos reorganizar las áreas modificando grid-template-areas dentro de una media query.
Adaptar la estructura a pantallas pequeñas
En móvil, normalmente no queremos mantener dos columnas. Una barra lateral al lado del contenido puede quedarse demasiado estrecha y generar problemas de lectura.
Por eso podemos pasar a una sola columna:
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
}
Con este cambio, todos los bloques se colocan uno debajo del otro.
Lo interesante es que no hemos tenido que tocar el HTML. Solo hemos cambiado la distribución visual desde CSS.
Por qué esto es importante
Separar estructura y presentación es una de las ideas más importantes del desarrollo web.
El HTML debe mantener un orden lógico. El CSS puede encargarse de adaptar la presentación según el espacio disponible.
Esto evita un error muy común: reorganizar el HTML solo para conseguir un efecto visual concreto. Si hacemos eso, podemos perjudicar la accesibilidad, la lectura del contenido y el mantenimiento del proyecto.
Este mismo enfoque también es útil cuando trabajamos con ilustraciones, tarjetas o bloques visuales que deben adaptarse a distintos tamaños de pantalla. Para profundizar en esa idea desde una perspectiva más visual, puedes leer el artículo sobre cómo dibujar con CSS responsive.
Buenas prácticas al trabajar con CSS Grid Layout
CSS Grid es muy potente, pero conviene usarlo con criterio. No se trata de convertir cualquier pequeño componente en una cuadrícula compleja, sino de elegir la herramienta adecuada para cada caso.
Mantén el HTML en un orden lógico
Aunque CSS Grid permite colocar elementos visualmente en posiciones diferentes, no deberíamos abusar de esa capacidad.
Por ejemplo, si el contenido principal aparece antes que la barra lateral en el HTML, lo habitual es mantener ese orden también en la experiencia de lectura. Esto ayuda especialmente a quienes navegan con teclado o usan lectores de pantalla.
El diseño visual no debería contradecir la lógica del documento.
Evita alturas fijas innecesarias
En muchos ejemplos antiguos de CSS Grid se usan alturas fijas como height: 500px. Para una demostración rápida puede servir, pero en una web real suele ser mejor usar soluciones más flexibles.
Por ejemplo:
min-height: 100vh;
Esta propiedad permite que el layout ocupe al menos toda la altura de la ventana, pero sin impedir que crezca si el contenido necesita más espacio.
Usa nombres de áreas fáciles de entender
grid-template-areas funciona mejor cuando los nombres de las áreas son claros.
Mejor esto:
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
Que esto:
grid-template-areas:
"a a"
"b c"
"d d";
La segunda versión funciona, pero obliga a interpretar el código. La primera se entiende prácticamente sola.
No uses CSS Grid para absolutamente todo
CSS Grid es ideal para layouts en dos dimensiones: filas y columnas. Sin embargo, para alinear elementos en una sola dirección, muchas veces Flexbox sigue siendo una opción más sencilla.
Por ejemplo, para distribuir enlaces dentro de un menú horizontal, probablemente Flexbox sea suficiente. Para construir la estructura general de una página, CSS Grid suele ser más claro.
CSS Grid vs Flexbox: cuándo usar cada uno
Una duda habitual al aprender maquetación moderna es cuándo usar CSS Grid y cuándo usar Flexbox.
No hay una única respuesta, pero sí una regla práctica bastante útil.
Usa CSS Grid para la estructura general
CSS Grid funciona muy bien cuando necesitas controlar filas y columnas al mismo tiempo. Por ejemplo:
- layouts de página;
- galerías;
- dashboards;
- estructuras con sidebar;
- tarjetas distribuidas en varias columnas;
- zonas visuales con áreas diferenciadas.
En este artículo lo usamos para definir una estructura completa: cabecera, contenido, barra lateral y footer.
Usa Flexbox para alineaciones internas
Flexbox suele ser más cómodo cuando trabajas en una sola dirección: fila o columna.
Por ejemplo:
- alinear elementos de navegación;
- centrar un botón con un icono;
- distribuir elementos dentro de una tarjeta;
- separar contenido con
justify-content: space-between;
- ordenar elementos pequeños dentro de un componente.
En proyectos reales, lo habitual es combinar ambas herramientas. Puedes usar CSS Grid para la estructura principal y Flexbox para detalles internos.
Ejemplo completo: HTML5 y CSS Grid Layout
A continuación tienes el ejemplo completo, listo para probar.
HTML
<div class="layout">
<header class="header">
<h1>Mi sitio web</h1>
</header>
<main class="content">
<h2>Contenido principal</h2>
<p>
Esta es la zona principal de la página. Aquí puedes colocar el contenido
más importante, como un artículo, una presentación de servicios o una
página informativa.
</p>
</main>
<aside class="sidebar">
<h2>Barra lateral</h2>
<p>
Aquí puedes añadir enlaces relacionados, categorías, recursos destacados
o cualquier información complementaria.
</p>
</aside>
<footer class="footer">
<p>© 2026 Mi sitio web. Todos los derechos reservados.</p>
</footer>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
background-color: #f5f5f5;
}
.layout {
display: grid;
min-height: 100vh;
grid-template-columns: 1fr 280px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
gap: 1rem;
padding: 1rem;
}
.header,
.content,
.sidebar,
.footer {
padding: 1.5rem;
border-radius: 0.75rem;
background-color: #ffffff;
}
.header {
grid-area: header;
}
.content {
grid-area: content;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
}
Este ejemplo resume la base de una estructura HTML5 con CSS Grid moderna: semántica, legible, responsive y fácil de ampliar.
Errores comunes al maquetar con CSS Grid
Aunque CSS Grid simplifica mucho la creación de layouts, hay algunos errores que conviene evitar desde el principio.
Confundir Grid con una solución mágica
CSS Grid es potente, pero no sustituye la necesidad de pensar la estructura. Antes de escribir CSS, conviene preguntarse:
- ¿cuál es el contenido principal?
- ¿qué contenido es complementario?
- ¿qué orden tiene sentido en el HTML?
- ¿cómo debería adaptarse en móvil?
- ¿qué bloques deben ocupar más espacio?
Una buena maqueta no empieza con propiedades CSS, sino con decisiones de contenido.
Crear demasiadas áreas
grid-template-areas es muy cómodo, pero no hace falta usarlo para cada pequeño elemento. Es ideal para zonas grandes del layout, no necesariamente para cada botón, icono o texto interno.
Si el grid empieza a parecer un mapa imposible de mantener, quizá estás intentando resolver demasiado desde una sola cuadrícula.
Olvidar el responsive
Un diseño de dos columnas puede verse perfecto en escritorio y romperse por completo en móvil. Por eso es importante probar pronto cómo se comporta el layout en pantallas pequeñas.
En muchos casos, la solución será tan sencilla como cambiar a una columna, pero no deberíamos dejar esa decisión para el final.
Pensar solo en lo visual
Maquetar no consiste únicamente en colocar cajas bonitas. También implica cuidar el orden del contenido, la accesibilidad, la legibilidad y la experiencia de uso.
Una estructura puede verse bien y, aun así, estar mal organizada. Por eso conviene trabajar siempre con HTML semántico y CSS mantenible.
Cómo ampliar esta estructura en un proyecto real
El ejemplo que hemos visto es básico, pero puede crecer fácilmente.
Podrías añadir una navegación dentro del header:
<header class="header">
<h1>Mi sitio web</h1>
<nav>
<a href="/">Inicio</a>
<a href="/blog">Blog</a>
<a href="/contacto">Contacto</a>
</nav>
</header>
También podrías transformar el main en una zona de artículos, tarjetas o secciones internas.
<main class="content">
<article>
<h2>Título del artículo</h2>
<p>Contenido del artículo...</p>
</article>
</main>
O podrías usar el aside para mostrar contenido relacionado:
<aside class="sidebar">
<h2>También te puede interesar</h2>
<ul>
<li><a href="#">Guía de HTML semántico</a></li>
<li><a href="#">Introducción a CSS Grid</a></li>
<li><a href="#">Cómo crear layouts responsive</a></li>
</ul>
</aside>
La clave está en conservar una estructura clara. Cuanto más crece una página, más importante se vuelve que cada bloque tenga una función reconocible.
Preguntas frecuentes sobre estructura HTML5 con CSS Grid
¿Qué es una estructura HTML5 con CSS Grid?
Una estructura HTML5 con CSS Grid es una forma de organizar una página usando etiquetas semánticas de HTML5, como header, main, aside y footer, junto con CSS Grid para distribuir visualmente esas zonas en filas y columnas.
La ventaja es que separa muy bien el significado del contenido y su presentación visual. HTML define qué es cada parte. CSS Grid define dónde y cómo se muestra.
¿Es mejor usar CSS Grid o Flexbox para maquetar una página?
Para la estructura general de una página, normalmente CSS Grid Layout resulta más adecuado porque permite trabajar con filas y columnas al mismo tiempo. Para alinear elementos internos en una sola dirección, Flexbox suele ser más sencillo.
En la práctica, no tienes que elegir solo uno. Lo habitual es usar CSS Grid para el layout principal y Flexbox para componentes internos, como menús, botones o tarjetas.
¿Se puede crear un layout responsive con CSS Grid?
Sí. De hecho, crear un layout responsive con CSS Grid suele ser bastante limpio. Puedes definir una estructura de dos columnas para escritorio y cambiarla a una sola columna en móvil mediante una media query.
La propiedad grid-template-areas facilita mucho este proceso porque permite reorganizar visualmente las zonas sin modificar el HTML.
Una base sencilla para construir layouts más claros
Aprender a maquetar con CSS Grid no consiste solo en memorizar propiedades. Lo importante es entender cómo se relacionan la estructura, el contenido y la presentación visual.
HTML5 nos ayuda a construir documentos con significado. CSS Grid nos permite distribuir ese contenido con precisión. Cuando combinamos ambas herramientas, obtenemos layouts más claros, más accesibles y más fáciles de mantener.
Una estructura básica HTML5 con cabecera, contenido principal, barra lateral y footer puede parecer sencilla, pero es una base excelente para comprender cómo se organizan muchas páginas reales. A partir de ahí, puedes añadir navegación, tarjetas, secciones, componentes, contenido dinámico o estilos más elaborados.
La clave está en no empezar por la decoración, sino por la arquitectura del contenido. Primero define qué es cada bloque. Después decide cómo debe comportarse en pantalla. Y, por último, ajusta los detalles visuales.
CSS Grid no solo sirve para crear diseños más modernos. Bien utilizado, también te ayuda a pensar mejor la estructura de una página web.
Para el post he simplificado el código del estilo en CSS pero puedes verlo también en SCSS dentro de mi repositorio de Github y también una demo en Github Pages.
