Image Gallery with CSS3 Columns and Media Queries

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

建立方法 移动, CSS3, 字体和类型,

  • 395 次观看
  • 3 个评论


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]).

到目前为止有 3 个评论


  1. iulian 说:

    I have tested your cool experiment on a Windows Vista using Safari and most of the images disappear when you hover over them with the mouse. When you move the mouse out, the image reappears.
    Surprisingly, this is not an issue in IE 8.
  2. jeancarlozapata 说:

    Hi iulian and thank you

    Actually when I was testing the demo in Chrome for Windows I had (sometimes) similar flashing-images issues, and they didn't happen in Chromium for Linux, so I guess it's something WebKit-Windows related
  3. linardzb 说:

    Hi, Thanks for the awesome gallery! I have a slight problem on displaying the gallery's 4 columns in Chrome, Safari, Opera browsers. Its working in Firefox:). (if you open in others browsers, it does not work).


下载源代码 1748.88 KB · ZIP 格式

此演示发布于 MPL/GPL/LGPL 授权之下。