在css中Grid行列尺寸fr单位应用

fr单位用于按比例分配容器剩余空间，适合创建响应式网格布局。例如1fr 2fr将容器分为三份，第一列占1/3，第二列占2/3；可与px等单位混合使用，如100px 1fr 2fr，其中fr分配除去100px后的剩余空间；常结合repeat(auto-fit, minmax(150px, 1fr))实现弹性响应式设计；需注意内容溢出可能破坏布局，应设置min-width: 0避免默认最小尺寸限制fr生效。

在CSS Grid布局中，fr单位是“fraction”的缩写，意思是“份数”或“比例份额”。它用来分配容器中剩余可用空间，特别适合创建灵活、响应式的网格布局。理解fr单位如何影响行和列的尺寸，是掌握Grid布局的关键。

fr单位的基本用法

当你在grid-template-columns或grid-template-rows中使用fr单位时，浏览器会将容器的可用空间按比例划分。

例如：

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

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

混合使用fr与其他单位

fr单位可以和其他单位（如px、%、auto等）一起使用，此时fr只分配剩余空间。

比如：

第一列固定为100px，剩下的水平空间被分为3份：第二列得1份，第三列得2份。这样能实现一侧固定、其余部分弹性分布的效果。

fr与minmax、repeat的结合

实际开发中，常配合repeat()和minmax()函数使用fr，增强灵活性。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

例如创建一个自动换行、每项至少150px宽的响应式网格：

这里每一列最小150px，如果容器空间足够，它们会平均分配剩余空间（每个1fr）。屏幕变窄时自动换行，保持良好布局。

注意fr不适用于内容溢出的情况

fr分配的是可用空间，如果某列内容本身很宽（比如长单词或固定尺寸元素），可能撑破网格。这时需要设置min-width: 0或overflow处理。

例如：

避免因默认最小尺寸导致fr失效。

基本上就这些。fr单位让Grid布局变得非常直观和强大，关键是理解它分配的是剩余空间，并且可以灵活组合其他单位和函数。用好fr，能大大减少媒体查询，提升页面适应性。

以上就是在css中Grid行列尺寸fr单位应用的详细内容，更多请关注php中文网其它相关文章！