From the course: CSS: Combining Grid and Flexbox

Unlock the full course today

Join today to access over 24,500 courses taught by industry experts.

Picture gallery

Picture gallery - CSS Tutorial

From the course: CSS: Combining Grid and Flexbox

Start my 1-month free trial Buy for my team

Picture gallery

“

- [Instructor] I really love this next feature of CSS Grid. We not only have the ability to create a seamless, responsive picture grid with elements that are different sizes, but we can now accomplish this with just a few lines of CSS. No need to use JavaScript. And the great additional feature is that it's completely responsive. As I resize my page, my photo gallery picture grid is just going to reformat and you can see as I scroll through the images, the spaces are being filled. This is an amazing feature. Let me show you how easy this is to do. This is what the starting file currently looks like. You can see that I have a series of images and they are going to display if possible side by side, and that's only because they're inline images. So if there's enough space, they will appear next to each other. But the grid itself is not very well formatted. Let's look at the HTML and CSS. Here's the HTML for this section.…

Contents