SOURCE

<div class="app">
  
  <header class="masthead">
    <h1 class="logo">Grid</h1>
    <nav class="main-nav">
      <ul class="nav-links">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </nav>
  </header>
  <section class="intro">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi facere, provident odit praesentium nihil eos porro animi incidunt fuga dicta tempora qui dolorem tempore accusantium at consequuntur rerum soluta quisquam mollitia quasi earum eligendi, quod alias. Vero neque dolorum quisquam, itaque ex ducimus nulla similique adipisci commodi fugiat laboriosam eligendi eum possimus eius. Nobis ratione iure dolorem, provident eaque facere perferendis doloribus aliquam repellendus ipsa, hic fugiat cumque eligendi ullam vel molestias aut voluptatibus ex!</p>
    <img src="https://source.unsplash.com/1600x900?Chicago" alt="">
  </section>
  <article class="article">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi facere, provident odit praesentium nihil eos porro animi incidunt fuga dicta tempora qui dolorem tempore accusantium at consequuntur rerum soluta quisquam mollitia quasi earum eligendi, quod alias. Vero neque dolorum quisquam, itaque ex ducimus nulla similique adipisci commodi fugiat laboriosam eligendi eum possimus eius. Nobis ratione iure dolorem, provident eaque facere perferendis doloribus aliquam repellendus ipsa, hic fugiat cumque eligendi ullam vel molestias aut voluptatibus ex!</p>
    <img src="https://source.unsplash.com/1600x900?Chicago" alt="">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit excepturi facere, provident odit praesentium nihil eos porro.</p>
  </article>
  <section class="gallery">
    <img src="https://source.unsplash.com/1600x900?Chicago" alt="">
    <img src="https://source.unsplash.com/1600x900?Chicago" alt="">
  </section>
  <footer class="footer">
    <h1 class="logo footer-logo">Grid</h1>
    <nav class="main-nav">
      <ul class="nav-links">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </nav>
  </footer>
  
</div>

img {
  width: 100%;
  display: block;
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.app {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

/* header,
footer,
section,
article {
  display: grid;
  grid-template-columns: subgrid;
} */

.masthead,
.footer,
.intro,
.gallery,
.article {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  padding: 0 3rem;
}

.intro,
.gallery,
.article {
  padding: 3rem;
}

.masthead {  
  background: #eee;
}

.logo {
  grid-column: 1 / 4;
  font-size: 6rem;
  margin: 0;
  text-transform: uppercase;
}

.main-nav {
  grid-column: 9 / 13;
  align-self: center;
}

.intro img {
  grid-column: 1 / 7;
  grid-row: 2;
}

.intro p {
  grid-column: 8 / 13;
  grid-row: 2;
}

article {
  background: #eee;
}

.article img {
  grid-column: 3 / 11;
  grid-row: 3;
}

.article p:first-child {
  grid-column: 3 / 6;
  grid-row: 4;
}

.article p:last-child {
  grid-column: 8 / 11;
  grid-row: 4;
}

.gallery img:first-child {
  grid-column: 3 / 8;
}

.gallery img:last-child {
  grid-column: 10 / 13;
  align-self: end;
}

.footer {
  background: #eee;
}