CSS Grid: auto fill row with auto-fill in responsive css-grid?

Question

When resizing the screen, I want to keep the first row always filled with the title. The title needs to be inside the grid itself. I have tried many diferrent options with 1/span 4... etc, without success. https://codepen.io/ctw/pen/JjjPmwj

<div class="list">
  <div class="title">
    This is the title to fill
  </div>
  <div class="cell">0</div>
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
</div>

.list {
  display: grid;
  grid-template-columns: repeat(auto-fit, 250px);
}
.title {
  background: lightgreen;
  grid-column: 1  / 5;       <== keep the first row filled by the title
}
.cell {
  background: lightblue;
  height: 40px;
}