El layout puede definirse como la estructura que define la ubicación visual de los elementos en una página web. Generalmente, cuando el diseño se plantea inicialmente en programas como Photoshop, el ancho de la pantalla se divide en columnas y las diferentes secciones de la página se ajustan a ellas. Por ejemplo, supongamos que estamos utilizando doce columnas. En un layout clásico, el header y el footer pueden ocupar doce columnas, mientras que la sección principal (por ejemplo, una lista de artículos) puede constar de nueve columnas, y la sidebar, de tres:

Cada tipo de sitio tiene su propio layout «clásico». El que presentamos en la imagen superior es habitual en blogs y sitios de noticias. En sitios institucionales, es común poner un slider de imágenes que ocupe todo el ancho de la pantalla, seguido por una o más filas de tres íconos que representan los servicios de la empresa. En foros de discusión, el diseño «por default» muestra una tabla con los subforos disponibles y el título del último post publicado en cada uno.

En los últimos años, a estas estructuras clásicas se sumó el llamado masonry layout: los elementos de la página son dispuestos en bloques apilables, y se acomodan según sus dimensiones para llenar mejor el espacio de la pantalla. La tendencia se inició con Pinterest, que muestra las últimas fotografías publicadas por otros usuarios acoplándolas de tal manera que no existan huecos entre ellas. Por eso, a este tipo de plantilla también se la llama Pinterest-like layout.

La mayor ventaja de este estructura sobre otras más clásicas es que elimina los espacios en blanco. En diseño web, la práctica más habitual es controlar solo el ancho de los elementos, de manera que el alto varíe dinámicamente de acuerdo con la cantidad de texto. Pero esto puede generar espacio desaprovechado. Por ejemplo, volviendo al primer ejemplo de este artículo, imaginemos que el contenido del área roja ocupa un alto mayor que el contenido de la sidebar verde. Esto, que es lo normal en la mayoría de los blogs (por ejemplo, en este mismo) implica generar un espacio en blanco al pie de la sidebar. Pero en una masonry layout, este espacio estaría ocupado por otro elemento.

En sus implementaciones más complejas, estas templates también son responsivas, moviendo los bloques de contenido no solo según su alto, sino también el ancho de la pantalla.

Sin embargo, este modelo no vino a reemplazar los que ya existen: solo es indicado para tipos de contenido muy específicos (que, generalmente, contienen imágenes). En este post pueden verse temas de WordPress con masonry layout para muy diversos usos.