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.

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.