soy Kseso y esto EsCSS

Resuelto con Flexbox: Holy Grail Layout 27.9.13

Resolviendo el Holy Grail Layout y con el añadido de hacerlo RWD de una forma sencilla y efectiva con las propiedades Css del grupo flexbox

Resuelto con Flexbox: Holy Grail Layout

En las realizaciones con Css y para quien está en ello, hay una serie de cuestiones que hasta ahora no tienen una resolución plenamente satisfactoria y funcional en cualquier escenario.

Cuestiones como el centrado de elementos, la alineación y centrado vertical, el manejo y distribución del espacio de los inputs, los "pie abajo", la realización y comportamiento de los 'grids' (sistemas de rejillas), el "holy grail"...

Una de éstas es la conocida como "Holy Grail Layout". Esta es una más que veterana página realizada con un encabezado (header), cuerpo de tres columnas y pie (footer). Las tres columnas con las clásicas main para el contenido principal y dos sidebars. Este layouts debe cumplir además una serie de condiciones añadidas como son:

El cuerpo principal (main) de anchura dependiente del viewport (fluida, elástica, adaptativa...) y los sidebars de anchura fija.
La columna main debe aparecer primero en el html (antes que los sidebars).
Main debe mostrarse en el centro y los sidebars uno a su izquierda y otro a su derecha.
Las tres columnas (main y laterales) deben tener la misma altura (faux columns css) con independencia de cuál de ellas tenga más contenido.
El pie de página debe posicionarse abajo del todo de la ventana en los casos de mínimo contenido y ser desplazo al crecer las columnas (pie abajo o sticky footer.
Todo lo anterior con un mínimo marcado html.

A priori podría parecer que es de fácil solución, pero al intentar cumplir con todos los requisitos anteriores puede volverse un autentico quebradero de cabeza, aún antes de pensar en introducir el concepto RWD y su reestructuración según resoluciones... excepto que uses el "flexbox" o fexible box layout.

Puedes ampliar información sobre este tipo de estructuras y el encaje de bolillos que suponían construir algunos layouts con las técnicas tradicionales de Css:

Holy Grail en la wiki [ING]
In Search of the Holy Grail Artículo de A List Apart de
Artículo de Matthew James Taylor de 2008.

Holy Grail Layout resulto con el flexbox

El marcado html


<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

El Css

Puedes ver cómo lograr el "pie abajo" o "sticky footer" en esta demo del mismo autor. La única diferencia es declarar al div del contenido principal 'HolyGrail-body' un display: flex para organizar adecuadamente a sus hijos.


.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.HolyGrail-body {
  display: flex;
  flex: 1;
}

Lograr la igualdad de altura en las tres columnas así como que la central sea de ancho variable y las laterales fijas es sencillo:


.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 12em es la anchura de las laterales */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* cambiando nav a la izquierda */
  order: -1;
}

Un poco de 'responsive'

Esta estructura, la Holy Grail Layout, viene de tiempo atrás. Es bastante anterior al advenimiento del RWD y la disparidad de aparatos y situaciones de conexión a la red que lo motivan. Por lo tanto, algo que no se contemplaba era la alteración del orden de presentación y tamaño de las columnas según el viewport usado.

Crear una versión 'mobile-first' y adaptada a pantallas pequeñas es sencillo. Sólo es necesario, en lo esencial, declarar a la sección central (la que aloja a las tres columnas) flex-direction:column para viewport pequeños y en tamaños mayores flex-direction:row.


.HolyGrail,
.HolyGrail-body {
  display: flex;
  flex-direction: column;
}

.HolyGrail-nav {
  order: -1;
}

@media (min-width: 768px) {
  .HolyGrail-body {
    flex-direction: row;
    flex: 1;
  }
  .HolyGrail-content {
    flex: 1;
  }
  .HolyGrail-nav, .HolyGrail-ads {
  /* 12em es la anchura de las laterales */
    flex: 0 0 12em;
  }
}

Puedes ver la realización completa y funcionando del "Holy Grail Layout" realizado con el Css relativo al flexbox. Prueba a redimensionar la ventana.

Ver Demo

Estado actual del Flexbox

Documentación oficial

CSS Flexible Box Layout Module es el documento del consorcio que lo desarrolla. En estos momentos marcado como "W3C candidate recomendation" desde septiembre de 2012.

Soporte por navegadores

Flexbox y Navegadores
IE11+ (beta)	Firefox 22+	Chrome 21+	Safari 6.1 (beta)	Opera 12.1

Problemas y advertencias conocidas

IE 10 soporta la sintaxis obsoleta display: flexbox.
Safari soporta la sintaxis obsoleta display: box.
Fiferox falla en el soporte a los flexbox multilínea.
Para una información al día del soporte de los navegadores consultar caniuse.com/flexbox.

Créditos y autorías

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.