Layout Holy Grail
El patrón "Holy Grail" (Santo Grial) es un diseño clásico de página web que consiste en:
- Un encabezado en la parte superior
- Un pie de página en la parte inferior
- Un contenido principal en el centro
- Una navegación a la izquierda
- Una barra lateral a la derecha
Este patrón ha sido históricamente difícil de implementar con técnicas tradicionales de CSS, pero con Grid se vuelve extremadamente sencillo.
Implementación con CSS Grid
.holy-grail {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 20px;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
Implementación Responsive
Una de las ventajas de CSS Grid es la facilidad para adaptar layouts a diferentes tamaños de pantalla:
/* Versión para tablet */
@media (max-width: 992px) {
.holy-grail {
grid-template-columns: 1fr 2fr;
grid-template-areas:
"header header"
"nav main"
"aside aside"
"footer footer";
}
}
/* Versión para móvil */
@media (max-width: 576px) {
.holy-grail {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}
Demostración en vivo
A continuación puedes ver el layout Holy Grail en acción. Redimensiona la ventana para ver cómo se adapta a diferentes tamaños de pantalla.
Contenido Principal
Este es el área de contenido principal de la página. Aquí generalmente se coloca el contenido más importante.
Con CSS Grid, este layout se implementa de manera sencilla y con muy pocas líneas de código.
Además, es completamente responsive, adaptándose fácilmente a dispositivos móviles y tablets.
Los diseños de tipo "Holy Grail" son muy utilizados en aplicaciones web y sitios que requieren de una navegación lateral y una barra de contenido complementario.
Desafío
¿Te animas a personalizar este layout? Intenta:
- Cambiar los colores del layout
- Ajustar las proporciones entre las columnas
- Añadir una nueva área en el layout
- Crear una versión alternativa para tablet que muestre el menú de navegación en la parte superior
Puedes usar el código como punto de partida para tus propios proyectos.