如何让CSS网格中未填满的行内元素右对齐？

问题描述 #

我有一个类似电话拨号盘的按钮网格，最后一行元素不足以填满整行，希望该行元素向右对齐、空隙留在左侧。尝试过justify-content、align-content、justify-items和align-items均无法实现效果，请勿告知将这些属性设为end（除非能提供可运行示例）。

想知道仅通过CSS Grid能否实现该效果？已知添加不可见的“缓冲”div可以将该行推到右侧，但希望了解纯CSS控制的方法。

原始代码 #

<div class="inputPanel">
  <div class="button">1</div>
  <div class="button">2</div>
  <div class="button">3</div>
  <div class="button">4</div>
  <div class="button">5</div>
  <div class="button">6</div>
  <div class="button">7</div>
  <div class="button">8</div>
  <div class="button">9</div>
  <div class="button">0</div>
  <div class="button">←</div>
</div>

.inputPanel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  margin-top: 30px;
}

.button {
  padding: 20px;
  text-align: center;
  background-color: #d3d6da;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: 24px;
  cursor: pointer;
}

解决方案 #

可以通过指定最后一行元素的网格列起始位置实现纯CSS控制的右对齐，无需添加额外缓冲元素。具体做法是利用CSS选择器选中最后一行的元素，手动设置它们的grid-column-start属性，让它们占据右侧的列：

修改后的CSS代码 #

.inputPanel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  margin-top: 30px;
}

.button {
  padding: 20px;
  text-align: center;
  background-color: #d3d6da;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: 24px;
  cursor: pointer;
}

/* 选中最后一行的两个元素，指定列起始位置 */
.button:nth-last-child(2) {
  grid-column-start: 2;
}

.button:nth-last-child(1) {
  grid-column-start: 3;
}

原理说明 #

• 原始网格为3列布局，默认情况下最后一行的两个元素会从第1、2列开始排列
• 通过:nth-last-child(2)和:nth-last-child(1)选中最后两个按钮，分别设置它们从第2、3列开始渲染，从而让左侧第1列留空，实现整体右对齐的效果

若后续按钮数量发生变化（比如最后一行元素数量改变），只需调整选择器和对应的grid-column-start值即可适配。

内容的提问来源于stack exchange，提问作者temporary_user_name