I have a CSS grid but I am struggling to make the layout fit.

As you can see below, all is correct, however I want 'Item 1" and "Item 6" to be the same height so it all runs fluidly.

```css
 .grid > div {background:red;border:2px solid blue;}
 .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
  }
  .span-col-4{grid-column: span 4 / auto;}
  .span-row-2{grid-row: span 2 / auto;}
  .span-row-4{grid-row: span 4 / auto;}
```

```html
<div class="grid">
  <div class="span-row-2">Item 1</div>
  <div class="span-row-4">Item 2</div>
  <div>Item 3</div>
  <div class="span-row-4">Item 4</div>
  <div>Item 5</div>
  <div class="span-row-2">Item 6</div>
  <div class="span-row-2">Item 7</div>
  <div class="span-col-4">Item 8</div>
</div>
```

Thank you