Css Grid Layout: del layout Html físico al layout Css virtual 14.11.15

Css Grid Layout: del layout Html físico al layout Css virtual

Css ha tenido desde sus inicios su talón de Aquiles en la construcción y manejo del layout. Este aspecto siempre ha sido fuente de quebrantos y hasta ahora CSS no había sabido dar una respuesta satisfactoria.

En un inicio, el que supuso el abandono de las tablas, fueron la imaginación y maestría de los autores para usar propiedades no pensadas para ello quienes solventaban las necesidades.

Pero todas, incluidas las propuestas basadas en frameworks comandados por otros lenguajes como javascript, basan su funcionamiento en el manejo del DOM y del flujo del documento.

Esto es, para crear una estructura necesitas que exista en el árbol del documento como elemento "físico" sobre el que actuar.

Históricamente el layout siempre ha sido "tag dependiente". Existe "físicamente" en el documento.
Necesita de marcado HTML para conformase.

Esta dependencia del etiquetado dio lugar a la vieja divitis y más tarde a la clasitis.

Y es por ésto, por ser dependiente del marcado HTML, por lo que el layout y su construcción siempre ha sido (¿es?) una cuestión tan ardua y compleja.

Es posible que antes de seguir convenga que leas el artículo

"Layouts Css. Pasado, presente y futuro"

También tienes disponible el artículo:

CSS Grid Layout: guía básica

Del layout HTML al layout puro CSS

En el intento de liberar el layout del marcado y de conseguir que pase de ser algo físico construido en base a elementos del DOM (un layout HTML) a ser una abstracción no dependiente de ellos (un layout puro CSS), el consorcio W3c y sus grupos de trabajo han intentado diversas aproximaciones:

1. Flexible Box Layout o flex-box
2. Multi-column Layout o Columnas css
3. Exclusions and Shapes o exclusiones y figuras
4. Regions
5. Grid Template Layout

De ellas unas con más éxito (desarrollo y uso o promesa de ser usada) que otras. Y otras que han triunfado ha demostrado no ser la panacea para construir layouts.

La mayoría de éstas lo que hacen es manejar el contenido o los elementos que existen en el documento. Incluido el flexbox: el espacio de una caja flexible se conforma por sus ítems y es sobre ellos sobre los que se actúa desde Css. Volvemos a estar en lo de siempre: es un layout HTML el conformado y se manejan a los elementos los ítems del flexbox).

Layout virtual o puro Css

Sin embargo hay otras, como la regiones, multicolumnas o el grid layout, que tienen un enfoque diferente: crean espacios virtuales o estructuran un elemento con independencia de su contenido. Conforman un layout que no existe el el Html.

Esto ya lo conoces. Sólo tienes que pensar en las multicolumnas Css. Basta que a un elemento le declares la propiedad column-count: 2 para crear ese layout virtual. No existe nada en el Html que lo indique. Su espacio se estructura única y exclusivamente desde el Css. Es un layout virtual, no físico.

El layout Css es una abstracción. Algo ajeno e independiente al propio documento y su contenido que es creado desde Css.
El Css Grid Layout lleva la separación "contenido - presentación" a la última frontera.

El futuro Layout Css ya presente

Y con presente me refiero no a que ya sea posible su aplicación y uso. Eso es una cuestión de implementación y soporte en los diversos navegadores.

Ya presente significa que está entre nosotros. Ya está definido en los distintos documentos Css. Y aunque no haya alcanzado su estatus de recomendación lo más arduo ya está hecho: esos documentos son reales. A falta de pulir detalles y afinar su contenido lo fundamental ya está a disposición de quienes quieran experimentar con ello.

Así que a no tardar mucho veremos que los layouts se construirán ajenos por completos al Html y en base a una mezcla de diversos documentos Css, entre otros:

• El Css Grid Layout para construir la cuadrícula o rejilla [doc W3c]
• Regiones Css [doc W3c]
• CSS Shapes (formas o figuras) para crear elementos no rectangulares [doc W3c]

Y en cada cuál está irse poniendo al día poco a poco en estas no tan novedades Css o esperar a ¿qué? y tener que andar poniéndose al día deprisa y corriendo.

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.
@Kseso EsCss Kseso