Base CSS for Image Gallery Tutorial

style.css

.image-gallery {
  display: grid;
  grid-gap: 5px;
}

.image-gallery img {
  height: 250px;
  width: 250px;
}


.three-cols-gallery {
  grid-template-columns: repeat(3, 250px);
}

.three-cols-gallery > .gallery-item:nth-of-type(1) {
  grid-column: auto / span 3;
}

.three-cols-gallery > .gallery-item:nth-of-type(1) img {
  width: 100%;
}

.three-cols-gallery > .gallery-item:nth-of-type(n + 5) {
  display: none;
}

.three-cols-gallery > .gallery-item:nth-of-type(n + 4) {
  position: relative;
}
.three-cols-gallery > .gallery-item:nth-of-type(n + 4)::after {
  content: attr(data-see-more) " ";
  color: white;
  background: rgba(0, 0, 0, 0.65);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
}