Image Gallery with CSS3 Columns and Media Queries
Resize me! I'm a responsive image gallery with a CSS3 flavor ;)
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 sickdesigner.com 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).
-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]).