For dkdl.de I currently try to find a layout solution for overview pages. These present a range of boxes, each containing one image and a short explanation text, chronologically ordered. The boxes should be arranged in a regular grid that adapts to the available space of the browser window. I wanted to avoid an overly static grid look and wanted to be able to use higher or wider image formats for some boxes. This is now all done by autogrid.js, a short script based on jquery.

This is similar and obviously inspired by suprb.com ‘s work for typeneu.com and grid-a-licous. I was not completely satisfied with these solution, because it has one major flaw: The more irregular the height of the boxes are, the harder it is for the viewer to see their original order. I wanted another way of doing it that keeps the order readable.

Autogrid works like this: Each box‘s content is wrapped in a div with class short. There are also additional classes colspan2 and colspan3 on some to stretch them over two or three columns with CSS. The additional class rowspan causes the script to stretch these boxes vertically over two or more rows, interrupting the rows below. colspan2/3 and rowspan can also be used together to form larger boxes. The outcome looks something like this:

The rows adjust to the height of the tallest box in it. The boxes of each row are stretched to equal heights for a cleaner look. In some spots empty cells are shown, because the next box would not fit and needs to be pushed further.

Demo and download

You can see it in action here. Resize the window to see how it adjusts to the available space. You can also Download the files here.

Please be aware that this is work in progress. I am pretty new to javascript and cross-browser testing is still required.