<section class="gallery gallery__frame">
  <figure class="gallery__item gallery__item--1 ">
    <img src="https://i.imgur.com/CVpBrBE.jpeg" alt="Gallery image 1" class="gallery__img ">
  </figure>
  <figure class="gallery__item gallery__item--2 ">
    <img src="https://i.imgur.com/ADDEJ7T.jpeg" alt="Gallery image 2" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--3">
    <img src="https://i.imgur.com/K7V2qTn.jpeg" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--4">
    <img src="https://i.imgur.com/4GMweKL.jpeg" alt="Gallery image 4" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--5">
    <img src="https://i.imgur.com/AMk9i9c.jpeg" alt="Gallery image 5" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--6">
    <img src="https://i.imgur.com/HxGEnZ6.jpeg" alt="Gallery image 6" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--7">
    <img src="https://i.imgur.com/z2gbsFu.jpeg" alt="Gallery image 7" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--8">
    <img src="https://i.imgur.com/l3cUTtW.jpeg" alt="Gallery image 8" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--9">
    <img src="https://i.imgur.com/XWK2vJ6.jpeg" alt="Gallery image 9" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--10">
    <img src="https://i.imgur.com/XAo6ao2.jpeg" alt="Gallery image 10" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--11">
    <img src="https://i.imgur.com/3yGiBt6.jpeg" alt="Gallery image 11" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--12">
    <img src="https://i.imgur.com/yYiENgF.jpeg" alt="Gallery image 12" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--13">
    <img src="https://i.imgur.com/KniJzML.jpeg" alt="Gallery image 13" class="gallery__img">
  </figure>
  <figure class="gallery__item gallery__item--14 frame">
    <img src="https://i.imgur.com/Al8XIaO.jpeg" alt="Gallery image 14" class="gallery__img">
  </figure>

</section>
* {
  background-color: black;
}
// Wood frame style
.gallery__frame {
  padding: 15px;
  background: url("https://i.imgur.com/xUw3L88.jpeg") repeat;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

//GALLERY

.gallery {
  background-color: white;
  grid-column: full-start / full-end;

  display: grid;
  grid-template-columns: repeat(8, 1fr);
  //We use vw (viewport width) in order for the grid height to not change when the viewport shrinks
  grid-template-rows: repeat(7, 5vw);

  grid-gap: 1.5rem;
  padding: 1.5rem;

  &__item {
    &--1 {
      grid-row: 1 / 3;
      grid-column: 1 / 3;
    }

    &--2 {
      grid-row: 1 / 4;
      grid-column: 3 / 6;
    }

    &--3 {
      grid-row: 1 / 3;
      grid-column: 6 / 7;
    }

    &--4 {
      grid-row: 1 / 3;
      grid-column: 7 / 9;
    }

    &--5 {
      grid-row: 3 / 6;
      grid-column: 1 / 3;
    }

    &--6 {
      grid-row: 4 / 6;
      grid-column: 3 / 5;
    }

    &--7 {
      grid-row: 4 / 5;
      grid-column: 5 / 6;
    }

    &--8 {
      grid-row: 3 / 5;
      grid-column: 6 / 8;
    }

    &--9 {
      grid-row: 3 / 6;
      grid-column: 8 / 9;
    }

    &--10 {
      grid-row: 6 / 8;
      grid-column: 1 / 2;
    }

    &--11 {
      grid-row: 6 / 8;
      grid-column: 2 / 4;
    }

    &--12 {
      grid-row: 6 / 8;
      grid-column: 4 / 5;
    }

    &--13 {
      grid-row: 5 / 8;
      grid-column: 5 / 8;
    }

    &--14 {
      grid-row: 6 / 8;
      grid-column: 8 / 9;
    }
  }

  &__img {
    //we put 100% for the width of the images in order for the images dont ocuppy the whole grid and only a grid cell.
    width: 100%;
    height: 100%;
    // object fit is in order for the image not to overflow, but for object fit to work we have to manually se the width and height of the image
    object-fit: cover;
    display: block;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.