How to make a flowing CSS gallery layout

A typical way to display many elements of the same format is through a gallery layout: photo gallery, contact cards, etc. Galleries have been around for a long time but were traditionally arranged in a table, as were most layout elements in general. But now we know to use CSS whenever possible. The goal is to create a robust gallery capable of flowing content of varying dimension to look good on small and large displays, from cellphones to 27″ monitors. Treat yourself with a live example before we begin.

So let us start with an HTML structure for the gallery. Below is an HTML fragment for example purposes.

<section class="gallery">
  <figure class="card">
    <div class="feature">Something, maybe an image?</div>
    <figcaption class="caption">Behold, a featured item</figcaption>
  </figure>
  <figure class="card">
    <div class="feature">I'm shiny too</div>
    <figcaption class="caption">A second featured item</figcaption>
  </figure>
  <figure class="card">
    <div class="feature">Lets put something here as well</div>
    <figcaption class="caption">And yet another</figcaption>
  </figure>
</section>

Now we want the “cards” to arrange themselves in the grid. First, dimensions. You can set the widths of these cards to whatever best suits your need – fixed width or container percentage with a minimum width. The real trick is with the height. If all the cards have the same height, then floating them will work fine (you were thinking of floating them weren’t you).

.card {
  display: block;
  float: left;
  position: relative;
  width: 20%;
  min-width: 128px;
}

However, if the cards are of varying height, you might encounter this kind of layout bug.

We really want the cards to wrap and flow like inline element but we need them to behave like block elements at the same time so that we can give them dimension. It turns out that we can have both and I present you with one of the greatest CSS properties: inline-block;

.card {
  display: inline-block;
  position: relative;
  width: 20%;
  min-width: 128px;
}

Now this isn’t bad. It’s close but we need a bit more tweaking. For IE 7, this might not work if your container element isn’t an inline element by default. To get the inline-block behaviour, you sadly need to add this CSS hack in.

.card {
  display: inline-block;
  position: relative;
  width: 20%;
  min-width: 128px;
  /*IE7 hack. Weep salty tears*/
  *display: inline;
  zoom: 1;
}

We just need to make the cards vertically align at the top instead of the bottom. As they are behaving like inline elements, we can set the relative vertical alignment of the cards.

.card {
  display: inline-block;
  position: relative;
  vertical-align: top;
  width: 20%;
  min-width: 128px;
}

And there it is, a dynamically flowing gallery layout that adapts to the available real-estate. From here you can style the content of the cards and decorate the cards themselves to achieve the desired look. Added bonus: it doesn’t rely on floats, which often cause trouble anyway. To see a live demo, view my full example which was used to generate the screenshots. Make sure to re-size your browser window to see how my cards re-flow and wrap.