如何在CSS Grid列中实现右对齐数字的整体居中且列宽一致？

需求明确：

• 用CSS Grid展示数值型数据表格
• 指定列（Price、Discount）内的数字右对齐
• 数字整体在分配的列空间内居中
• Price与Discount列宽度完全一致

可行解决方案：嵌套Grid实现 #

不需要额外添加空div，通过嵌套Grid即可同时满足列宽一致、数字右对齐且整体居中的要求，结构更简洁易维护。

最终HTML代码

<div class="product-table">
  <div class="first-column">Item</div>
  <div class="numeric-column">
    <div class="column-title">Price</div>
  </div>
  <div class="numeric-column">
    <div class="column-title">Discount</div>
  </div>

  <div class="first-column">Widget A</div>
  <div class="numeric-column">
    <div class="numeric-value">2.00</div>
  </div>
  <div class="numeric-column">
    <div class="numeric-value">0.50</div>
  </div>

  <div class="first-column">Widget B</div>
  <div class="numeric-column">
    <div class="numeric-value">2,000.00</div>
  </div>
  <div class="numeric-column">
    <div class="numeric-value">2.50</div>
  </div>

  <div class="first-column">Widget C</div>
  <div class="numeric-column">
    <div class="numeric-value">3,000,000.00</div>
  </div>
  <div class="numeric-column">
    <div class="numeric-value">3,000.00</div>
  </div>
</div>

最终CSS代码

.product-table {
  display: grid;
  /* 第一列占20%，后两列均分剩余空间，保证宽度一致 */
  grid-template-columns: 20% repeat(2, 1fr);
  gap: 2px; /* 可选：添加列间距增强可读性 */
}

.first-column {
  background-color: lightcyan;
  padding: 0.5rem;
}

.numeric-column {
  background-color: lightsalmon;
  /* 嵌套Grid，让内部内容整体居中 */
  display: grid;
  place-items: center;
  padding: 0.5rem;
}

/* Discount列单独设置背景色，按需调整 */
.product-table .numeric-column:last-child {
  background-color: lightblue;
}

.column-title {
  text-align: center;
  width: 100%;
}

.numeric-value {
  /* 数字右对齐 */
  text-align: right;
  /* 宽度自适应内容，避免过度拉伸 */
  width: 100%;
  max-width: max-content;
}

方案说明 #

1. 外层Grid控制列宽：repeat(2, 1fr)确保Price和Discount列均分剩余空间，宽度完全一致。
2. 嵌套Grid实现双重对齐：
   • 外层.numeric-column用place-items: center让内部内容（标题/数字）在列空间内居中。
   • 内部.numeric-value设置text-align: right让数字右对齐，同时max-width: max-content保证数字不会被过度拉伸，始终以内容宽度为基准右对齐。
3. 结构简洁：无需额外空div，HTML结构清晰，便于维护。

对比之前的尝试问题 #

• 第一次尝试：直接给列设置text-align: center，无法同时实现数字右对齐和整体居中。
• 第二次尝试：添加空div冗余，且0.4fr auto 0.4fr的列宽组合无法精确保证Price列总宽度与Discount列一致。

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