CSS固定列宽加自适应列宽设置方法

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《CSS 实现固定列宽加自适应列宽，可以使用 grid-template-columns 属性结合固定值和 1fr 来实现。具体方法如下：语法示例：.grid-container { display: grid; grid-template-columns: 200px 1fr; /* 第一列固定宽度 200px，第二列自适应 */ }说明：200px：表示第一列的固定宽度。1fr：表示剩余空间的自适应列宽（fr 是 “fraction” 的缩写，代表可用空间的一部分）。更多列的情况：如果你有多个列，其中一部分是固定宽度，另一部分是自适应，可以这样写：.grid-container { display: grid; grid-template-columns: 150px 1fr 200px; /* 第一列 150px，第二列自适应，第三列 200px */ }动态调整列宽：如果希望某些列根据内容自动调整，但又不完全自适应，可以使用 minmax() 函数： .grid-container { display: grid; grid-template-columns: minmax(150px, 1fr) 1fr; /* 第一列最小 150px，最大自》，聊聊，我们一起来看看吧！

grid-template-columns 混用固定值和 1fr 是标准且推荐的做法；例如三列布局可写为 200px 120px 1fr，其中 1fr 分配容器宽度减去固定列后的可用自由空间，多 fr 按比例分配，需确保父容器设 display: 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() 或媒体查询做兜底。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。