Question

我知道

  grid-column: 1 / -1;

将在第一列中形成一个单元格以跨越整个行。有没有如果该单元格不在第一列中，是否等效？

例如，类似

  grid-column: 4 / -4;

这将覆盖整行。

Answer 1

一个想法是考虑一个子网格，该子网格将填充您调整内容位置的整个行：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin:5px;
  border: 1px solid;
}

.item {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: inherit; /*should be the same as the main grid*/
  background: red;
}

<div class="grid">
  <span class="item"><span style="grid-column:1">some text</span></span>
</div>
<div class="grid">
  <span class="item"><span style="grid-column:2">some text</span></span>
</div>
<div class="grid">
  <span class="item"><span style="grid-column:3">some text</span></span>
</div>
<div class="grid">
  <span class="item"><span style="grid-column:4">some text</span></span>
</div>

CSS网格-具有循环逻辑的行跨越

1 个答案: