Create a galley with overlapping images using CSS grid

Step 1: HTML

Let’s fetch images with picsum API and add HTML with stacked on each other by default.

Step 2: Create the grid

I am using this specific code for creating rows and columns. Play with those numbers if you like.

.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 1fr 4rem 1fr 5rem 1fr 10rem;
  margin: 0 auto;
  max-width: 800px;
}

Step 3: Place the images in the grid

Let’s adjust the images position finally and place them in the grid with overlapping on each other.

Apart from adding the grid code from above, I have set box-sizing as border-box. Adding a box-show property will add a nice tough to images. Also, images have aspect-ratio set instead of a fixed height.

This is very basic example to display the gallery with overlapping images. Experiment with it and make as complex as possible.

Share this post