Question

我想给其他每一行一个不同的样式，即背景色。在表中，可以将 nth-child 与 tr 标签一起使用，但是我想在CSS网格中实现相同的目的。我可以为每个单元格使用不同的类，但在更改列数或行数时无法正常工作。还有一个类似的问题，但这并不相同，因为更改列数会破坏样式。

body {
  height: 100vh;
  width: 90vw;
  margin: 0 auto;
}

body .grid-container {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.grid-cell {
  border-left: 1px solid lightblue;
  border-top: 1px solid pink;
  height: 50px;
}

<center>
  <h3 class="title">This is the table</h3>
</center>
<div class="grid-container">
  <div class="grid-cell" id="cell-1"></div>
  <div class="grid-cell" id="cell-2"></div>
  <div class="grid-cell" id="cell-3"></div>
  <div class="grid-cell" id="cell-4"></div>
  <div class="grid-cell" id="cell-5"></div>
  <div class="grid-cell" id="cell-6"></div>
  <div class="grid-cell" id="cell-7"></div>
  <div class="grid-cell" id="cell-8"></div>
  <div class="grid-cell" id="cell-9"></div>
  <div class="grid-cell" id="cell-10"></div>
  <div class="grid-cell" id="cell-11"></div>
  <div class="grid-cell" id="cell-12"></div>
  <div class="grid-cell" id="cell-13"></div>
  <div class="grid-cell" id="cell-14"></div>
  <div class="grid-cell" id="cell-15"></div>
  <div class="grid-cell" id="cell-16"></div>
  <div class="grid-cell" id="cell-17"></div>
  <div class="grid-cell" id="cell-18"></div>
  <div class="grid-cell" id="cell-19"></div>
  <div class="grid-cell" id="cell-20"></div>
</div>

设置CSS网格容器中单元格的交替行的样式

0 个答案: