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:

leveraging Lighthouse audits to optimize web performance

Leveraging Lighthouse audits to optimize web performance

Slow-loading pages can stem from multiple causes, which makes them one of the most challenging issues to fix in web development. Lighthouse can help you detect and solve your web performance issues.

Anna Monus
May 14, 2025 ⋅ 6 min read

Building multi-region infrastructure with AWS

This isn’t theory. It’s the exact setup you need to deliver fast, resilient apps across AWS regions with zero fluff.

Marie Starck
May 13, 2025 ⋅ 5 min read
the nine best FaunaDB alternatives for 2025

The 9 best FaunaDB alternatives for 2025

Looking for a FaunaDB alternative to migrate to? Examine nine other platforms you can use and factors to consider when choosing an alternative.

Nefe Emadamerho-Atori
May 13, 2025 ⋅ 7 min read
Techniques To Circulate And Record Knowledge In Engineering Teams

Techniques to circulate and record knowledge in engineering teams

From onboarding to bug tracking, these knowledge-sharing techniques keep your team aligned, reduce overhead, and build long-term technical clarity.

Marie Starck
May 12, 2025 ⋅ 4 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