在CSS网格中缩进

Question

我有一个带有4个按钮的标题，我将其分为6列，我想将第一个和最后一个留空，并将按钮放在中间。

.test {
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  align-items: center;
  justify-content: center;
}

但是，如果我使用grid-column-start: 2，则按钮将重新排列。

Answer 1

使用grid-column-start: 2在第一个按钮上仅使用button:first-child 。在所有按钮上设置grid-column-start时遇到了问题-请参见下面的演示

.test {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.test button:first-child {
  grid-column-start: 2;
}

<div class="test">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>