使用CSS Grid可灵活实现多行多列布局，首先通过display: grid定义容器，并用grid-template-columns和grid-template-rows设置行列结构，配合gap设定间距；接着利用grid-column和grid-row让元素跨越多个轨道，或使用span指定跨度；复杂布局推荐grid-template-areas命名区域，提升可读性；响应式设计可用repeat(auto-fit/minmax())自动调整列数；合理组合这些属性即可高效构建二维布局。
使用 CSS Grid 实现多行多列组合布局非常灵活，关键在于合理定义网格结构并控制元素跨越的行列范围。下面介绍几种常用方法和技巧，帮助你快速搭建复杂的二维布局。
定义基本网格容器
要开启 Grid 布局，先在父容器上设置 display: grid，然后通过 grid-template-columns 和 grid-template-rows 定义列宽和行高。
例如：.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列，中间列是两边的两倍宽 */
grid-template-rows: 100px 200px; /* 两行，第一行100px，第二行200px */
gap: 10px; /* 行列间距 */
}让元素跨越多行或多列
利用 grid-column 和 grid-row 属性，可以让子元素跨越多个网格轨道。
- grid-column: 1 / 3; 表示从第1列开始，跨到第3列前（即占两列）
- grid-row: 1 / 3; 表示占据前两行
- 也可以用 span 关键字，如 grid-column: 2 / span 2; 表示从第2列开始，向右跨2列
示例：一个主内容区占两列，侧边栏占一行一列
立即学习“前端免费学习笔记（深入）”；
.main {
grid-column: 1 / 3;
grid-row: 1;
}
.sidebar {
grid-column: 3;
grid-row: 1 / 3;
}
使用 grid-area 简化布局
如果结构复杂，可以结合 grid-template-areas 用命名区域直观定义布局。
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
这种方式可读性强，适合整体页面或模块化组件布局。
自动填充与响应式网格
使用 repeat() 配合 auto-fit 或 auto-fill 可创建响应式多列布局。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}浏览器会自动计算每行最多容纳多少个最小200px的列，并均分剩余空间，适合卡片类布局。
基本上就这些。掌握 grid-template、grid-column/row 和 grid-area 的配合使用，就能轻松实现各种多行多列组合效果，无需依赖浮动或定位。关键是先规划好结构再分配区域。不复杂但容易忽略细节对齐。
