DEV Community

loading...
Cover image for Create An Image Gallery Using Flexbox

Create An Image Gallery Using Flexbox

nazanin_ashrafi profile image Nazanin Ashrafi Originally published at nazanin-ashrafi.hashnode.dev ・2 min read

Creating a simple image gallery could be a little hard.
But thanks to flexbox for making it very simple and save us the headaches ! phew!

We're going to create something like this :



P.S. I originally used different pics for this article which I got them from GUWEIZ's twitter




Okay lets get started

Setting up HTML

Create an ul element and add your image

<ul>
        <li><img src="/img/new/Es568VFXYAARANj.jpeg" alt=""></li>
        <li><img src="/img/new/Es56_FqXMAUB_O4.jpeg" alt=""></li>
        <li><img src="/img/new/EvexIKIUYAAHw-L.jpeg" alt=""></li>
        <li><img src="/img/new/EvFHhxNXYAg59-F.jpeg" alt=""></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Setting up CSS

First thing first:

Set the ul element's display to display: flex;.


  ul {
      width: 100%;
      display: flex;
  }
Enter fullscreen mode Exit fullscreen mode

It will line up all the image in one line and no matter how many images you add, they will all end up being in that line

Screenshot from 2021-04-16 16-51-49 (2).png

This is where flex-wrap: wrap; comes in to warp the images.

 ul {
      width: 100%;
      display: flex;
      /* as the name shows, it will wrap your images */
      flex-wrap: wrap;
  }
Enter fullscreen mode Exit fullscreen mode

Screenshot from 2021-04-16 16-56-34 (1).png

This is the final code snippet :


  ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
  }

  li {
      width: 25%;
      /* gets rid of the bullets */
      list-style: none;
  }

  img {
      width: 100%;
  }
Enter fullscreen mode Exit fullscreen mode

We just created a image galley.

But there's a little problem.

As you can see I sorted my images (vertically/horizontally).

What if my images are like this :

Screenshot from 2021-04-20 19-54-51 (1).png

What if you don't want to sort your images? or you have lot of images and don't have time to sort them! What should you do then?

In the first method I sorted the images and set width for li element, but this won't work for unsorted images and will completely ruin everything ( like I showed you in the pic above).

From what I've learned from css tricks
, in a situation like this when you have unsorted images you need to set height for li element instead of width
and for img element you need to set max-height , min-width

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  height: 40vh;
  flex-grow: 1;
}

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}
Enter fullscreen mode Exit fullscreen mode


Here's a small galley project I did back then.
You can check it out here

Discussion (2)

pic
Editor guide
Collapse
alimobasheri profile image
MirAli Mobasheri

Thanks for sharing the idea.👍

Collapse
w3abhishek profile image
Abhishek Verma

That's amazing Nazanin