窗口缩小时Grid第三列无法转为第一行的问题求助

你的问题出在grid-template-columns: 1fr 1fr 1fr是固定三列布局，浏览器会强制保留三列，窗口缩小时只会让每列等比缩小，不会自动换行。要实现教程里的响应式换行效果，需要改用自动适配的网格列写法：

核心修改步骤 #

• 将固定列数的网格配置替换为自适应规则：
  把grid-template-columns: 1fr 1fr 1fr改成：

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  

  • auto-fit：让浏览器自动计算当前容器宽度能容纳多少列，空间不足时自动换行
  • minmax(320px, 1fr)：保证每列最小宽度为320px（可根据需求调整），容器宽度足够时，每列用1fr均分剩余空间

• 检查网格容器和子元素的宽度设置：

  • 确保网格容器没有设置固定宽度（比如width: 1200px）或min-width，否则容器无法收缩，元素只能跟着缩小
  • 给视频卡片子元素添加max-width: 100%，避免子元素固定宽度撑破网格列

示例代码 #

修改后的网格容器CSS：

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px; /* 保持列之间的间距 */
  padding: 0 16px; /* 可选，给容器左右加内边距避免贴边 */
}

视频卡片子元素补充样式：

.video-card {
  max-width: 100%;
  /* 你的其他样式：比如视频缩略图、标题、作者信息等 */
}

这样调整后，窗口缩小到不足以容纳三列时，第三列会自动换行到下一行，后续继续缩小还会变成单列布局，和教程里的效果一致。

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