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>