We start to dig into the layout of the Gallery area, which is something that has been on my mind since the beginning of this redesign process. Mostly because... the gallery in v9 kinda sucked. We're going to do better this time.

We're going to make the gallery layout nothing but a big grid of images. That's what other galleries have that are a pleasure to browse so this should be that way too. In other words: no sidebar, more images.

We base the layout on the seamless responsive photo grid article I did a while back. Essentially we let the images all fall as inline-blocks into one parent that uses CSS3 columns. Fortunately, Compass has some helpers to make it even easier. The gutters are made through column spacing and bottom margin.

To simulate some real content, we use randomized Place Kittens in a loop.


  1. User Avatar
    Krsiak Daniel
    Permalink to comment#

    hi Chris
    I like your screencasts here

    although new look is personal taste and some of us may dislike it :)
    your technical work, tips and workflow are still awesome and good to look at
    thanks for all the good work in making your business and us all to help with learning new stuff

    those little PHP bits bug me too sometimes when trying to figure them out
    nice screencast

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.