html - CSS Grid：在响应式css-grid中自动填充自动填充行？

Question

调整屏幕大小时，我希望第一行始终充满标题。标题需要在网格本身内。我用1/span 4...等尝试了许多不同的选择，但没有成功。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;
}

标签： htmlcsscss-gridautosize