Hexagon gallery (with CSS grid)

by Julien Roche

HTML

<body>
  <div class="hexagon hexagon--img-1"></div>
  <div class="hexagon hexagon--img-2"></div>
  <div class="hexagon hexagon--img-3"></div>
  <div class="hexagon hexagon--img-4"></div>
  <div class="hexagon hexagon--img-5"></div>
  <div class="hexagon hexagon--img-6"></div>
  <div class="hexagon hexagon--img-7"></div>
  <div class="hexagon hexagon--img-8"></div>
  <div class="hexagon hexagon--img-9"></div>
  <div class="hexagon hexagon--img-10"></div>
  <div class="hexagon hexagon--img-11"></div>
  <div class="hexagon hexagon--img-12"></div>
</body>

CSS

body {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  grid-template-columns: repeat(6, 1fr);
}

.hexagon {
  width: 200px; 
  height: 200px;
  background-color: black;
  background-position: 50% 50%;
  background-size: cover;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.hexagon:nth-child(n) {
  margin-top: 0px;
}

.hexagon:nth-child(2n) {
  margin-top: 50px;
}

.hexagon--img-1 {
  background-image: url("https://images.unsplash.com/photo-1500395235658-f87dff62cbf3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=caf592fe79ef67c69701deafb3fc17aa&auto=format&fit=crop&w=600&q=80");
}

.hexagon--img-2 {
  background-image: url("https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&s=10f2e97699b156850d17285683b6ce81&auto=format&fit=crop&w=600&q=80");
}

.hexagon--img-3 {
  background-image: url("https://images.unsplash.com/photo-1506062942698-078f5c29bedc?ixlib=rb-0.3.5&s=967a5608baa572e82b4b9ea0ec84c09d&auto=format&fit=crop&w=600&q=80");
}

.hexagon--img-4 {
  background-image: url("https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-0.3.5&s=74197485ae087b16fb4b349d0a10b7fa&auto=format&fit=crop&w=600&q=80");
}

.hexagon--img-5 {
  background-image: url("https://images.unsplash.com/photo-1477414876610-1ec826f2e689?ixlib=rb-0.3.5&s=8244a3a7e52dea9545004dc7e58014c3&auto=format&fit=crop&w=600&q=80");
}

.hexagon--img-6 {
  background-image: url("https://images.unsplash.com/photo-1509376642819-55dd03bd83a8?ixlib=rb-0.3.5&s=55eb313be27da9c5081e072f7ac89075&auto=format&fit=crop&w=600&q=80");
}

.hexagon--img-7 {
  background-image: url("https://images.unsplash.com/photo-1424896842869-a5bda51fca24?ixlib=rb-0.3.5&s=521c8470a85fe6be4c539547334bad23&auto=format&fit=crop&w=600&q=80");
}

.hexagon--img-8 {
  background-image: url("https://images.unsplash.com/photo-1421986527537-888d998adb74?ixlib=rb-0.3.5&s=82803864920d13cfd198e849e8a79e77&auto=format&fit=crop&w=600&q=80");
}

.hexagon--img-9 {
 ...