CSS Grid用minmax实现低分辨率右侧列自适应缩小（无媒体查询）

问题核心 #

固定fr权重的三列布局会在所有尺寸下严格按照1:6:5分配空间，小屏场景下右侧列占比过高会挤压主内容区域。目标是实现小屏1:9:2、大屏1:6:5的平滑比例过渡，全程不使用媒体查询，保留原有命名网格线不改动现有布局逻辑。

实现方式 #

方案1：线性动态fr权重（完美匹配需求比例） #

利用calc()动态计算两个可变列的fr权重，配合minmax()防止内容溢出，在设定的视口范围内实现比例平滑过渡，原有命名网格线、网格区域、元素定位规则完全不需要修改。
直接替换.container中的grid-template-columns配置即可：

.container {
  display: grid;
  grid-template-areas:
    "head drawer"
    "main drawer";
  height: 100%;
  grid-template-rows: auto 1fr;
  /* 替换原有固定fr配置 */
  grid-template-columns:
    [full-start center-start] 1fr
    [center-end drawer-start] minmax(0, calc(9fr - 3fr * (100vw - 320px) / 880px))
    [drawer-end full-end] minmax(0, calc(2fr + 3fr * (100vw - 320px) / 880px));
  padding-top: 2rem;
}

配置说明：

• 过渡区间设为320px（移动端最小宽度）到1200px（桌面端阈值），880px为两个断点的差值，可根据实际需求调整断点数值
• 视口宽度≤320px时，列比例自动为1fr : 9fr : 2fr，符合小屏预期
• 视口宽度≥1200px时，列比例自动为1fr : 6fr : 5fr，和原有大屏配置完全一致
• 中间尺寸下比例线性平滑变化，右侧列随视口缩小逐步收窄，主内容占比同步提升
• 外层包裹minmax(0, ...)是为了覆盖fr单位默认的min-content最小尺寸限制，避免内容溢出撑破布局

方案2：clamp固定右侧列宽（兼容性更好、代码更简洁） #

如果不需要严格匹配fr比例，只需要实现右侧列随宽度收缩的效果，可以直接给右侧列设置clamp()响应式宽度，逻辑更简单，兼容所有支持Grid的现代浏览器：

.container {
  display: grid;
  grid-template-areas:
    "head drawer"
    "main drawer";
  height: 100%;
  grid-template-rows: auto 1fr;
  grid-template-columns:
    [full-start center-start] minmax(0, 1fr)
    [center-end drawer-start] minmax(0, 1fr)
    [drawer-end full-end] clamp(160px, 27vw, 400px);
  padding-top: 2rem;
}

配置说明：

• 右侧抽屉列最小宽度160px（小屏状态），最大宽度400px（大屏状态），中间尺寸按27vw的视口占比动态计算
• 主内容列自动占据剩余空间，小屏下右侧列宽度占比自然降低，主内容获得更多展示空间
• 代码无复杂计算，调试成本更低

完整可运行修改后代码 #

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  text-rendering: optimizeSpeed;
  height: 100%;
  margin: 0;
}

#root {
  height: 100%;
}

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  background: yellow;
  height: 3rem;
}

.container {
  display: grid;
  grid-template-areas:
    "head drawer"
    "main drawer";
  height: 100%;
  grid-template-rows: auto 1fr;
  /* 采用方案1的动态fr配置，可自行替换为方案2 */
  grid-template-columns:
    [full-start center-start] 1fr
    [center-end drawer-start] minmax(0, calc(9fr - 3fr * (100vw - 320px) / 880px))
    [drawer-end full-end] minmax(0, calc(2fr + 3fr * (100vw - 320px) / 880px));
  padding-top: 2rem;
}

.row-1 {
  border: 10px solid blue;
  grid-column: center-end / drawer-start;
}

.main {
  border: 10px solid orange;
  overflow-y: auto;
  height: 100%;
  grid-column: center-end / drawer-start;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main id="root">
      <div class="fixed">Fixed</div>
      <div class="container">
        <div class="row-1">Row 1</div>
        <div class="main">main</div>
      </div>
    </main>
  </body>
</html>

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