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. User Avatar
    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).

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.

Submit a Comment