grid-column和grid-row用于控制子元素在网格中的行列跨度，支持数字或命名线指定起止位置，可实现复杂灵活的布局结构。
CSS Grid 布局中的
grid-column
和
grid-row
属性，用于控制子元素在网格容器中跨越多列或多行。它们是实现复杂布局的关键工具，使用起来直观且灵活。
grid-column 跨越列
grid-column
决定一个子元素从哪一列开始、到哪一列结束，可以跨越多个列。
语法：
grid-column: 起始线 / 结束线;
也可以简写为
grid-column: 起始线 / span 跨越数量;
例如，让一个元素从第2列开始，跨越2列：
等价于：
立即学习
“
前端免费学习笔记（深入）
”；
grid-row 跨越多行
grid-row
控制元素在行方向上的位置和跨度。
语法与 grid-column 相同：
grid-row: 起始行 / 结束行;
或
grid-row: 起始行 / span 行数;
比如让一个元素从第1行开始，跨3行：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
同时跨行和跨列
可以组合使用两个属性，实现“区域”式布局，比如一个卡片占据2列3行：
这种写法适合仪表盘、相册、表单分组等需要不规则
排列
的场景。
使用 line names 提高可读性
除了数字，还可以在定义网格时命名行，使代码更清晰：
通过命名，布局意图更明确，便于维护。
基本上就这些。掌握 grid-column 和 grid-row 的 span 和 line 引用方式，就能自由控制元素在网格中的位置和大小，构建出高度灵活的页面结构。
.item {
grid-column: 2 / span 2;
}
.item {
grid-column: 2 / 4;
}
.item {
grid-row: 1 / span 3;
}
.card {
grid-column: 2 / span 2;
grid-row: 1 / span 3;
}
.container {
display: grid;
grid-template-columns: [sidebar] 1fr [content] 3fr [end];
grid-template-rows: [header] auto [main] 1fr [footer] auto;
}
.sidebar {
grid-column: sidebar / content;
grid-row: main / footer;
}