css - 是否可以使用 CSS Grid 跳过下一列？

Question

我正在开发一个基于 CSS 网格的布局系统，我想生成偏移类。例如，“.col-offset-1”类将指示元素将其自身放置在前一个元素的第二列的开头。

我一直在尝试 grid-column-start ，我认为 grid-column-start: span 2;会以与 grid-column-end 的工作方式类似的方式实现这一点，但事实并非如此。该元素仍然从其隐式放置定义的列开始，然后跨越 2 列。

这里棘手的一点是我希望它是动态的，所以我不能使用特定的网格线引用来手动放置东西。我正在寻找一种解决方案，该解决方案将采用元素应有的任何隐式列开始位置，并将其沿“X”列移动。

参见图片以供引用:

我正在寻找一种规则，我可以将其应用于一个类以在两个蓝色元素上使用，并实现此布局，其中两个元素都跳过它们应该开始的列。

Answer 1

你想要实现的目标是不可能的，但如果你玩宽度，你可以模拟它:

.container {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  gap: 10px;
}

.container > div {
  background: lightblue;
  height: 50px;
}
.container > div.offset {
  grid-column:span 2; /* take 2 columns */
  width: calc((100% - 10px)/2); /* take the width of one column */
  margin-left: auto; /* get placed at the second column */
  
  background: red;
}

<div class="container">
  <div></div>
  <div></div>
  <div class="offset"></div>
  <div></div>
  <div class="offset"></div>
  <div></div>
</div>