CSS Grid 网格布局教程(4元素属性: grid-column 属性，grid-row 属性)
4.2 grid-column 属性，grid-row 属性grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
.item {
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
}
下面是一个例子。
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
上面代码中，项目item-1占据第一行，从第一根列线到第三根列线。
这两个属性之中，也可以使用span关键字，表示跨越多少个网格。
.item-1 {
background: #b03532;
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
background: #b03532;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
上面代码中，项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。
斜杠以及后面的部分可以省略，默认跨越一个网格。
.item-1 {
grid-column: 1;
grid-row: 1;
}
上面代码中，项目item-1占据左上角第一个网格。
页:
[1]