使用 grid-template-columns 配合 repeat() 和 fr 单位可实现等宽列布局，如 repeat(3, 1fr) 创建三等分列；通过 minmax() 与 auto-fit 可实现响应式自适应，如 repeat(auto-fit, minmax(200px, 1fr)) 保证最小宽度并自动调整列数；结合 gap 属性可安全添加间距而不破坏等分结构，适用于卡片、表单等场景。
要使用 CSS Grid 实现等宽列排列，核心是利用 grid-template-columns 属性配合重复函数和等分单位。这种方式简洁、灵活，适用于各种栅格布局场景。
最常用的方法是结合 repeat() 函数与 fr（fraction）单位来定义等宽列。
例如，创建 3 列等宽布局：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}这表示容器被分为 3 列，每列占据相等的可用空间。
如果你明确知道需要多少列，可以直接指定数量。
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: repeat(4, 1fr);
grid-template-columns: 1fr 1fr; 或 repeat(2, 1fr)
所有列将自动平均分配容器宽度，无论内容多少。
结合 minmax() 可实现更智能的响应式等宽列，避免换行或溢出。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}含义：
屏幕变窄时列数自动减少，始终保持等宽且不换行。
使用 gap 属性设置列之间的间距，不会破坏等宽结构。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}列宽会自动扣除间距部分，仍保持视觉上的等分效果。
基本上就这些。用 repeat(n, 1fr) 最简单直接，搭配 minmax() 和 auto-fit 能实现响应式等宽布局，适合卡片、表单、图片墙等场景。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
911
收藏
