如何实现CSS Grid两列布局：单元素时自动居中显示？

问题描述 #

需使用CSS Grid（因需借助subgrid对齐元素内内容），最多展示两个元素。当仅存在一个元素时，希望该元素居中显示，而非预留空列空间。现有代码如下：

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  column-gap: 8px;
}

.product-card {
  background-color: teal;
}

<div class="content">
  The below looks correct
  <div class="cards">
    <div class="product-card">Product 1</div>
    <div class="product-card">Product 2</div>
  </div>

  This one is funny though, I'd like the product to be centered rather than affording space to an unused column.
  <div class="cards">
    <div class="product-card">Product 1</div>
  </div>
</div>

问题：能否基于实际元素数量，自动切换列数（1-2列），同时保持300px的列宽？

修改后的实现代码 #

只需调整.cards的CSS规则即可实现需求：

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px); /* 自动适配元素数量生成300px宽的列 */
  column-gap: 8px;
  justify-content: center; /* 单元素时居中显示 */
  width: 100%; /* 确保容器占满宽度，让居中生效 */
}

.product-card {
  background-color: teal;
}

原理说明 #

• repeat(auto-fit, 300px)：让Grid自动根据元素数量生成列，每列固定300px宽度，最多生成2列（因为最多只有2个元素），避免多余的空列。
• justify-content: center：当只有1个元素时，网格项会在容器水平方向居中，不会像原代码那样左侧对齐并预留空列空间。
• 完全保留CSS Grid特性，不影响后续使用subgrid对齐元素内部内容的需求。

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