I understand why this isn't working, but I can't think of an alternative. Is there any way to have each column's rows span the height of it's content different than the other column rows?

What's pasted below works exactly how I need it to, but it isn't correct. `.recent` is starting on row 2, and spanning 2 rows, making the total number of rows 4. This creates a huge gap below `.middle` and `.right`. Here is a screenshot: 

[![Screenshot of CSS grid](https://i.stack.imgur.com/M30mz.jpg)](https://i.stack.imgur.com/M30mz.jpg) 

@dwjohnston screenshot of grid with your solution:

[![Screenshot of grid with your solution](https://i.stack.imgur.com/sXCXh.jpg)](https://i.stack.imgur.com/sXCXh.jpg)

```css
.grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-gap: 20px;
  align-items: start;
  background: pink;
}

.grid>.left {
  grid-column: 1 / span 3;
  grid-row: 1;
  background: green;
}

.grid>.recent {
  grid-column: 1 / span 3;
  grid-row: 2 / span 2;
  background: red;
}

.grid>.middle {
  grid-column: 4 / span 5;
  grid-row: 1 / span 2;
  background: gray;
}

.grid>.right {
  grid-column: 9 / span 3;
  grid-row: 1 / span 2;
  background: brown;
}
```

```html
<div class="grid">
  <div class="left">
    Left
  </div>
  <div class="recent">
    Recent
    <br> Testing
    <br>
  </div>
  <div class="middle">
    Middle
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
  </div>
  <div class="right">
    Right
  </div>
</div>
```