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