网页二维布局方案Grid布局介绍一

四、项目属性

下面这些属性定义在项目上面。

4.1 grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

grid-column-start属性：左边框所在的垂直网格线

grid-column-end属性：右边框所在的垂直网格线

grid-row-start属性：上边框所在的水平网格线

grid-row-end属性：下边框所在的水平网格线

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

上面代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。读者可以把这个属性的值分别改成column、row dense和column dense，看看其他项目的位置发生了怎样的变化。

下面的例子是指定四个边框位置的效果。

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

这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。

1. .item-1 { grid-column-start: header-start; grid-column-end: header-end; }

上面代码中，左边框和右边框的位置，都指定为网格线的名字。

这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

1. .item-1 { grid-column-start: span 2; }

上面代码表示，1号项目的左边框距离右边框跨越2个网格。

这与下面的代码效果完全一样。

1. .item-1 { grid-column-end: span 2; }

使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

4.2 grid-column 属性，grid-row 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

1. .item { grid-column: / ; grid-row: / ; }

下面是一个例子。

1. .item-1 { grid-column: 1 / 3; grid-row: 1 / 2; }
2. /* 等同于 */
3. .item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; }

上面代码中，项目item-1占据第一行，从第一根列线到第三根列线。

这两个属性之中，也可以使用span关键字，表示跨越多少个网格。

1. .item-1 { background: #b03532; grid-column: 1 / 3; grid-row: 1 / 3; }
2. /* 等同于 */
3. .item-1 { background: #b03532; grid-column: 1 / span 2; grid-row: 1 / span 2; }

上面代码中，项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。

斜杠以及后面的部分可以省略，默认跨越一个网格。

1. .item-1 { grid-column: 1; grid-row: 1; }

上面代码中，项目item-1占据左上角第一个网格。

4.3 grid-area 属性

grid-area属性指定项目放在哪一个区域。

1. .item-1 { grid-area: e; }

上面代码中，1号项目位于e区域，效果如下图。

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

1. .item { grid-area: / / / ; }

下面是一个例子。

1. .item-1 { grid-area: 1 / 1 / 3 / 3; }

4.4 justify-self 属性，align-self 属性，place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

1. .item { justify-self: start | end | center | stretch; align-self: start | end | center | stretch; }

这两个属性都可以取下面四个值。

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）。

下面是justify-self: start的例子。

1. .item-1 { justify-self: start; }

place-self属性是align-self属性和justify-self属性的合并简写形式。

1. place-self: <align-self> <justify-self>;

下面是一个例子。

1. place-self: center center;

如果省略第二个值，place-self属性会认为这两个值相等。