如何使Flex父元素内的Grid居中并自适应列数？解决仅显示2列问题

问题根源 #

你当前的Grid每行只显示2列，是因为grid-template-columns写死了auto auto固定两列，没法根据父容器宽度自适应调整。

修改后的完整代码 #

.parent {
  display: flex;
  justify-content: center;
  /* 可选：给父容器加个宽度范围，方便测试响应式效果 */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: grid;
  /* 核心修改：自动填充尽可能多的列，每列最小100px，超出部分平分空间 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 20px;
  width: 100%;
}

.item {
  background: grey;
  padding: 10px;
}

<div class="parent">
  <div class="container">
    <div class="item">Item 1 <br/> test <br/> test</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
  </div>
</div>

需求对应实现 #

• 居中+自适应列数：父元素用flex的justify-content: center让Grid整体居中，repeat(auto-fill, minmax(100px, 1fr))会根据父容器宽度自动计算能放多少列，每列最少100px，多余空间每列平分。
• 自动换行：auto-fill会自动判断列数是否超出父容器宽度，放不下就自动换行。
• 元素等高：Grid布局默认同一行的单元格会自动拉伸对齐，所有item高度自然保持一致，不用额外写高度属性。

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