<div class="gallery">
  <img src="https://picsum.photos/id/1040/300/300" alt="a house on the mountain">
  <img src="https://picsum.photos/id/1054/300/300" alt="a big building">
  <img src="https://picsum.photos/id/101/300/300" alt="another house">
  <img src="https://picsum.photos/id/1065/300/300" alt="a small road between two houses">
  <img src="https://picsum.photos/id/1067/300/300" alt="a modern city">
  <img src="https://picsum.photos/id/188/300/300" alt="a lot of old houses">
</div>

.gallery {
  display: grid;
  gap: 10px; 
  grid-template-columns: auto auto auto;
  place-items: center;
}
.gallery > img {
  width: 200px; /* control the size */
  aspect-ratio: 1;
  object-fit: cover;
}

.gallery > img:nth-child(1) {
  clip-path: polygon(0 0,50% 0,100% 100%,0 100%);
}
.gallery > img:nth-child(2) {
  clip-path: polygon(0 0,100% 0,50% 100%);
}
.gallery > img:nth-child(3) {
  clip-path: polygon(50% 0,100% 0,100% 100%,0 100%);
}
.gallery > img:nth-child(4) {
  clip-path: polygon(0 0,100% 0,50% 100%,0 100%);
}
.gallery > img:nth-child(5) {
  clip-path: polygon(50% 0,100% 100%,0% 100%);
}
.gallery > img:nth-child(6) {
  clip-path: polygon(0 0,100% 0,100% 100%,50% 100%);
}



body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #557c75;
}