如何用CSS Grid实现不等分响应式列并支持宽度折叠

需求说明 #

要创建一个包含两个元素的Grid容器，满足：

• 正常状态下，第一个元素占页面宽度的2/3，第二个占1/3
• 当页面宽度小于570px时，两列自动折叠，每个元素占满整行宽度

之前尝试的两种写法都存在问题：

• 使用grid-template-columns: repeat(auto-fill,minmax(570px,1fr))：能实现折叠效果，但两列是等宽的，不符合2:1的比例要求
• 使用grid-template-columns: minmax(570px,1fr) 1fr：布局完全失去响应性，不会触发折叠，还会导致页面溢出

解决方案：媒体查询+Grid（最可靠方案） #

这种方式逻辑清晰、可控性强，完全匹配需求：

.grid-container {
  display: grid;
  /* 桌面端保持2:1的列宽比例 */
  grid-template-columns: 2fr 1fr;
  gap: 1rem; /* 可选：添加列间距，提升视觉效果 */
}

/* 当视口宽度小于570px时，切换为单列布局 */
@media (max-width: 570px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

原理说明

• 桌面端直接用2fr 1fr分配列宽，确保两列严格按照2/3和1/3的比例占用容器宽度
• 当视口宽度低于阈值时，媒体查询触发，将列布局改为单列，每个子元素自动占满整行宽度，不会出现溢出问题

为什么之前的代码失效？ #

你使用minmax(570px,1fr) 1fr的写法时，第一列被强制设置了最小宽度570px——即使页面宽度小于570px，第一列也会保持这个宽度，导致容器整体宽度超出视口，自然不会触发折叠，反而出现页面溢出的问题。

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