Using CSS Grid is the best way to create a responsive image library. 1. Use CSS Grid layout and implement adaptive grids through display: grid, grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) and gap; 2. Optionally add media queries to accurately control the number of columns at different breakpoints, such as the small screen set to 1 column and the flat panel set to 2 columns; 3. Optimize image performance, adjust the size reasonably, use WebP format and combine srcset to achieve responsive loading; in addition, you can try multi-column layout to simulate the waterfall flow effect, but it is recommended to use the main Grid solution, which does not require JavaScript, is highly adaptable and simple to maintain, ensuring that the pictures are beautifully arranged on each device, and ultimately realize an efficient and responsive image display interface.

Creating a responsive image gallery with CSS is straightforward if you use modern layout techniques like Flexbox or CSS Grid. The goal is to display images in a neat grid that adjusts automatically to different screen sizes—mobile, tablet, and desktop—without overlapping or overflowing.

Here's how to build a clean, responsive image gallery using CSS Grid (recommended for galleries):

1. Use CSS Grid for a flexible layout

CSS Grid is ideal for creating two-dimensional layouts. It allows you to define rows and columns that automatically adjust based on container size.

HTML structure:

 <div class="gallery">
  <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="How to create a responsive image gallery with CSS? 1">
  <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="How to create a responsive image gallery with CSS? 2">
  <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="How to create a responsive image gallery with CSS? 3">
  <img src="/static/imghw/default1.png"  data-src="image4.jpg"  class="lazy" alt="How to create a responsive image gallery with CSS?">
  <img src="/static/imghw/default1.png"  data-src="image5.jpg"  class="lazy" alt="How to create a responsive image gallery with CSS?">
  <img src="/static/imghw/default1.png"  data-src="image6.jpg"  class="lazy" alt="How to create a responsive image gallery with CSS?">
</div>

CSS:

 .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  padding: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

How it works:

• auto-fit automatically fits as many columns as possible into the container.
• minmax(200px, 1fr) means each column is at least 200px wide but grows equally to fill the space.
• gap adds spacing between images.
• width: 100% ensures images scale within their grid cell.
• height: auto maintains aspect ratio.

This layout will go from 1 column on small phones to 4 columns on large screens—automatically.

2. Add responsiveness with media queries (optional fine-tuning)

While the above works well, you might want more control at specific breakpoints.

 @media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

This ensures exactly 1 column on mobile and 2 on tablets, while larger screens use the flexible auto-fit version.

3. Optimize images for performance

Even with responsive layout, large images can slow down your site. Tips:

• Resize images to a reasonable max dimension (eg, 800–1200px wide).
• Use modern formats like WebP.
• Consider using srcset in HTML for resolution switching:

   <img src="/static/imghw/default1.png"  data-src="small.jpg"  class="lazy" srcet="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" alt="How to create a responsive image gallery with CSS?">

Bonus: Masonry-style layout (limited native CSS support)

True masonry (Pinterest-style) isn't fully supported in standard CSS yet, but you can simulate it with:

 .gallery {
  column-count: 3;
  column-gap: 10px;
}

.gallery img {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  break-inside: avoid;
}

Note: This works but has limited control and may not handle hover effects well.

Basically, CSS Grid with auto-fit and minmax() is the most reliable and modern way to create a responsive image gallery. It's clean, requires no JavaScript, and adapts beautifully across devices. Just make sure your images are optimized and properly sized.

The above is the detailed content of How to create a responsive image gallery with CSS?. For more information, please follow other related articles on the PHP Chinese website!