我正在開發一個基于CSS網格的布局系統，我想生成偏移類。例如，一個& quot。col-offset-1類將指示該元素將其自身放在第二列的開頭，與前一個元素并排。

我一直在試驗網格-列-開始，我認為網格-列-開始:跨度2；會以類似于grid-column-end的方式來實現這一點，但事實并非如此。該元素仍然從其隱式放置所定義的列開始，然后跨越2列。

棘手的是，我希望這是動態的，所以我不能使用特定的網格線參考手動放置東西。我正在尋找一種解決方案，它將采用一個元素應有的任何隱式列開始位置，并將其移動“X”列。

參見參考圖片:

我在尋找一個規則，我可以應用到一個類上，在兩個藍色元素上使用，并實現這種布局，兩者都跳過他們應該開始的列。

# # #你想達到的目標是不可能實現的，但如果你玩寬度游戲，你可以模擬它:

.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>