Hero with Overlappers

This layout is a single Grid with five columns and two rows. The hero spans all five to allow its background color to go full-bleed (i.e., to extend to the page’s sides). The items marked 2–4 occupy columns 2, 3, and 4, respectively.

The overlapping effect is achieved by setting a negative margin-top on each of those three boxes. Alternatively, you could add a third Grid row between the hero and the boxes, and make the hero span rows 1 and 2, and make the boxes span rows 2 and 3.

The Finished Example Layout

Tempora minus inventore

Quam repudiandae odit quos ullam neque, deserunt illum ratione expedita. Fuga placeat non ducimus libero veritatis. Cupiditate, esse?

2
3
4

The Code

HTML
<div class="grid">
  <div class="wrapper-hero">
    <div class="hero">
      <h1 class="heading">Tempora minus inventore</h1>
      <p class="blurb">Quam repudiandae odit quos ullam neque, deserunt illum ratione expedita. Fuga placeat non ducimus libero veritatis. Cupiditate, esse?</p>
    </div>
  </div>

  <div class="box box-a">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>


CSS
body {
  margin: 0;
}

/* Layout
-------------------------------------- */
/* No grid by default, so provide some vertical separation between items when stacked vertically and limit their widths */
@media (max-width: 37.4375rem) {
  .box {
    margin-top: 20px;
    max-width: 60vw;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Define the grid in wider viewports */
@media (min-width: 37.5rem) {
  .grid {
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: 1fr repeat(3, minmax(auto, 290px)) 1fr;
  }
}

@media (min-width: 37.5rem) {
  .wrapper-hero {
    /* span the entire first row (5 columns) */
    grid-column: span 5;
  }
  .box-a {
    /* only need to place one of the small boxes on the grid -- the rest fall into place due to Grid's auto-placement algorithm */
    grid-column: 2;
  }
  .box {
    /* overlap grid item on top of hero */
    margin-top: -2.5rem;
  }
}

/* Generic styles for demo purposes
-------------------------------------- */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.grid,
.hero {
  font-family: Tahoma, sans-serif;
  text-align: center;
}

/* Hero */
.wrapper-hero {
  background-color: #e4a232;
}

.hero {
  margin-left: auto;
  margin-right: auto;
  max-width: 60rem;
  padding: 2.25rem 2rem;
}

@media (min-width: 37.5rem) {
  .hero {
    padding-bottom: 5.175rem;
    padding-top: 3rem;
  }
}

.heading {
  font-size: 2.75rem;
  margin: .5rem 0 0;
}

.blurb {
  font-size: 1.25rem;
  line-height: 1.5;
}

/* Small boxes */
.box {
  background-color: #fabe58;
  font-size: 1.75rem;
  padding: 2em;
}