CSSGrid布局实用技巧分享

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《CSS Grid等分布局技巧分享》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

使用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(数量, 轨道大小)

• 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等分布局变得直观又灵活。

到这里，我们也就讲完了《CSSGrid布局实用技巧分享》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！