Create an Automatically Responsive Flexbox Gallery
With just a handful of CSS properties, we can create an intrinsically responsive photo gallery using flexbox. This is accomplished by setting our preferred width as the flex-basis value and allowing items to both shrink and grow. The use of object-fit: cover on images allows them to fully fill up the list item without distortion or overflow. We finish the gallery with a small animated effect that alters opacity.
Stephanie Eckles: [0:00] Here we have a selection of images that have been marked up within list items in the list with the class of gallery. Our goal is to create an intrinsically responsive gallery using flexbox layout.
[0:13] We'll begin our gallery class by removing the default list styles with list-style: none; padding: ; and margin: . Then we will set display: flex, and flex-wrap: wrap. On save, we do not see much change because our images are quite large and in varying dimensions.
[0:34] Let's begin to style the images. First, we'll set the property object-fit: cover; with a width: 100%; and height: 100%. This will allow our images to fill the parent element. In this case, the list item. On save, we still do not see a change because we have not defined the dimensions of the list item.
[0:56] Let's define our gallery list item using flex shorthand to allow a flex grow of 1, a flex shrink of 1, and set our preferred width of 20rem.
[1:08] On save, you'll see that our images have reflowed and begun to align next to each other. This is because the current viewport, in this case, is greater than 60rem, which is allowing three images across with the top, and because we have an odd number of images, two across the bottom which because of the flex grow and shrink of 1, the last two images are allowed to expand to fill the remaining space.
[1:33] Let's apply a few more explicit dimensions by setting a min-height: 30vh and a max-height: 50vh. On save, you see that the list items do not take up more than 50 percent of the current viewport height.
[1:50] We're having a bit of spacing occur due to the inherent browser styles on body. Let's set that more explicitly with body and margin of .5rem and a background color of #222, which is a nice dark grey.
[2:06] Then, we can update our gallery height to use calc and subtract .5 rem from the 50vh, which means that when the viewport is large enough to contain two rows of images, they will completely fill the viewport with no overflow scrolling.
[2:24] To complete our gallery, let's add a slight animation to the images. First, we'll set opacity: .7, then add a transition that uses 180ms duration set explicitly on the opacity property with the east-in-out function.
[2:42] On hover, we'll define that the opacity should come back up to 1. On save, we can preview this transition.
[2:50] In review, we created an intrinsically responsive photo gallery using flexbox. This was enabled by setting flex grow and shrink to 1 and using the flex spaces to set our preferred width of 20rem.
[3:07] Once the viewport allows a multiplier of 20rem, more images are allowed to align next to each other or removed as the viewport shrinks. We also set object-fit cover with width and height 100 percent so that the images would fill the list items without distortion or overflow.
[3:26] Finally, we created a small animation on our images through the use of opacity and transition.