grid布局

简单概念：

采用网格布局的区域，称为"容器"（container）。

容器内部采用网格定位的子元素，称为"项目"（item）。

注意：项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。

添加在容器（父元素）上的属性

1、display： grid；

                     inline-grid；指定一个容器采用网格布局

2、grid-template-columns属性 设置每列的列宽

     grid-template-columns: 100px 100px 100px;

                                          repeat(3, 33.33%);

                                          repeat(3, 100px);

                                          repeat()接受两个参数，重复的次数，重复的值。

grid-template-columns: 1fr 1fr; fr关键字（fraction 的缩写，意为"片段"）

               （等分）

3、grid-template-rows属性 定义每一行的行高

4、grid-gap属性

是grid-column-gap和grid-row-gap的合并简写，设置行和列间距

5、place-items：是align-items属性和justify-items属性的合并简写形式

设置单元格内容在垂直/水平的对齐方式。

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

6、place-content：是align-content属性和justify-content属性的合并简写形式

设置整个内容区域在容器里面的垂直/水平位置。

align-items/justify-items: start | end | center | stretch |

                                        space-around |

                                        space-between |

                                         space-evenly;

7、grid-template-areas: 网格布局允许指定"区域"（area）

                                        "a b c"

                                        "d e f"

                                        "g h i";

Grid项目属性(添加在子级元素上的)

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

                        grid-area:a1;

                                或

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

2、place-self： 设置项目自己的对齐方式

                        place-self是align-self/justify-self的简写

                        place-self：start | end | center | stretch；