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.

Comments

  1. 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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.