答案：CSS Grid 通过 display: grid 创建二维布局，定义 grid-template-columns 和 grid-template-rows 设置行列结构，使用 fr 单位和 repeat() 简化等分布局，配合 gap 设置间距，利用 grid-column 和 grid-row 控制项目跨列跨行，结合 minmax() 与 auto-fit 实现响应式自适应，适用于复杂多行多列页面设计。
使用 CSS Grid 实现多行多列布局非常直观且强大。只需要在容器上启用 Grid 布局，并定义行和列的结构，就能轻松创建复杂的二维布局。
要开启 Grid 布局，先将父元素设置为 display: grid，然后通过 grid-template-columns 和 grid-template-rows 定义列宽和行高。
例如：
.container {
display: grid;
grid-template-columns: 100px 200px 150px; /* 三列，宽度分别为 100px, 200px, 150px */
grid-template-rows: 50px 80px; /* 两行，高度分别为 50px, 80px */
}这样就创建了一个 3 列 2 行的网格，共 6 个单元格，子元素会按顺序自动填入。
对于等分或重复结构，可以用 repeat() 函数和 fr（fraction）单位让代码更简洁。
立即学习“前端免费学习笔记（深入）”；
比如创建一个 3 列等宽、自动换行的布局：.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列，每列占 1 份 */
grid-template-rows: repeat(2, 100px); /* 两行，每行 100px 高 */
gap: 10px; /* 设置行列间距 */
}fr 单位会根据剩余空间自动分配，适合响应式设计。
Grid 允许子元素跨越多行或多列，使用 grid-column 和 grid-row 指定起始和结束线。
示例：让第一个项目横跨两列：
.item:first-child {
grid-column: 1 / 3; /* 从第1线到第3线，即跨2列 */
grid-row: 1 / 2; /* 占据第一行 */
}也可以用 span 关键字简写：
.item:first-child {
grid-column: span 2; /* 向右跨2列 */
}结合 minmax() 和 auto-fit 或 auto-fill，可以让网格自动适应容器宽度。
实现一个自适应卡片布局：.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}浏览器会尽可能放入宽度至少 200px 的列，每列等宽并填满容器，非常适合移动端适配。
基本上就这些。Grid 的核心是容器定义结构，项目自动或手动定位。掌握模板定义、fr 单位、gap 间距和跨行跨列控制，就能灵活实现各种多行多列布局。
以上就是如何通过css Grid实现多行多列布局的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
932
收藏
