Grid Split Video Hero

You can get into some really complex layouts using all the techniques we’ve learned.

While a basic video hero doesn’t need much to get it done, hero components are rarely designed so simply.

But grid can still help us.

<div class="grid hero">
  <div class="hero__heading"></div>
  <div class="hero__cta"></div>
  <video autoplay playsinline muted loop class="media"></video>
</div>

.grid {
  height: 75vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 75vh;
  grid-template-areas:"a b";
}

.hero__heading {
  grid-area: a;
  z-index: 2;
}

.hero__cta {
  grid-area: b;
  z-index: 2;
}

.media {    
  grid-area: 1/1/2/3;
}

This is all we need to get things into position. Everything else is aesthetic.

See the Pen Grid Video Hero (split-grid) by Dave Cross (@davecross) on CodePen.