Question

我试图更换数据网格＆amp;使用基于CSS网格的布局在Bootstrap中设置的交互式组件。

我能够复制网格，但是很难得到像表条带一样的工作。从我对CSS Grid的理解，因为我知道将提前显示的列数而不是行数（从服务器动态生成的数据），我需要使用grid-template-columns: repeat(3, auto);，每个单元格必须是包装器div的直接子节点。

我已尝试使用nth-child来获得我想要的效果，但无法弄清楚哪个选择器会让我定位动态范围的元素。

当行数提前未知时，是否有更好的方法使用CSS Grid设置网格布局？

这里是fiddle with what I have so far, which includes all the code below。在我的真实项目中，行是动态生成的，现在有5列 - 虽然这可能在将来发生变化。

＆＃13;

.grid-table {
  display: grid;
  display: -ms-grid;
  grid-template-columns: repeat(3, auto);
  -ms-grid-template-columns: repeat(3, auto);
}

.grid-table :nth-child(-n+3) {
  background-color: red;
}

＆＃13;

<div class="grid-table">
  <span>Room Name</span>
  <span>Start Date</span>
  <span>End Date</span>

  <span>Room 100</span>
  <span>Tuesday</span>
  <span>Wednesday</span>

  <span>Room 200</span>
  <span>Tuesday</span>
  <span>Friday</span>

  <span>Room 200</span>
  <span>Tuesday</span>
  <span>Friday</span>

  <span>Room 200</span>
  <span>Tuesday</span>
  <span>Friday</span>
</div>

＆＃13;

Answer 1

使用以一列中每隔一行为目标的选择器。

对于其他列，只需调整并重复。

＆＃13;

.grid-table {
  display: grid;
  grid-template-columns: repeat(3, auto);
}

.grid-table > span:nth-child(-n+3) {
  background-color: red;
}

.grid-table > span:nth-child(6n+4),
.grid-table > span:nth-child(6n+5),
.grid-table > span:nth-child(6n+6) {
  background-color: lightgreen;
}

＆＃13;

<div class="grid-table">
  <span>Room Name</span>
  <span>Start Date</span>
  <span>End Date</span>
  <span>Room 100</span>
  <span>Tuesday</span>
  <span>Wednesday</span>
  <span>Room 200</span>
  <span>Tuesday</span>
  <span>Friday</span>
  <span>Room 200</span>
  <span>Tuesday</span>
  <span>Friday</span>
  <span>Room 200</span>
  <span>Tuesday</span>
  <span>Friday</span>
  <span>Room Name</span>
  <span>Start Date</span>
  <span>End Date</span>
  <span>Room 100</span>
  <span>Tuesday</span>
  <span>Wednesday</span>
  <span>Room 200</span>
  <span>Tuesday</span>
  <span>Friday</span>
  <span>Room 200</span>
  <span>Tuesday</span>
  <span>Friday</span>
  <span>Room 200</span>
  <span>Tuesday</span>
  <span>Friday</span>
</div>

＆＃13;

Answer 2

如今，您还可以使用带有 display:contents 的元素来包含单元格（我已按行或列将它们“分组”），并以这种方式将样式应用于单元格。

.r_container {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  width:200px;
  justify-content:center;
  align-items:center;
  font-family:sans-serif;
}

.r_group {
  display:contents;
}

.r_group:nth-of-type(2n) > .cell {
  background-color:dimgray;
}

.cell {
  justify-content:center;
  align-items:center;
  text-align:center;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}

.header > .cell {
  background-color:black;
  color:white;
  font-weight:500;
}

<h1>Organized by Row</h1>
<div class="r_container">
  <div class="r_group header">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
  </div>
  <div class="r_group">
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
  <div class="r_group">
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
  </div>
  <div class="r_group">
    <div class="cell">10</div>
    <div class="cell">11</div>
    <div class="cell">12</div>
  </div>
</div>

表格在CSS网格

2 个答案: