如何实现Grid布局下Div超出父容器时自动换行适配屏幕？

嘿，我来帮你搞定这个Grid自动换行的需求！你当前的代码里用了grid-auto-flow: column，这个属性会强制子元素一直往横向排列，不会自动换行，所以得调整一下Grid的核心配置。

核心解决方案：用auto-fit + minmax实现自适应列 #

咱们只需要修改.parent的CSS样式，把固定的列流改成自适应的列模板就行：

.parent {
  width: 100%;
  height: 800px;
  display: grid;
  /* 关键代码：让列自动适配容器宽度 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px; /* 替代grid-column-gap，同时控制行列间距，更通用 */
  background-color: blue;
}

.item {
  height: 30px;
  /* 这里可以去掉固定width，因为minmax已经控制了列宽，子元素会自动占满列宽 */
  background-color: green;
  border: 1px solid yellow;
}

为什么这样能行？ #

• repeat(auto-fit, ...)：auto-fit会根据容器的宽度，自动计算能容纳多少列，多余的列会自动折叠。
• minmax(200px, 1fr)：定义每列的最小宽度是200px，最大宽度是1fr（即平分容器剩余空间）。当屏幕宽度只有250px时，放不下两个200px的列，就会自动变成每行1个元素，完全符合你的要求；当屏幕变宽，能放下更多列时，会自动增加列数，不用手动写媒体查询。

完整示例代码 #

<style>
.parent {
  width: 100%;
  height: 800px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  background-color: blue;
}

.item {
  height: 30px;
  background-color: green;
  border: 1px solid yellow;
}
</style>

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

如果你需要更精准的断点控制（比如特定宽度下强制换行），也可以结合媒体查询，但上面的方法已经能完美实现你要的“根据屏幕尺寸自动换行”的效果，而且代码更简洁通用。

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