We have the grid layout for the Gallery going. Unfortunately the loading of it is a bit abrupt and wonky. This is because CSS3 columns are designed to split content among each of the columns evenly, but images sometimes take a moment to load and don't have a width/height to use yet. So when they do pop in, the columns need to reorganize themselves.

I think we can prevent this wonkiness with some JavaScript though. Since we know the images height and width, we can create a box of the correct aspect ratio to put there as a placeholder. Then when the image is loaded, we'll replace the placeholder with the image.

By the end of the video we're on the right track, but it's a little broken. Don't worry, we'll fix it up in the next video.


  1. CWSpear
    Permalink to comment#

    I know you took it in a bit of a different direction, but just as an FYI: The divs flow to the next column as that’s part of the magic of columns (cuz the text just flows into the next column).

    There is a column-break-inside: avoid; property that might help, but support is wonky (see notes on caniuse).

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:

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

We have a pretty good* newsletter.