grid-template-columns: 200px 1fr;

本文深入解析了 CSS Grid 中 `grid-template-columns` 混用固定宽度（如 `200px`）与弹性单位（如 `1fr`）这一高效、标准且浏览器兼容性极佳的布局模式，阐明其核心原理——`1fr` 并非简单“填满剩余空间”，而是精准分配容器宽度减去所有固定列后的**可用自由空间**，多 `fr` 值按比例瓜分；同时直击开发者高频踩坑点，如父容器缺失 `display: grid` 或显式宽度、干扰性样式导致 `1fr` 失效，并对比 Grid 与 Flexbox/表格在固定+自适应列场景下的本质差异，强调 Grid 对内容无关的可控伸缩、原生二维布局及响应式动态重算优势，为构建稳健的后台系统、仪表盘等多栏界面提供清晰、可靠、可扩展的实践指南。

可以，grid-template-columns 混用固定值和 1fr 是标准且推荐的做法，浏览器支持良好，无需 polyfill。

怎么写 grid-template-columns 实现固定列 + 自适应列

直接在 grid-template-columns 中按顺序写入具体像素/百分比值和 1fr 即可。例如三列布局：第一列固定 200px，第二列固定 120px，剩余空间给第三列：

grid-template-columns: 200px 120px 1fr;

注意：1fr 不会“填满剩余所有空隙”，它只分配**可用的自由空间**（即容器宽度减去所有固定列宽后的剩余部分）；如果还有其他 fr 单位，它们会按比例瓜分该剩余空间。

常见错误：1fr 没生效或列宽异常

多数问题出在父容器或 Grid 本身未满足基本渲染条件：

• 父容器没有设置 width 或被内容撑开，导致 1fr 计算基准为 0
• 忘了给容器声明 display: grid
• 设置了 min-width: fit-content 或 width: max-content 等破坏弹性行为的样式
• 子元素设置了 width 或 min-width 强制覆盖 Grid 分配逻辑

更灵活的场景：固定列 + 多个自适应列

比如左侧菜单固定 240px，右侧主内容区再分两栏等宽（各占剩余空间一半）：

grid-template-columns: 240px 1fr 1fr;

或者想让中间列优先占更多空间（如 2 份），右侧列占 1 份：

grid-template-columns: 240px 2fr 1fr;

此时注意：所有 fr 的总份数不影响最终宽度，只影响比例；2fr 1fr 和 6fr 3fr 效果完全一样。

和 table / flex 布局的关键区别

Grid 的 1fr 是基于**网格容器的可用内宽**计算，不依赖子项内容长度；而 flex: 1 在 Flexbox 中虽然也常用于自适应，但若子项有固有宽度（如图片、长文本），可能触发最小尺寸限制，导致实际伸缩不如 Grid 可控。

另外，Grid 允许你明确控制行列关系（比如跨列、对齐方式），而纯 flex 往往需要嵌套才能模拟多维布局——这点在固定列+自适应列的后台管理系统中特别明显。

真正容易被忽略的是：当容器本身宽度随视口变化时（比如响应式），1fr 对应的像素值是动态重算的，但固定列（如 200px）始终不变——这意味着小屏下可能出现横向滚动或内容挤压，需要配合 minmax() 或媒体查询做兜底。

本篇关于《grid-template-columns: 200px 1fr;》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！