Build a Responsive Image Gallery Using Flexbox and Grid

Looking for a clean, responsive image gallery for your portfolio or project? In this tutorial, we’ll walk through how to build one using just HTML and CSS — no JavaScript, no libraries, just layout magic. We'll combine the power of Flexbox for structure and CSS Grid for responsive image placement.

Step 1: Set Up the Basic HTML

We’ll start with a simple container and image elements. You can replace the image URLs with your own or use placeholders like the ones shown here.

<div class="gallery">
  <img src="https://picsum.photos/seed/1/300" alt="Gallery image">
  <img src="https://picsum.photos/seed/2/300" alt="Gallery image">
  <img src="https://picsum.photos/seed/3/300" alt="Gallery image">
  <img src="https://picsum.photos/seed/4/300" alt="Gallery image">
  <img src="https://picsum.photos/seed/5/300" alt="Gallery image">
  <img src="https://picsum.photos/seed/6/300" alt="Gallery image">
</div>

Step 2: Style the Gallery With CSS Grid

Now let’s apply grid layout styles to the container so the images arrange themselves cleanly across different screen sizes.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 20px;
  max-width: 1000px;
  margin: auto;
}

.gallery img {
  width: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

This setup ensures:

• Images stretch to fit their container
• The grid adapts to the screen size
• Spacing and alignment look clean at any width

Step 3: Make It Look Even Better

You can easily add hover effects, light/dark mode tweaks, or even a lightbox script later if you want interactivity. Here’s a quick hover effect:

.gallery img:hover {
  transform: scale(1.03);
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

Conclusion

You now have a flexible, elegant image gallery built entirely with CSS Grid and Flexbox principles. This type of layout is ideal for showcasing portfolio pieces, product photos, or blog content blocks.

Want more tutorials like this? Check out the rest of my dev.to posts here.

If this guide helped you, you can support my work with a coffee:
https://buymeacoffee.com/hexshift