CSS 网格布局(grid)-线的定位(二)

• 在上文中，我们简单的说了一下使用线编号来排列元素，本文将深入这个基础特性

使用线编号定位元素

.box1 {
    grid-column-start: 1;
    grid-column-end: 3;
}

• 还记得这个例子吗? 我们通过线的编号实现跨轨道放置网格元素

简写

属性简写

• 这个例子相对比较简单, 如果是复杂的例子可能要设置好多属性了, 其实我们可以使用简写
• 这个例子的简写是这样的

grid-column: 1 / 3;

默认跨度

• 如果一个元素只延伸一个轨道的话, 可以省略 grid-column-end 和 grid-row-end

grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;

• 假如有上面的一个示例, 我们可以写成一面的方式

grid-column-start: 2;
grid-row-start: 1;
/* or */
grid-column: 2;
grid-row: 1;

grid-area 属性

• 简写更进一步, 给每个元素只定义一个属性 grid-area, 值的顺序如下
  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end
• 是不是感觉和margin类似呢? 但是又不太一样, 这个是逆时针一圈

反方向计数

• 还记得这张图吗? 为什么还有负值, 是的他也是支持负数的
• 使元素跨越整个网格, 可以使用下面的方式

grid-column: 1 / -1;

使用 span 关键字

• 还可以使用”起始线与跨越轨道数量“的定位方法

grid-column-start: 1;
grid-column-end: span 2;

小结

• 本文主要讲了一下怎样实现跨轨道放置元素(类似表格的合并单元格), 和他的简写方式
• 通过 grid-column(row)-start 和 grid-column(row)-end 设置元素的边线, 即可达到"合并单元格"的效果
• 支持使用负数, -1 表示最后一条线
• 如果只延伸一个轨道. 即xx-start: 3; xx-end: 4时, 可以省略 xx-end
• span 可以表示轨道数量, xx-start: 3; xx-end: span 2 等价于 xx-start: 3; xx-end: 5
• grid-column 或 grid-row 可以直接设置 start end (例: grid-column: 3 / 4)
• grid-area: 1 1 2 2, 按顺序: grid-row-start grid-column-start grid-row-end grid-column-end

相关文档

• CSS 网格布局(grid)-基本概念(一)

参考文档

developer.mozilla.org/zh-CN/docs/…