CSS—Grid布局之项目属性

目录

一、概述

二、详解

---

一、概述

Grid布局的属性分为两类，一类定义在容器上面，称为容器属性，一类定义在项目上面，称为项目属性。

二、详解

grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性

定义

项目的位置是可以单独指定的，具体方法就是指定项目的四个边框，表示分别定位在哪根网格线。注意，使用这四个属性，如果产生了重叠，可以使用z-index属性指定项目的重叠顺序。

(1) grid-column-start: 左边框所在的垂直网格线
(2) grid-column-end:   右边框所在的垂直网格线
(3) grid-row-start:    上边框所在的水平网格线
(4) grid-row-end:      下边框所在的水平网格线

实例1

如下代码所示，表示项目1的左边框为第二根垂直网格线，右边框为第四根垂直网格线。

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

                                                       

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

                                                       

实例2

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

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

实例3

这四个属性还可以使用span关键字，表示跨域，即边框之间跨域多少个网格。

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

                                                       

grid-column属性、grid-row属性

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

.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;
}

这两个属性也可以使用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 {
    grid-column: 1;
    grid-row: 1;
}

grid-area属性

实例1

该属性指定项目放在哪一个区域，属性值为区域名。

#container {
    display: grid;
    grid-template-areas: 'a b c' 'd e f' 'g h i';
}

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

                                                       

实例2

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

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

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

justify-self属性、align-self属性、place-self属性

justify-self属性用于设置单元格内容的水平位置。align-self属性用于设置的单元格内容的垂直位置。

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

(1) start:    对齐单元格的起始边缘
(2) end:      对齐单元格的结束边缘
(3) center:   单元格内部居中
(4) stretch:  拉伸,占满单元格的整个宽度,默认值

place-self属性是justify-self属性和align-self属性的合并简写形式。注意，如果省略第二个值，则默认第二个值等于第一个值。

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