作用在grid容器上的css属性

grid-template-columns和grid-template-rows

这两个属性分别对应的是竖直方向和水平方向的划分,语法：

.gird {
    grid-template-columns: <track-size>... | <line-name> <track-size>...;
    grid-template-rows: <track-size>... | <line-name> <track-size>...;
    
    /* <track-size>：划分区域的尺寸，可以是长度值，百分比值，以及fr单位（网格剩余空间比例单位） */
    /* <line-name> 网格分割线的名称 */
}

• 示例一：在竖直和水平方向上划分三列三行的区域

.grid {
    display: grid;
    grid-template-columns: 80px 80px 80px;
    grid-template-rows: 80px 80px 80px;
}

• 示例二：网格分割线的使用

.grid {
    display: grid;
    grid-template-columns: [columnLine1] 80px [columnLine2] 80px  [columnLine3] 80px [columnLine4] ;
    grid-template-rows: [rowLine1] 80px [rowLine2] 80px  [rowLine3] 80px [rowLine4] ;
}

给grid布局中的网格线命名，是为了更好的对区域进行描述。

• 示例三：repeat语法的使用

.grid {
    display: grid;
    grid-template-columns: repeat(3, 80px);
    grid-template-rows:  repeat(3, 80px);
}

有时候，我们的网格划分区域的大小是很有规律的，可以使用repeat语法简化代码

• 示例四：fr是单词fraction的缩写，表示分数

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:  1fr 1fr 1fr;
    /* 此时是1:1:1,网格宽度等分*/
}

.grid {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows:  1fr 1fr 1fr;
    /* 此时是第一列的宽度是固定的,剩余空间网格宽度等分*/
}

.grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows:  1fr 1fr 1fr;
    /* 此时是第一列的宽度是刚好包裹内容的宽度，剩余空间网格宽度等分*/
}

grid-template-areas

网格区域的命名，语法：

/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b"; /* 一行 两列 */
grid-template-areas:
  "a b b"
  "a c d"; /* 两行 三列 */

/* Global values */
grid-template-areas: inherit; /* 继承 */
grid-template-areas: initial; /* 默认值 */
grid-template-areas: unset; /* 未设置 */

• 示例一

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:  1fr 1fr 1fr;
    grid-template-areas:
                "a a a"
                "b b c"
                "d d d";
                /* 三行 三列 */
                /* 我们的网格区域一定要形成规整的矩形区域，别的形状区域都是不支持的*/
}
/* grid子项只要使用`grid-area`属性指定其隶属于那个区域就可以了*/

.grid-item {
    height: 80px;
    font-size: 40px;
    color: #fff;
}
.a {
    grid-area: a;
    background: red;
}
.b {
    grid-area: b;
    background:green;
}
.c {
    grid-area: c;
    background:skyblue;
}
.d {
    grid-area: d;
    background:yellow;
}  

<div class="grid">
    <div class="grid-item a">A</div>
    <div class="grid-item b">B</div>
    <div class="grid-item c">c</div>
    <div class="grid-item d">d</div>
</div>

grid-template

此属性是：grid-template-rows、grid-template-columns、grid-template-areas三者的缩写

语法：

grid-template: <grid-template-rows> / <grid-template-columns>;

• 示例如下：将上个的示例代码可以调整为下面代码，效果是一样的：

.grid {
    display: grid;
    grid-template:    
        "a a a" 1fr
        "b b c" 1fr
        "d d d" 1fr / 1fr 1fr 1fr;          
}

row-gap和column-gap

字面意思，就是指每块区域之间的间距；

• 示例如下：

.grid {
    display: grid;
    grid-template:    
        "a a a" 1fr
        "b b c" 1fr
        "d d d" 1fr / 1fr 1fr 1fr;   
    column-gap: 20px;
    row-gap: 30px;       
    background: black;
}

grid-gap

grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。

语法：

grid-gap: <grid-row-gap> <grid-column-gap>;

justify-items和align-items

justify-items:网格元素的水平呈现方式， start | end | center下网格水平尺寸收缩为内容大小。

align-items:网格元素的垂直呈现方式

语法如下：

justify-items: stretch | start | end | center;

• 示例如下：

.grid {
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;     
    justify-items:center;
    background: #f1f1f1;
}

place-items

place-items可以让align-items和justify-items属性写在单个声明中。语法如下：

place-items: <align-items> <justify-items>?;

justify-content和align-content

justify-content指定了网格元素的水平分布方式。此属性仅在网格总宽度小于grid容器宽度时候有效果。那么align-content就是垂直方向的分布方式；

语法如下：

justify-content: stretch | start | end | center | space-between | space-around | space-evenly;

align-content: stretch | start | end | center | space-between | space-around | space-evenly;

示例如下：

.grid {
    display: grid;
    width: 300px;
    grid-template: 100px 100px/100px 100px;
    background: black;
}

此时添加justify-content: center；

作用在grid子项的Css属性

grid-column-start, grid-column-end, grid-row-start和grid-row-end

表示grid子项所占据的区域的起始和终止位置，包括水平方向和垂直方向。

语法如下：

grid-column-start: <number> | <name> | span <number> | span <name> | auto
grid-column-end: <number> | <name> | span <number> | span <name> | auto
grid-row-start: <number> | <name> | span <number> | span <name> | auto
grid-row-end: <number> | <name> | span <number> | span <name> | auto

number:起止与第几条网格线。

name :自定义的网格线的名称。

span <number> :表示当前网格会自动跨越指定的网格数量。

span <name>:表示当前网格会自动扩展，直到命中指定的网格线名称。

auto:全自动，包括定位，跨度等。

示例如下：

.grid {
    display: grid;
    width: 400px;
    grid-template-columns: [c1] 100px [c2] 200px [c3] 100px [c4];
    grid-template-rows:[r1] 100px [r2] 200px [r3] 100px [r4];
    background: black;
    justify-content: center;
}
.grid-item {
    height: 80px;
    font-size: 40px;
    color: #fff;
    grid-column-start: c2;
    grid-column-end: c3;
    grid-row-start: r2;
    grid-row-end: r3;
}  

<div class="grid">
    <div class="grid-item a">A</div>
</div>

grid-column和grid-row

grid-column和grid-row都是缩写，分别是[grid-column-start] + [grid-column-end]的缩写，后者是[grid-row-start]+ [grid-row-end]的缩写。

grid-area

grid-area其实是grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end属性的缩写，以及额外支持grid-template-areas设置的网格名称而已。

语法如下：

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

.grid {
    display: grid;
    width: 400px;
    height: 500px;
    grid-template: 1fr 1fr 1fr/1fr 1fr 1fr 1fr;
    background: black;
    justify-content: center;
}
.grid-item {
    font-size: 40px;
    color: #fff;
    grid-area: 1 / 2 / 3 / 4;
}