Deviantart style image gallery CSS

Question

I'm trying to make an image gallery using Django and python. I'm new to HTML and CSS and need to show the images in a grid. I want one image in a row to be the same height but different width like Deviantart's. And the number of columns should be different like shown in the image below.

I am able to display the images in a gallery, like this.

but the images are not the same height and not in order. Is there any way to achieve a gallery like in the first image?

Thank you for your time!

Update: This is the code I'm currently using.

.gallery-container {
  column-count: 4;
  column-gap: 5px;
  margin: 20px;
}

.gallery-item {
  display: inline-block;
  width: 100%;
  background: #1e1f26;
  border-radius: 6px;
}

.gallery-item img {
  display: block;
  border-radius: 5px;
  width: 100%;
}

user_11389581 · Answer

With CSS Grid you can accomplish this sort of "mosaic" image gallery layout. You just need to utilize grid-column and grid-row on grid items to specify the specific columns and rows they should occupy. This should be a good starting point for you to customize the grid further and attempt achieving a pixel perfect "Deviantart" style image gallery.

.gallery-container {
  display: grid;
  grid-template-columns: 7% 10%;
  grid-template-rows: repeat(10, minmax(3rem, 8rem));
  gap: 5px;
  margin: 0 auto;
}

.gallery-item {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #1e1f26;
  border-radius: 6px;
}

.one {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.two {
  grid-column: 2 / 5;
  grid-row: 1 / 3;
}

.three {
  grid-column: 5;
  grid-row: 1 / 3;
}

.four {
  grid-column: 6;
  grid-row: 1 / 3;
}

.five {
  grid-column: 8 / 10;
  grid-row: 1 / 3;
}

.six {
  grid-column: 1 / 4;
  grid-row: 3 / 5;
}

.seven {
  grid-column: 4;
  grid-row: 3 / 5;
}

.eight {
  grid-column: 5;
  grid-row: 3 / 5;
}

.nine {
  grid-column: 6 / 10;
  grid-row: 3 / 5;
}

.gallery-item img {
  display: block;
  border-radius: 5px;
  object-fit: cover;
  height: 100%;
  width: 100%;
  max-width: 100%;
}

user_13544849 · Answer

Is that work?

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  width:100%;
}

.gallery-item {
  display: flex;
  flex-wrap: wrap; 
  background: #1e1f26;
  border-radius: 6px;
}

.gallery-item img { 
  border-radius: 5px;  
  max-width: 400px;
  margin: 5px;
}

Deviantart style image gallery CSS

2 Answers