在明确放置的行上偏移 CSS 个网格项目

Question

我正在尝试通过 CSS 网格布局实现以下目标：

A                    A
B  B  B  B  B  B  B  B
C  C     E  E  E  E  E
         D  D  D
         F  F  F

我可以在 HTML 中添加类但我无法重新排序元素或添加包装元素。

我几乎已经通过使用明确的 grid-row 值实现了这一点。是否可以将最后两行从第四列 开始定位，而无需为每个元素 单独明确指定 grid-column 属性？（为简洁起见，我在这里将其保留为 6，但实际布局中还有更多）

这是我目前所拥有的。如您所见，E 和 F 的两行从第 1 列开始。

我可以将 grid-column: 4 添加到 .c13，但行中的后续元素流回第 1 列。

.grid {
  display: grid;
  grid-template-rows: repeat(5, 2em);
  grid-gap: 0.5em;
  text-align: center;
}

.c2 {
  grid-column: 8;
}

.c16 {
  grid-column: 4;
}

.extra1 {
  grid-row: 4;
}

.extra2 {
  grid-row: 5;
}

.global1 { background-color: #ccc; }
.intra1 { background-color: lightblue; }
.intra2 { background-color: yellow; }
.intra3 { background-color: purple; color: white; }
.extra1 { background-color: orange; }
.extra2 { background-color: #f66; }

<p>You need a browser that supports CSS Grid Layout for this.</p>

<section class='grid'>
  <div class='c1 global1'>A</div>
  <div class='c2 global1'>A</div>
  <div class='c3 intra1'>B</div>
  <div class='c4 intra1'>B</div>
  <div class='c5 intra1'>B</div>
  <div class='c6 intra1'>B</div>
  <div class='c7 intra1'>B</div>
  <div class='c8 intra1'>B</div>
  <div class='c9 intra1'>B</div>
  <div class='c10 intra1'>B</div>
  <div class='c11 intra2'>C</div>
  <div class='c12 intra2'>C</div>
  <div class='c13 extra1'>D</div>
  <div class='c14 extra1'>D</div>
  <div class='c15 extra1'>D</div>
  <div class='c16 intra3'>E</div>
  <div class='c17 intra3'>E</div>
  <div class='c18 intra3'>E</div>
  <div class='c19 intra3'>E</div>
  <div class='c20 intra3'>E</div>
  <div class='c21 extra2'>F</div>
  <div class='c22 extra2'>F</div>
  <div class='c23 extra2'>F</div>
</section>

Answer 1

您可以将 pseudo-elements 添加到 .grid 以屏蔽您不想使用的位。 CSS 网格会将 pseudo-element 视为 grid-item 并用完指定的 space。在您的情况下，这些规则应该有效：

.grid:before{
  content:'';
  grid-column: 1 / 4;
  grid-row: 4 / -1;
}
.grid:after{
  content:'';
  grid-column: 7 / 10;
  grid-row: 4 / -1;
}

这里有一个例子供你玩：https://codepen.io/chrisboon27/pen/Lddpqa 我在文本中添加了 background-color 以便更容易看到发生了什么，但您只需删除它们即可。

在明确放置的行上偏移 CSS 个网格项目

Offset CSS grid items on explicitly placed rows

html

css

css-grid