如何通过css grid-template-columns与fr单位分配比例

使用 fr 单位可创建灵活网格布局，.grid-container { display: grid; grid-template-columns: 1fr 2fr; } 将容器按比例分为两列，第一列占 1/3，第二列占 2/3；fr 可与 px、rem 等固定单位混合使用，如 150px 1fr 2fr，实现侧边栏与内容区布局；等分列可用 repeat(3, 1fr) 简写；fr 分配的是扣除固定列后的剩余空间，容器宽 800px 时 200px 1fr 1fr 的两个弹性列各占 300px；合理使用 fr 能提升响应式布局效率。

CSS 的 grid-template-columns 配合 fr 单位是创建灵活网格布局的核心方法。fr（fraction）代表“份数”，它将容器的可用空间按比例划分给各个网格列，自动适应容器大小，无需手动计算像素值。

理解 fr 单位的基本用法

fr 表示一个可伸缩的网格轨道，其大小是根据剩余可用空间来分配的。比如：

上面的代码表示：容器被分为两列，第一列占 1 份，第二列占 2 份，总共 3 份。因此第一列占容器宽度的 1/3，第二列占 2/3。

混合使用 fr 与其他单位

你可以将 fr 与固定单位（如 px、rem）结合使用，实现更复杂的布局。

立即学习“前端免费学习笔记（深入）”；

这里第一列固定为 150px，剩余空间被分成 3 份（1 + 2），第一弹性列占 1/3 剩余空间，第二列占 2/3。适合侧边栏+主内容+侧边内容的布局。

等分列的简洁写法

想让所有列等宽？可以用 fr 快速实现：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

58

查看详情

三列各占 1/3 宽度。也可以简写为：

这种写法更清晰，尤其在列数较多时非常实用。

注意可用空间的计算方式

fr 分配的是剩余空间。如果某列设为固定宽度，其他 fr 列将在扣除该宽度后分配剩余空间。

例如：

容器宽 800px，则剩余 600px 被两个 fr 列平分，每列 300px。

基本上就这些。合理使用 fr 能让你的网格布局自动适应不同屏幕尺寸，减少媒体查询的依赖，提升开发效率。关键在于理解“份数”如何瓜分可用空间。

以上就是如何通过css grid-template-columns与fr单位分配比例的详细内容，更多请关注php中文网其它相关文章！