如何用CSS Grid实现中间列设最大宽度的三列布局

你的问题出在列宽的设置逻辑上：10% minmax(80%, 64rem) 10%的写法，当容器宽度超过80rem（64rem ÷ 0.8）时，中间列会固定为64rem，但两侧列的10%是容器宽度的固定百分比，导致总列宽之和小于容器宽度，无法让两侧随容器合理扩展。

只需将两侧列的宽度单位从10%改为1fr，利用Grid的弹性分配特性就能实现需求：

.container {
  display: grid;
  /* 关键修改：用1fr替代10%，让两侧列弹性分配空间 */
  grid-template-columns: 1fr minmax(80%, 64rem) 1fr;
  grid-template-rows: min-content auto;
  min-height: 100vh;
  background-color: red;
}

.header {
  grid-column: 2 / 3; /* 简化写法，效果与原代码一致 */
  background-color: blue;
}

.content {
  grid-column: 2 / 3;
  background-color: yellow;
}

HTML代码无需修改：

<div class="container">
  <div class="header">
    header
  </div>
  <div class="content">
    content
  </div>
</div>

原理说明 #

• 当容器宽度小于80rem时，minmax(80%, 64rem)会取80%，此时1fr + 80% + 1fr刚好占满容器，每个1fr等价于容器宽度的10%，符合初始布局要求。
• 当容器宽度大于等于80rem时，80%的容器宽度会超过64rem，minmax(80%, 64rem)会触发最大值限制，中间列固定为64rem；两侧的1fr会自动平分容器宽度减去64rem的剩余空间，实现两侧随容器宽度增长的效果。

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