<main class="vh-100 flex items-center justify-center code">
  <article class="my-grid layout vh-75 w-75">

    <div class="f6 f4-l x y1 bt b--purple">
      <span class="nl4 nt2 absolute">1</span>
    </div>
    <div class="f6 f4-l x y2 bt b--purple">
      <span class="nl4 nt2 absolute">2</span>
    </div>
    <div class="f6 f4-l x y3 bt b--purple">
      <span class="nl4 nt2 absolute">3</span>
    </div>
    <div class="f6 f4-l x y4 bt b--purple">
      <span class="nl4 nt2 absolute">4</span>
    </div>
    <div class="f6 f4-l x y5 bt b--purple">
      <span class="nl4 nt2 absolute">5</span>
    </div>
    <div class="f6 f4-l x y6 bt b--purple">
      <span class="nl4 nt2 absolute">6</span>
    </div>

    <div class="f6 f4-l y x1 bl b--pink">
      <span class="nt4 nl1 absolute">1</span>
    </div>
    <div class="f6 f4-l y x2 bl b--pink">
      <span class="nt4 nl1 absolute">2</span>
    </div>
    <div class="f6 f4-l y x3 bl b--pink">
      <span class="nt4 nl1 absolute">3</span>
    </div>
    <div class="f6 f4-l y x4 bl b--pink">
      <span class="nt4 nl1 absolute">4</span>
    </div>
    <div class="f6 f4-l y x5 bl b--pink">
      <span class="nt4 nl1 absolute">5</span>
    </div>

    <div class="ba b--green bg-light-green purple
 bw2 flex items-center justify-center lh-copy f6 f3-l green-item">
      col: 1 ➡️ 4<br/>
      row: 2 ➡️ 5
    </div>

    <div class="ba b--light-red bg-washed-red purple
 bw2 flex items-center justify-center lh-copy f6 f4-l red-item">
      col: -1 ➡️ -4<br/>
      row: 1 ➡️ 2
    </div>

    <div class="ba b--blue bg-washed-blue purple
 bw2 flex items-center justify-center lh-copy f6 f4-l blue-item">
      col: 1 span 3<br/>
      row: 5 ➡️ 6
    </div>

    <div class="ba b--gold bg-washed-yellow purple
 bw2 flex items-center justify-center lh-copy f6 f3-l yellow-item">
      col: 3 ➡️ 5<br/>
      row: 4 ➡️ 5
    </div>
  </article>
</main>

.my-grid { 
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.red-item { 
  grid-column-start: -1;
  grid-column-end: -4;
  grid-row-start: 1;
  grid-row-end: 2;
}

.green-item {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 5;
}

.blue-item { 
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 5;
  grid-row-end: 6;
}

.yellow-item { 
  grid-area: 4 / 3 / 5 / 5;
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 5;
}


/**
 * These are all for showing debugging
 * They show the grid lines and numbers
 */
.x { grid-column: 1 / -1; }
.y { grid-row: 1 / -1; }

.y1 { grid-row: 1 / 2; }
.y2 { grid-row: 2 / 3; }
.y3 { grid-row: 3 / 4; }
.y4 { grid-row: 4 / 5; }
.y5 { grid-row: 5 / 6; }
.y6 { grid-row: 6 / 7; }

.x1 { grid-column: 1 / 2; }
.x2 { grid-column: 2 / 3; }
.x3 { grid-column: 3 / 4; }
.x4 { grid-column: 4 / 5; }
.x5 { grid-column: 5 / 6; }

.right--1 { right: -0.5rem; }