Image Gallery with CSS3 Columns and Media Queries

Resize me! I'm a responsive image gallery with a CSS3 flavor ;)

Built using Mobile, CSS3, Fonts & Type,


More About This Demo From The Author

Launch it and resize your browser! (I know you want to :D)

This is an experiment using CSS3 columns and media queries to provide an image gallery that responds to the size of the browser. It was created after the idea I got from the homepage of where they use CSS3 columns to show their recent posts with featured images.

Using media queries, this demo shows a different amount of columns according to the size of the viewport (to a maximum of 4 columns, but it is easily extended with a bit of CSS).

Tested on:
-Windows: Firefox, Opera, Chrome
-Linux: Firefox, Chromium
-iPhone: Safari for iOS, Opera Mini
-Android 2.1: stock Android browser

Please let me now if it works on any other configuration.

The demo works on most modern browsers, but even on most versions of Internet Explorer, which lack of support for CSS3 columns and media queries the demo works but shows a single column layout (basic style without applying media queries).

There are some differences in the way browsers render the columns and I have to note that it can show sometimes, for example, the last column with just one image or no images at all (I detected issues with WebKit, where columns are not always well balanced, even when using the "column-fill: balance" property [being balance the default according to the CSS3 Candidate Recommendation 12 April 2011]).

About this Demo

Download the Source 1748.88 KB · ZIP File

This demo is released under the MPL/GPL/LGPL license.