如何使用CSS实现多列等分布局_Grid fr单位与repeat实践-css教程-PHP中文网

如何使用CSS实现多列等分布局_Grid fr单位与repeat实践

P粉602998670

发布： 2025-11-23 22:06:06

原创

503人浏览过

使用CSS Grid的fr单位与repeat()函数可高效实现多列等分布局，结合gap和minmax()支持响应式设计，代码简洁且维护方便。

如何使用css实现多列等分布局_grid fr单位与repeat实践

实现多列等分布局是前端开发中常见的需求，尤其是在构建响应式网格系统时。CSS Grid 布局提供了一种现代、简洁的方式，其中 fr 单位 与 repeat() 函数的结合使用，能快速实现等分的列布局，无需计算百分比或处理浮动。

fr（fraction）代表“分数单位”，表示容器中可用空间的一部分。它会根据剩余空间自动分配宽度，非常适合创建等宽或多列自适应布局。

比如，将网格容器设置为三列，每列 1fr，那么每一列都会平均占据容器的三分之一宽度：

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

当需要创建多个等宽列时，手动写多个 1fr 显得冗余。CSS 提供了 repeat() 函数来简化语法。

例如，创建一个四列等分布局：

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

这行代码等价于写四个 1fr，但更简洁且易于维护。如果后续要改为五列，只需修改数字即可。

BeatBot

Splash的AI音乐生成器，AI歌曲制作人！

165

实际项目中，列之间通常需要留出间距。Grid 提供了 gap 属性（或 grid-gap），用于设置行与列之间的间隔。

添加 gap 不会影响 fr 的等分逻辑，Grid 会自动在计算时排除间隙所占的空间：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

此时三列仍保持等宽，中间有 20px 的间隔，布局整洁且响应式良好。

结合媒体查询或 minmax()，可以进一步提升布局的灵活性。例如，在小屏幕上自动变为两列：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

这种方式不依赖固定列数，而是让浏览器根据容器宽度自动调整每列最小宽度为 250px，并尽可能等分剩余空间，适合卡片式布局。

基本上就这些。用好 fr 和 repeat()，再配合 gap 和 minmax()，就能高效实现各种等分布局，代码清晰，维护方便。不复杂但容易忽略细节。

以上就是如何使用CSS实现多列等分布局_Grid fr单位与repeat实践的详细内容，更多请关注php中文网其它相关文章！

大家都在看：