Question

我想使网格的第一项达到全高，就像固定列一样，这是我的代码：

HTML

<div class="cell">
  <div class="cell-50">column</div>
  <div class="cell-50">1</div>
  <div class="cell-50">2</div>
  <div class="cell-50">3</div>
  <div class="cell-50">4</div>
  <div class="cell-50">5</div>
  <div class="cell-50">6</div>
  <div class="cell-50">7</div>
  <div class="cell-50">1</div>
  <div class="cell-50">2</div>
  <div class="cell-50">3</div>
  <div class="cell-50">4</div>
  <div class="cell-50">5</div>
  <div class="cell-50">6</div>
  <div class="cell-50">7</div>
  <div class="cell-50">1</div>
  <div class="cell-50">2</div>
  <div class="cell-50">3</div>
  <div class="cell-50">4</div>
  <div class="cell-50">5</div>
  <div class="cell-50">6</div>
  <div class="cell-50">7</div>
  <div class="cell-50">1</div>
  <div class="cell-50">2</div>
  <div class="cell-50">3</div>
  <div class="cell-50">4</div>
  <div class="cell-50">5</div>
  <div class="cell-50">6</div>
  <div class="cell-50">7</div>
</div>

CSS

*{box-sizing:border-box;}
.cell{
  border:1px solid red;
  padding:10px;
  display: grid;
  grid-template-columns: 100px repeat(7, 1fr);
}
.cell-50{
  border:1px solid green;
}
.cell-50:first-child{
  background:tomato;
  grid-row: 1 / -1;
}

我已经进行了搜索，但是只找到了使列全宽的解决方案。我无法添加另一个div，我必须在网格中使用第一个div。

JSFidle

更新

Hodrobond在comment的question中对此进行了回答。这是解决方案https://jsfiddle.net/s6qz4fkx/

使网格第一项达到全高

0 个答案: