<body class="container">
  <div class="img-two">
  <img src="https://images.unsplash.com/photo-1504626877899-b3670586ac9f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" />
  </div>
  <div class="img-one">
  <img src="https://images.unsplash.com/photo-1487766036723-04aebf785670?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" />
  </div>
  <div class="img-three">
  <img src="https://images.unsplash.com/photo-1512521743077-a42eeaaa963c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" />
  </div>
  <div class="text-block-one">
    <h2>Read</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc mattis enim ut tellus elementum sagittis.</p>
  </div>
    <div class="text-block-two">
          <h2>Read</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc mattis enim ut tellus elementum sagittis.</p>
  </div>
    <div class="text-block-three">
          <h2>Read</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc mattis enim ut tellus elementum sagittis.</p>
  </div>
    <div class="text-block-four">
    <p>Photo Credits:<br/>photo-3:  https://unsplash.com/@christopher  photo-1:  https://unsplash.com/@aliarifsoydas  photo-2:  https://unsplash.com/@cristian_newman</p>
  </div>
    <div class="text-block-five">
          <h2>Read</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc mattis enim ut tellus elementum sagittis.</p>
  </div>
  <footer>
  </footer>
</body>
html {
  box-sizing:border-box;
  overflow-wrap:break-word;
}
.container {
  width:100%;
  display:grid;
  grid-template-columns: repeat(16, 1fr [col-start]);
  grid-template-rows: repeat(10, 100px [row-start]);
  background:#fff;

}
h2:first-letter {
  font-size:72pt;
}
img {
  max-width:100%;
  min-width:100%;
}
.img-one {
  grid-column:1/ span 4;
  grid-row: 2/ span 6;
}
.img-two {
  grid-column: 6/ span 4;
    grid-row: 2/ span 6;
}
.img-three {
  grid-column: 10/span 7;
  grid-row: 7/ span 6;
  background: #000;
}
.text-block-one {
  grid-column:2/ span 2;
  grid-row: 8/ span 4;
  color:#fff;
  z-index:2;
}
.text-block-two {
  grid-column:5/ span 2;
  grid-row: 9/ span 4;
  color:#fff;
  z-index:2;
}
.text-block-four {
  grid-column:8/ span 2;
  grid-row: 8/ span 4;
  color:#fff;
  z-index:2;
}
.text-block-three {
    grid-column:11/ span 2;
  grid-row: 3/ span 4;
}
.text-block-five {
      grid-column:14/ span 2;
    grid-row: 1/ span 4;
}
footer {
  grid-column:1/ span 9;
  grid-row: 7/ span 7;
  background:#000;
}
@media screen and (max-width:900px){
  .img-two {
    grid-column: 6/ span 8;
    grid-row: 6/ span 6;
    z-index: 2;
}
.img-one {
    grid-column: 1/ span 8;
    grid-row: 4/ span 6;
}
.img-three {
    grid-column: 6/span 11;
    grid-row: 10/ span 6;
z-index:2;
}
.text-block-two {
    grid-column: 5/ span 6;
    grid-row: 11/ span 4;
}
.text-block-three {
    grid-column: 1/ span 12;
    grid-row: 1/ span 1;
}
.text-block-four {
    grid-column: 11/ span 5;
    grid-row: 12/ span 4;
}
  .text-block-five {
    grid-column: 10/ span 4;
    grid-row: 3/ span 4;
}

footer {
    grid-row: 7/ span 9;
}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.