How do you create a responsive image gallery using CSS?

When creating a responsive image gallery, the primary goal is to ensure images display well across different devices (such as desktops, tablets, and smartphones). To achieve this, we can employ several CSS techniques.

1. Using Percentage Width

By setting the image width to a percentage, the image dimensions dynamically adjust based on the parent container's size. This is a fundamental and effective method commonly used in simple responsive designs.

css
img {
  width: 100%;
  height: auto;
}

In this example, all <img> elements within the container will attempt to fill the width of their parent container, while the height automatically adjusts to maintain the original aspect ratio.

2. Media Queries

Media queries are a powerful tool in responsive design, allowing us to apply different style rules based on screen sizes. For an image gallery, we can define multiple breakpoints to optimize display across different devices.

css
/* Default styles */
img {
  width: 100%;
  height: auto;
}

/* When screen width exceeds 600px */
@media (min-width: 600px) {
  img {
    width: 50%;
  }
}

/* When screen width exceeds 1000px */
@media (min-width: 1000px) {
  img {
    width: 33.33%;
  }
}

In this example, all images default to filling the entire container. When the screen width exceeds 600px, each image occupies half the container width, allowing two images per row. When the screen width exceeds 1000px, each image occupies one-third of the container width, allowing three images per row.

3. Flexbox

Flexbox provides more flexible layout configuration options. By setting the image container to Flexbox, we can easily control the arrangement and spacing of images.

css
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.container img {
  width: 100%;
  height: auto;
  flex-basis: 100%;
}

@media (min-width: 600px) {
  .container img {
    flex-basis: calc(50% - 10px);
  }
}

@media (min-width: 1000px) {
  .container img {
    flex-basis: calc(33.33% - 10px);
  }
}

Here, the .container class defines a Flexbox container where images default to filling the entire container width. Using media queries, we adjust the flex-basis of each image to ensure consistent spacing between images.

Conclusion

By using the above methods, we can create a visually appealing and powerful responsive image gallery. In actual projects, you can choose suitable methods based on specific requirements or combine several methods to achieve the best user experience.