Build Image Gallery with CSS Flex

You already know flex and don't want to read the rest of this article?
ul {
display: flex;
flex-flow: row wrap;
}
li {
flex: 0 0 100%;
}
@media (min-width: 605px) {
li {
flex: 0 0 50%;
}
}
@media (min-width: 910px) {
li {
flex: 0 0 33%;
}
}
Let's say you're building a portfolio website for a designer or photographer or an artist, you would have to display their work in some sort of grid gallery. The fastest way to do this and make it responsive is by using the bootstrap grid system but why introduce an entire CSS framework when you can implement in less than 10 lines of CSS. Flex is not the official layout system for CSS, but personally i feel it's easier to use than grid and it's best to use both when laying out your website.
Now let's dive into the code.
This is github repo.
Check the demo here
The Markup
<ul>
<li>
<figure>
<img src="https://res.cloudinary.com/samtech/image/upload/f_auto/q_auto/v1578386144/Ps-sm_5.jpg" alt="His Likeness Emmages">
<figcaption>His Likeness Emmages</figcaption>
</figure>
</li>
</ul>
There's not much here. The first thing to do is define a flex container or parent and the ul
tag here is the flex container while the li
tag is the child element. We used figure
here cause our images has captions and i used cloudinary to optimize the images. To reduce the image size without loosing quality, i added q_auto
and f_auto
to the url.
The Styles
ul {
display: flex;
flex-flow: row wrap;
}
li {
flex: 0 0 100%;
}
img {
width: 100%;
}
@media (min-width: 605px) {
li {
flex: 0 0 50%;
}
}
@media (min-width: 910px) {
li {
flex: 0 0 33%;
}
}
This is where the magic happens. We've introduced display: flex
to the parent element. That's the first and most important thing to do. flex-flow: row wrap
are default flex properties so you can decide not to use it.
The child element li
has this property flex: 0 0 100%
P.S. We are using mobile first responsive design techniques here.
The flex: 0 0 100%
is an aggregation of 3 flex properties; flex-grow, flex-shrink and flex-basis
respectively. Flex-shrink and flex-basis are optional. The default value is flex: 0 auto
which is equivalent to flex: 0 1 auto
. Here our flex-basis: 100%
for mobile, in flex we don't use width
to define the width of a flex item cause width
is kind of static and flex-basis
is relative. flex-basis
is both width and height in a Flexbox, depending on the flex direction. Read more about width vs flex-basis
Furthermore, i used two breakpoints. min-width: 605px
for tablets and min-width: 910px
for desktop. Depending on how you want to place your images, here in tablet screens, they'll a 2 images in a row and in desktop mode 3 images.
Summary
Flexbox is not the official layout system for CSS (Grid is) but it's easier to use when creating layouts for simple pages like this. Use some of these flex layout generator tools to create your layout: Loading.io or Webflow.
Check the demo here.