Creating an Image Gallery

To create an image gallery in HTML, use a container element (like a div) to hold each image, and use CSS Grid to arrange your images. This allows you to create a fluid, responsive layout that automatically adjusts to different screen sizes.

The most modern way to create a gallery is by using CSS Grid. It's much simpler and more powerful than older methods that used floats or inline-blocks. With just a few lines of CSS, you can create a gallery that looks great on both mobile and desktop devices.

The HTML Structure

Your HTML should consist of a parent container and several child elements, each containing an img:

The CSS Grid Layout

To arrange these images into a grid, use the grid-template-columns property with the auto-fit and minmax() functions:

How it works

repeat(auto-fit, ...): Tells the browser to create as many columns as will fit into the container.
minmax(200px, 1fr): Ensures that each column is at least 200px wide, but stretches to fill the remaining space (1fr) if there's room.
object-fit: cover: This ensures that all images fill their container area without being squished or stretched, regardless of their original aspect ratio.

Interactive Example

Below is a working example of a responsive image gallery. Try resizing your browser window to see how the columns automatically adjust to the available space:

<!DOCTYPE html>
<html>
<head>
<title>HTML Image Gallery Example</title>
<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
    padding: 10px;
  }
  .gallery-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
  }
  .gallery-item:hover img {
    transform: scale(1.1);
  }
</style>
</head>
<body>
  <h2>Responsive Image Gallery</h2>
  <p>This gallery uses CSS Grid to automatically arrange images into columns that adapt to the screen size.</p>

View Output Full Screen Preview

Gallery Hover Effects

Adding a simple hover effect, like a slight zoom or a change in opacity, can make your gallery feel more interactive and professional. In the example above, I used transform: scale(1.1); and transition: transform 0.3s ease; to create a smooth zoom effect when the user hovers over an image.