使用 display: grid 与 grid-template-columns 结合 repeat() 和 fr 单位可快速创建等宽网格，如 repeat(3, 1fr) 生成三等分列，支持响应式与自动布局，优于传统浮动方法。
要快速创建等宽网格布局，CSS Grid 提供了非常简洁高效的方法。核心是使用 display: grid 和 grid-template-columns 属性。
通过将容器设置为网格布局，并定义每列的宽度，即可实现等宽列。最常用的方式是结合 repeat() 函数和 fr 单位。
例如：
repeat(3, 1fr) 表示创建 3 列，每列平均分配可用空间。fr 单位代表“自由空间比例”，确保各列等宽且自适应。示例代码：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px; /* 可选：设置列间间距 */
}
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div>
你可以根据需要更改 repeat() 中的第一个参数来控制列的数量。
repeat(4, 1fr) 创建 4 等宽列。响应式示例：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
这种方式会自动换行并调整列数，适合移动端适配。
相比浮动或 inline-block 布局，Grid 更加直观和强大。
align-items 和 justify-items 轻松控制。基本上就这些，用 display: grid 配合 grid-template-columns 能在几行代码内完成等宽网格，简单又高效。
以上就是css如何快速创建等宽网格布局_使用display:grid和grid-template-columns实现的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
828
收藏
