2024-06-19
3109
#css
Ibadehin Mojeed
112227
Jun 19, 2024 ⋅ 11 min read

How to create a responsive image gallery with CSS flexbox

Ibadehin Mojeed I'm an advocate of project-based learning. I also write technical content around web development.

Recent posts:

axios post requests

Axios POST requests: Handling errors, authentication, & best practices

Learn about the Axios POST method and discover how to deploy it in vanilla JavaScript and frameworks like React.

Chimezie Innocent
Apr 29, 2025 ⋅ 16 min read
creating server-driven web apps with htmx

Creating server-driven web apps with htmx

Explore htmx, a small browser-oriented JavaScript library aimed at building no-nonsense, server-driven web apps.

Elijah Asaolu
Apr 29, 2025 ⋅ 16 min read
The nine best create react app alternatives

The 9 best Create React App alternatives

Compare nine alternatives to the Create React app, and learn how they can help you build modern React applications more efficiently.

Nefe Emadamerho-Atori
Apr 29, 2025 ⋅ 8 min read
6 Hidden Gems In The JavaScript API You Should Be Using

6 hidden gems in the JavaScript API you should be using

Explore underrated JavaScript APIs like `structuredClone` and `AbortController` that let you build dynamic, performant, and user-friendly apps.

Rahul Padalkar
Apr 28, 2025 ⋅ 10 min read
View all posts

6 Replies to "How to create a responsive image gallery with CSS flexbox"

  1. Excellent article! I’m using the pointers here in my own project. I found that since the text over the images is only visible on rollover, they are not visible on a mobile device, so I’m just putting the text over the image and the color overlay so it’s visible at all times.

  2. I think there’s a typo in the Making it Responsive section where you have set –gallery-items-per-row to 3 for width between 540px and 768px. I think you meant that to be 2?

Leave a Reply