如何在CSS中实现Grid等分布局_fractional units与repeat技巧

使用fr单位和repeat()函数可轻松实现CSS Grid等分布局。fr表示可用空间的比例份额，如1fr 1fr 1fr将容器三等分；repeat(3, 1fr)简化重复轨道定义；repeat(auto-fit, minmax(100px, 1fr))实现自适应列数且等宽；常用于三等分布局、响应式卡片网格及等高侧边栏布局，兼具简洁性与灵活性。

在CSS Grid布局中，实现等分布局是常见需求，比如让多个子元素均匀占满容器。通过使用fractional units（fr单位）和repeat()函数，可以非常简洁高效地完成这一目标。

什么是fr单位？

fr是“fraction”的缩写，表示网格容器中可用空间的一个比例份额。它类似于弹性布局中的“份数”概念。

例如，将三列设置为1fr 1fr 1fr，它们将平分容器的宽度，每列各占三分之一。

与百分比不同的是，fr单位会自动处理间距和剩余空间，尤其适合响应式设计。

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

使用repeat()简化重复轨道定义

当需要创建多个等宽或等高的列/行时，手动写多个fr值很繁琐。CSS提供了repeat()函数来简化语法。

基本语法：repeat(数量, 轨道大小)

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情

• grid-template-columns: repeat(3, 1fr); — 创建3列，每列等宽
• grid-template-rows: repeat(2, 100px); — 创建2行，每行高100px
• repeat(auto-fit, minmax(100px, 1fr)) — 自适应列数，每列最小100px，最大1fr

实用等分布局示例

下面是一些常见的等分布局写法：

三等分水平布局：

自适应卡片网格（最小150px，最多等分）：

这种方式能在小屏幕上自动变为单列，大屏幕上显示多列，且始终保持等宽。

等高侧边栏+主内容（两列）：

基本上就这些。fr单位配合repeat()，让Grid等分布局变得直观又灵活。

以上就是如何在CSS中实现Grid等分布局_fractional units与repeat技巧的详细内容，更多请关注php中文网其它相关文章！