<div class="grid">
  <article class="item">
    <h2>Element 1</h2>
  </article>
  <article class="item">
    <h2>Element 2</h2>
  </article>
  <article class="item">
    <h2>Element 3</h2>
  </article>
</div>
<div class="grid">
  <article class="item">
    <h2>Element 1</h2>
  </article>
  <article class="item">
    <h2>Element 2</h2>
  </article>
  <article class="item">
    <h2>Element 3</h2>
  </article>
</div>
body {
  display: flex;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  flex: 1 1 50%;
  padding: 10px;
}

.item:first-child {
  grid-column: 1 / 4;
}

.item:nth-child(2) {
  grid-column: 1 / 3;
}

.item:nth-child(3) {
  grid-column: 1 / 2;
}

.grid:nth-child(2)  {
  .item {
    background: #c96;
  }
    .item:first-child {
      grid-column: 1 / -1;
    }

  .item:nth-child(2) {
      grid-column: 1 / -2;
    }

  .item:nth-child(3) {
    grid-column: 1 / -3;
  }
}

External CSS

  1. https://codepen.io/matuzo/pen/vmpaWe

External JavaScript

This Pen doesn't use any external JavaScript resources.