前军教程网

要使用 display: grid 并让按钮在网格中左右对齐，可以设置网格的列定义来分配空间，并使用 justify-items 属性来控制对齐方式。

以下是一个示例，展示如何使用 display: grid 让按钮在网格中水平排列并左右对齐：

.div-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  justify-items: stretch; /* 默认值，网格项会填充整个网格区域 */
  gap: 10px; /* 网格项之间的间隙 */
}

button {
  /* 按钮宽度可以根据需要设置 */
}

在这个示例中，.div-container 是一个网格容器，它使用 display: grid 属性。grid-template-columns 属性定义了网格的列，repeat(auto-fill, minmax(100px, 1fr)) 表示网格会自动填充尽可能多的最小宽度为100px、最大宽度为1fr（fraction单位，表示可用空间的一部分）的列。justify-items: stretch; 表示网格项会在其网格区域的左右两侧之间拉伸，从而实现左右对齐。

如果想要按钮靠左或靠右对齐，可以使用 justify-self 属性在按钮级别进行控制：

button {
  justify-self: start; /* 靠网格区域的左边对齐 */
}

/* 或者 */

button {
  justify-self: end; /* 靠网格区域的右边对齐 */
}

请注意，justify-self 属性可以覆盖 justify-items 的默认对齐方式，允许你对单个按钮的对齐方式进行更精细的控制。

HTML结构如下：

<div class="div-container">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <!-- 更多按钮... -->
</div>

使用 display: grid 可以创建一个灵活且响应式的布局，非常适合于创建复杂的用户界面布局。通过调整 grid-template-columns、justify-items 和 justify-self 属性，可以实现各种不同的对齐和布局效果。