嵌套Grid布局居中时左侧动态列内容被裁剪的技术求助

问题描述 #

需要创建嵌套Grid布局，满足以下需求：

• 父容器包含两列，左侧Grid的列数、宽度动态可变（支持0到n列），右侧Grid宽度固定
• 父容器需水平居中，但添加justify-content: center后，左侧Grid的部分内容被裁剪
• 期望效果：父容器在自身完整宽度范围内实现居中

复现代码 #

CSS #

.grid {
  background-color: #e2e2e2;
  height: 400px;
  display: grid;
  overflow: auto;
  grid-template-columns: max-content 400px;
  justify-content: center;
}

.grid-1,
.grid-2 {
  border: 1px solid #000000;
  display: grid;
  grid-template-columns: 1fr;
}

.grid-1 {
  direction: rtl;
  grid-auto-columns: max-content;
}

.grid-1>div {
  width: 150px;
}

HTML #

<div class="grid">
  <div class="grid-1">
    <div style="grid-column: 1; grid-row: 1;">first</div>
    <div style="grid-column: 2; grid-row: 1;">second</div>
    <div style="grid-column: 3; grid-row: 1;">third</div>
  </div>
  <div class="grid-2">
    static width
  </div>
</div>

解决方案 #

问题根源在于justify-content: center的作用逻辑：设置该属性后，Grid容器会先将自身宽度收缩到内容最小宽度再居中，导致左侧动态内容超出时被裁剪。

调整方案：

1. 将父Grid容器的display属性从grid改为inline-grid，让容器宽度自适应内部内容总宽度
2. 移除justify-content: center，改用margin: 0 auto实现父容器水平居中

修改后的CSS代码：

.grid {
  background-color: #e2e2e2;
  height: 400px;
  display: inline-grid; /* 适配内容宽度 */
  overflow: auto;
  grid-template-columns: max-content 400px;
  margin: 0 auto; /* 实现水平居中 */
}

.grid-1,
.grid-2 {
  border: 1px solid #000000;
  display: grid;
  grid-template-columns: 1fr;
}

.grid-1 {
  direction: rtl;
  grid-auto-columns: max-content;
}

.grid-1>div {
  width: 150px;
}

修改后父容器会先适配左右Grid的总宽度，再通过外边距在页面水平居中，同时左侧动态列的内容不会被裁剪，完全符合需求。

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