CSS Grid宽度异常：如何让其仅占用列宽而非所有子元素宽度

要让Grid仅占用实际列的总宽度，同时保留父容器为column方向的flexbox，只需给.grid元素添加width: min-content属性即可。

原因说明 #

当使用grid-auto-flow: column实现垂直排列自动换列时，Grid默认会计算所有子元素的宽度总和作为自身宽度，即使这些子元素被分配到了不同列中。而width: min-content会强制Grid收缩到实际渲染的列宽度之和，也就是仅占用当前显示列所需的最小宽度，符合预期。同时父容器的align-items: center会让Grid在水平方向居中，不会影响这个宽度设置。

修改后的完整代码 #

CSS

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid {
  border: 1px solid black;
  height: 200px;
  display: grid;
  width: min-content; /* 关键新增属性 */
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fit, 35px);
  grid-auto-columns: min-content;
}

.grid > * {
  display: flex;
  border: 1px solid gray;
}

HTML

<div class="parent">
  <p>label</p>
  <div class="grid">
    <div>1aaaaa</div>
    <div>2aaa</div>
    <div>3aa</div>
    <div>4a</div>
    <div>5aa</div>
    <div>6aa</div>
    <div>7a</div>
  </div>
</div>

这样修改后，即使调整子元素的内容（比如把4a改成4aa），Grid的宽度只会根据实际列的宽度变化，而不会错误地累加所有子元素的宽度。

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