<body>

  <header class="header">
    <h1 class="heading">Masonry Image Layout</h1>
    <p class="body-text">
      CSS grids were used to create this masonry layout of images, no Javascript was used. This is the best view on the large screen at this time.
    </p>
  </header>

  <main class="container">
    <div class="item-1">
      <img class="img" src="https://picsum.photos/500/300" alt="">
    </div>
    <div class="item-2">
      <img class="img" src="https://picsum.photos/500/301" alt="">
    </div>
    <div class="item-3">
      <img class="img" src="https://picsum.photos/500/302" alt="">
    </div>
    <div class="item-4">
      <img class="img" src="https://picsum.photos/500/600" alt="">
    </div>
    <div class="item-5">
      <img class="img" src="https://picsum.photos/500/800" alt="">
    </div>
    <div class="item-6">
      <img class="img" src="https://picsum.photos/500/400" alt="">
    </div>
    <div class="item-7">
      <img class="img" src="https://picsum.photos/500/304" alt="">
    </div>
    <div class="item-8">
      <img class="img" src="https://picsum.photos/500/401" alt="">
    </div>
    <div class="item-9">
      <img class="img" src="https://picsum.photos/500/900" alt="">
    </div>
    <div class="item-10">
      <img class="img" src="https://picsum.photos/500/305" alt="">
    </div>
    <div class="item-11">
      <img class="img" src="https://picsum.photos/500/500" alt="">
    </div>
    <div class="item-12">
      <img class="img" src="https://picsum.photos/500/901" alt="">
    </div>
    <div class="item-13">
      <img class="img" src="https://picsum.photos/500/700" alt="">
    </div>
    <div class="item-14">
      <img class="img" src="https://picsum.photos/500/402" alt="">
    </div>
    <div class="item-15">
      <img class="img" src="https://picsum.photos/500/306" alt="">
    </div>

  </main>

  <footer class="footer">
    <p class="footer-text">Created by Madalena.design</p>
  </footer>

</body>
/* CSS reset */
*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
  position: relative;
}

html {
  font-size: 62.5%;
}

/* Typography --------------------------------------------*/

body {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 2rem;
  text-align: center;
}

.heading {
  margin-bottom: 3rem;
}

.body-text {
  font-size: 1.6rem;
  line-height: 2.5rem;
  margin: 0 auto;
  width: 70%;
}

.footer-text {
  color: #fff;
  font-size: 1.5rem;
}

/* Header --------------------------------------------*/

.header {
  margin: 0 auto;
  padding: 3rem 0;
  width: 65%;
}

/* Footer --------------------------------------------*/

.footer {
  background-color: #333;
   margin-top: 3rem;
  padding: 2rem 0;
  width: 100%;
}

/* Grids --------------------------------------------*/

.container {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(12, 150px);
  margin: 0 auto;
  max-width: 90%;
  padding: 3rem 0;
}

/* Grid images --------------------------------------------*/

.img {
  border-radius: 1rem;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Grid items --------------------------------------------*/

.item-4 {
  grid-row: 2/5;
}

.item-5 {
  grid-row: 2/6;
}

.item-6 {
  grid-row: 2/4;
}

.item-7 {
  grid-row: 5/6;
}

.item-8 {
  grid-row: 4/6;
}

.item-9 {
  grid-row: 6/11;
}

.item-10 {
  grid-row: 6/7;
}

.item-11 {
  grid-row: 6/9;
}

.item-12 {
  grid-row: 7/12;
}

.item-13 {
  grid-row: 9/13;
}

.item-14 {
  grid-row: 11/13;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.