CSS Grid 通过 display: grid 和 grid-template-columns 实现多列布局。可使用 1fr 单位等分宽度，如三列布局设为 1fr 1fr 1fr；支持混合单位，如 200px 1fr 2fr 实现固定与弹性结合；利用 repeat(4, 1fr) 简化四等列定义；结合 auto-fit 与 minmax(200px, 1fr) 实现响应式自动填充；通过 grid-column: span 2 让子元素跨列；需注意设置 gap 间距及容器 display 属性。
CSS Grid 布局非常适合实现多列排布，只需简单设置容器的 display: grid 和列的定义即可。下面介绍几种常用方式来实现多列布局。
通过 grid-template-columns 属性可以明确指定每列的宽度。比如创建一个三列等宽布局：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列均分容器宽度 */
gap: 10px; /* 列与行之间的间距 */
}
你也可以混合使用不同单位，例如固定宽度和弹性单位：
.container {
display: grid;
grid-template-columns: 200px 1fr 2fr; /* 第一列固定，后两列按比例分配剩余空间 */
}
当需要多个相同宽度的列时，可以用 repeat() 函数让代码更简洁：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 创建4个等宽列 */
gap: 16px;
}
还可以结合 minmax() 实现响应式列宽：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
这表示：自动填充列，每列最小 200px，最大为 1fr，适合响应式多列布局。
如果某个子元素需要跨越多列，使用 grid-column：
.full-width-item {
grid-column: span 2; /* 跨越两列 */
}
基本上就这些。用 grid 实现多列排布灵活又直观，配合 gap 和响应式函数能适应各种设计需求。不复杂但容易忽略细节，比如容器必须有明确的 display 设置。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
330
收藏
