Layout Holy Grail con Grid

El patrón Holy Grail es un diseño web clásico: una página de altura completa con encabezado, pie de página y una sección central de tres columnas (barra lateral izquierda, contenido principal y barra lateral derecha). Con los elementos flotantes era notoriamente difícil de implementar; CSS Grid lo hace trivial.

Defina el diseño con áreas de plantilla y filas con nombre: grid-template-areas asigna la estructura visual. Tres columnas y tres filas (el encabezado abarca todas las columnas, el pie de página también y la parte central tiene tres columnas) capturan todo el diseño en un diagrama ASCII legible.

Cada elemento hijo hace referencia a su área por nombre: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. Grid los coloca automáticamente.

La fila central utiliza 1fr, que ocupa toda la altura restante de la ventana gráfica después del encabezado y el pie de página de altura fija. Esto garantiza que las barras laterales y el contenido principal siempre se extiendan para llenar la ventana gráfica, sin necesidad de cálculos explícitos de altura.

En dispositivos móviles, use una media query para redefinir grid-template-areas como una pila de una sola columna: encabezado, barra lateral, contenido principal, aside y pie de página apilados verticalmente. Se mantiene el orden del DOM; solo cambia la plantilla visual de Grid. Las áreas de Grid hacen que la reestructuración adaptable sea fácil de leer.

En tabletas, quite el aside derecho y amplíe main: redefina el diseño como "header header" "sidebar main" "footer footer" con grid-template-columns: 240px 1fr. Establezca aside { display: none } o muévalo debajo de main en la definición de áreas.

Añada separación entre las pistas de Grid: gap: var(--spacing-4). Aplique el relleno dentro de cada área en lugar de hacerlo en el contenedor de Grid para mantener un espaciado uniforme. El encabezado y el pie de página suelen tener su propio relleno horizontal, alineado con el ancho máximo de la cuadrícula.

El área de contenido principal puede ser a su vez una cuadrícula: un artículo de dos columnas y una barra lateral dentro del área principal. Las cuadrículas anidadas crean el diseño del contenido dentro de la estructura exterior de la página sin jerarquías de clases complejas ni posicionamiento profundamente anidado.

Haga que el encabezado sea sticky: header { position: sticky; top: 0; z-index: 10; }. En un diseño de Grid, el posicionamiento sticky de un hijo de la cuadrícula funciona como se espera: el encabezado permanece fijo mientras main, sidebar y aside se desplazan debajo.

Ambas barras laterales pueden ser sticky: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Permanecen visibles mientras se desplaza el contenido principal, creando un diseño de tres paneles en el que solo se desplaza el panel central.

Use Grid para diseños bidimensionales de la estructura de una página, como Holy Grail: Grid es ideal para colocar elementos simultáneamente en filas y columnas con nombre. Use Flexbox para diseños unidimensionales de componentes (elementos de navegación en una fila, contenido de tarjetas en una columna) dentro de las áreas de Grid.

¿Por qué resulta especialmente útil grid-template-areas para los diseños Holy Grail adaptables?

CSS Grid convierte en trivial el históricamente difícil patrón Holy Grail: grid-template-areas asigna nombres a las regiones, 1fr hace que la fila central ocupe la altura de la ventana gráfica y las media queries redefinen el mapa de áreas para adaptarlo a pantallas pequeñas. Los encabezados y las barras laterales sticky se añaden sin complejidad adicional.