CSS3 grid layout（网格布局）（八）

让我们接着来看网格布局

基于线的定位

在之前的博文中，我介绍了如何使用线编号来排列元素，本篇博文则会全面探索这个基础特性如何工作。

当我们使用网格布局创建网格轨道的时候，网格线也会被同时创建。每条网格线都有对应的编号，而且编号的规则则是根据书写方向来决定的，例如像英语这种从左至右书写的语言中，列线1将位于网格的左侧。而在从右到左的语言中，列线1行将位于网格的右侧。之后我们会深入探讨书写模式和网格间的交互。

基础例子

在下面这个非常简单的例子中，我使用了3行3列的布局，也就是说，在从上至下，从左至右这两个大方向上，将各存在4条网格线。

网格容器中有4个子元素。如果我们不定义它们的位置，它们便会按照自动定位规则布局。代码及效果如下

.wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
        }

<div class="wrapper">
	<div class="box1">One</div>
	<div class="box2">Two</div>
	<div class="box3">Three</div>
	<div class="box4">Four</div>
</div>

使用线编号定位元素

我们可以使用线编号来控制元素在网格上的位置。仍以上面的布局结构为例，当我想让第一个元素从网格的最左边开始，占一个列轨道。在行轨道的占用上，则从行线1开始，延伸至行线4。那么我们写在class名为“box1”的css代码就应当如下：

.box1 {
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 4;
}

当你采取上面的方法为一些元素定位之后，剩下的元素会继续按照自动定位规则定位。
下面我将以同样的方法为剩下的三个网格元素进行定位。代码及效果如下

<div class="wrapper">
	<div class="box1">One</div>
	<div class="box2">Two</div>
	<div class="box3">Three</div>
	<div class="box4">Four</div>
</div>

.box1 {
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 4;
   background-color: green;
}
.box2 {
   grid-column-start: 3;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   background-color: red;
}
.box3 {
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 2;
   background-color: blue;
}
.box4 {
   grid-column-start: 2;
   grid-column-end: 4;
   grid-row-start: 3;
   grid-row-end: 4;
   background-color: yellow;
}

网格布局的一个优势是：无需给元素周围加上margin来阻止文档流自动填补空白，就能实现设计中的留白区域。

grid-column 和 grid-row 缩写

在网格布局中，grid-column-start 和 grid-column-end 属性可以合并为 grid-column，grid-row-start 和 grid-row-end 则合并为 grid-row。

让我们以缩写的方式对上面的CSS代码进行一下优化（背景色部分省略）：

.box1 {
   grid-column: 1 / 2;
   grid-row: 1 / 4;
}
.box2 {
   grid-column: 3 / 4;
   grid-row: 1 / 3;
}
.box3 {
   grid-column: 2 / 3;
   grid-row: 1 /  2;
}
.box4 {
   grid-column: 2 / 4;
   grid-row: 3 / 4;
}

元素的默认跨度

在上面的例子中，我指定了每个结束行线和列线，但实际上如果一个元素只延伸一个轨道的话，你可以省略 grid-column-end 或 grid-row-end 值。元素默认延伸一个轨道。所以在最开始的例子中，我们的CSS代码可以改写为这样：

.box1 {
   grid-column-start: 1;
   grid-row-start: 1;
   grid-row-end: 4;
}
.box2 {
   grid-column-start: 3;
   grid-row-start: 1;
   grid-row-end: 3;
}
.box3 {
   grid-column-start: 2;
   grid-row-start: 1;
}
.box4 {
   grid-column-start: 2;
   grid-column-end: 4;
   grid-row-start: 3;
}

在使用 grid-column 和 grid-row 缩写时，对于那些只跨越了一个轨道的元素，则可以省略“/”和第二个值。所以我们的代码则可以改写为这样：

.box1 {
   grid-column: 1 ;
   grid-row: 1 / 4;
}
.box2 {
   grid-column: 3 ;
   grid-row: 1 / 3;
}
.box3 {
   grid-column: 2 ;
   grid-row: 1 ;
}
.box4 {
   grid-column: 2 / 4;
   grid-row: 3 ;
}

grid-area属性

我们还可以使用 grid-area 属性 让上面例子中的代码更加简单：每个元素只定义一个属性 grid-area。值的顺序如下

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

对应代码如下：

.box1 {
   grid-area: 1 / 1 / 4 / 2;
}
.box2 {
   grid-area: 1 / 3 / 3 / 4;
}
.box3 {
   grid-area: 1 / 2 / 2 / 3;
}
.box4 {
   grid-area: 3 / 2 / 4 / 4;
}

反方向计数

我们也可以从行和块的结束线开始反方向计数，对于英语来说就是右端的列线和底端的行线。这些线会被记为 -1，然后你可以从这儿往前数，所以倒数第2条线会被记为 -2。要注意的是最后一条线是指显式定义网格的最后一条线，即由 grid-template-columns 和 grid-template-rows 定义的网格，并不把隐式定义网格的加入的行和列纳入考虑。

下面我将从右侧和低端开始布局，并把之前的例子翻转
代码及效果如下

.wrapper {
  	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
}
        
.box1 {
    grid-column-start: -1;
    grid-column-end: -2;
    grid-row-start: -1;
    grid-row-end: -4;
    background-color: green;
}

.box2 {
    grid-column-start: -3;
    grid-column-end: -4;
    grid-row-start: -1;
    grid-row-end: -3;
    background-color: red;
}

.box3 {
    grid-column-start: -2;
    grid-column-end: -3;
    grid-row-start: -1;
    grid-row-end: -2;
    background-color: blue;
}

.box4 {
    grid-column-start: -2;
    grid-column-end: -4;
    grid-row-start: -3;
    grid-row-end: -4;
    background-color: yellow;
}

使用span关键字

除了”起始线与结束线“的定位方法，你还可以使用”起始线与跨越轨道数量“的定位方法，写法如下

// 起始线/span跨越轨道数量
grid-row: 1 / span 3;

之前的代码可做如下更改

.box1 {
   grid-column: 1;
   grid-row: 1 / span 3;
} 
.box2 {
   grid-column: 3;
   grid-row: 1 / span 2;
}
.box3 {
   grid-column: 2;
   grid-row: 1;
}
.box4 {
   grid-column: 2 / span 2;
   grid-row: 3;
}

或者“结束线与跨越轨道数量”，写法如下

// span跨越轨道数量/结束线
grid-row: span跨越轨道数量 / 4;

示例：

.box1 {
   grid-column: 1;
   grid-row: span 2 / 4;
   background-color: green;
}