使用grid-column、grid-row和grid-area可实现CSS Grid中元素的跨行跨列布局，通过网格线编号或span定义跨度，结合grid-template-areas命名区域能提升布局可读性与维护性。
在CSS Grid布局中，让子元素跨越多个行或列是常见需求。通过 grid-area 和相关属性，可以灵活控制元素在网格中的位置和跨度。掌握这些技巧，能轻松实现复杂的跨区域布局。
使用 grid-column 和 grid-row 控制跨度
最直接的方式是分别设置元素跨越的列和行范围。
• grid-column: start / end 定义元素从哪一列开始，到哪一列结束（结束线不包含）• grid-row: start / end 控制行方向的跨度
• 使用 span 关键字可指定跨越几个轨道
例如：
.item {
grid-column: 2 / 5; /* 从第2条竖线到第5条 */
grid-row: 1 / 3; /* 跨越两行 */
}
/* 或使用 span */
.item {
grid-column: 2 / span 3; /* 从第2列开始，占3列 */
grid-row: 1 / span 2;
}
用 grid-area 一行定义所有边界
当需要同时设置行列起止时，grid-area 提供更简洁的写法。
立即学习“前端免费学习笔记（深入）”；
• 格式为：row-start / column-start / row-end / column-end• 适用于需要精确定位的复杂布局组件
示例：
.sidebar {
grid-area: 1 / 1 / 4 / 2; /* 行1到4，列1到2 */
}
.main-content {
grid-area: 1 / 2 / 3 / 4; /* 占据右上大块 */
}
通过命名区域简化布局结构
结合 grid-template-areas 可视化定义整体结构，提升可读性。
• 在容器中用字符串定义区域名称• 子元素使用 grid-area: name 关联对应区域
• 点（.）表示空白单元格
例子：
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }
这种方法特别适合页面级布局，结构清晰，易于维护。
基本上就这些。合理运用 grid-column、grid-row 和 grid-area，配合命名区域，就能高效实现各种跨区域布局效果。关键在于理解网格线编号与跨度的关系，以及如何用命名提升代码可读性。
