CSSGridfr单位使用详解

有志者，事竟成！如果你在学习文章，那么本文《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 快速实现：

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

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

注意可用空间的计算方式

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

例如：

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

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

好了，本文到此结束，带大家了解了《CSSGridfr单位使用详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！