Pinterest layout

4 October 2013, 14:43

Keywords: dom, transform, xml

Inspired by this Forum post. The aim is to perfectly align unequally shaped boxes, while respecting the horizontal sort direction, without Javascript (like, at all).

The same height layout is easy to obtain (diy) using CSS table display property:

The same width case is more tricky. Making boxes float would leave some “gaps”, due to unequal heights. Another common approach is CSS multi-column layout, but it would not respect the horizontal sort direction. So we have to transform the DOM tree manually, dividing boxes in columns:

No Javascript here, the layout is obtained server-side with

<!-- article form -->
<article>
	<!-- article stuff -->
</article>

<style>
	.column{float:left; width:33.3%}
</style>

<txp:etc_query data='<txp:article sort="Title" limit="6" />' specials="">
	<div class="column">{article[position() mod 3 = 1]}</div>
	<div class="column">{article[position() mod 3 = 2]}</div>
	<div class="column">{article[position() mod 3 = 0]}</div>
</txp:etc_query>

File(s)