Next.js中CSS Grid布局元素溢出容器不换行问题求助

你的问题出在Grid容器的列配置上——默认情况下，display: grid不会自动让元素换行，哪怕你给容器设了max-width，元素也会按自身宽度横向排列，直到超出容器和屏幕。

解决这个问题只需要给Grid容器添加自适应的列规则：

• 使用grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，其中：
  • auto-fit 会根据容器宽度自动调整列数，空间不足时自动换行
  • minmax(250px, 1fr) 定义每列的最小宽度为250px，最大宽度平分容器剩余空间（你可以根据需求修改250px这个值）
• 可选添加gap属性，给元素之间设置间距，提升布局美观度

修改后的容器CSS示例：

.grid-container {
  display: grid;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

这个配置会让你的Grid布局自动适配容器宽度，当容器空间不足以容纳所有列时，元素会自动换行到下一行，不会再超出容器范围。

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