CSS Grid列无法换行求助：固定宽列未自动换行

问题描述 #

我通过CSS Grid实现了指定布局：Form Input的顶部与Heading One的底部对齐，整体分为左右两列，左侧是Heading One加长文本区域，右侧是Form Input加提示文本区域。但调整屏幕大小时，明明设置了左右列最小/最大宽度为300px，预期右侧列会换行到左侧列下方，实际第二列却只会收缩宽度。且无法过多修改HTML结构，希望仅通过Grid布局解决该问题。

原代码如下：

原CSS代码 #

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 300px));
  column-gap: 96px;
}

.title {
  grid-row-start: 1;
  grid-row-end: 1;
}

.details {
  grid-row-start: 2;
  grid-row-end: span 3;
}

.form {
  grid-row-start: 2;
  grid-row-end: 2;
}

.message {
  grid-row-start: 3;
  grid-row-end: 4;
}

div {
   border: 1px solid black;
}

原HTML代码 #

<div class="container">
    <div class="title">
        Heading One
    </div>
    <div class="details">
        This can contain a lot of text potentially. This can contain a lot of text potentially. This can contain a lot of text potentially
   </div>
   <div class="form">
       Form Input
   </div>
   <div class="message">
       All is good
   </div>
</div>

解决方案 #

问题核心在于原网格列定义和元素定位逻辑的冲突，导致自动换行失效。修改后的CSS代码如下：

.container {
  display: grid;
  /* 使用auto-fit替代auto-fill，空间不足时自动折叠多余列触发换行 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 96px;
  /* 让网格项自动填充空白区域，避免布局空隙 */
  grid-auto-flow: dense;
}

.title {
  grid-column: 1;
  grid-row: 1;
}

.details {
  grid-column: 1;
  grid-row: 2 / span 2;
}

.form {
  grid-column: 2;
  grid-row: 2;
}

.message {
  grid-column: 2;
  grid-row: 3;
}

div {
   border: 1px solid black;
}

关键调整说明 #

• auto-fit替换auto-fill：auto-fill会保留空列位置，导致无法触发换行；auto-fit则会在空间不足时折叠空列，让现有列填充空间并换行。
• 1fr作为最大宽度：将原固定的300px最大宽度改为1fr，让列在空间充足时可扩展，不足时收缩到300px后自动换行。
• 明确列定位：给每个元素指定grid-column，确保换行前后布局逻辑一致，同时维持Form Input与Heading One底部对齐的要求。
• grid-auto-flow: dense：避免网格中出现不必要的空白区域，让元素布局更紧凑合理。

当屏幕宽度小于两列加间距的总宽度（300px+96px+300px）时，右侧列会自动换行到左侧列下方，所有元素按垂直顺序排列，同时保留原有布局的对齐规则。

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