CSS Image Gallery

Creating the Gallery

The core of a simple image gallery is a container with several image items inside. We can use float to make the items sit next to each other and add some styling for borders and padding.

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

For a modern, responsive gallery, it is highly recommended to use Flexbox or CSS Grid instead of floats.