作为笔记内容，仅整理一些常用的属性。
Grid 网格布局：将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，属于二维布局。
Flex 轴线布局：只能指定"项目"针对轴线的位置，可以看作是一维布局。
网页布局发展阶段：
Table布局=>Float布局、Position布局、Inline-block布局=>Flex布局、Grid布局。
//html中：
<div class="parent">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
</div>
//css中：
.parent{
1000px;
height: auto;
border: 1px solid green;
}
.children{
border: 1px solid red;
color: #FF0000;
}
当这样设置时：
.parent{
1000px;
height: auto;
border: 1px solid green;
display:grid; //新增的
}
就使用了grid网格布局，其中parent就是容器，children就是项目。
项目只能是容器的顶层子元素，不包含项目的子元素，Grid 布局只对项目生效。
注意！设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
全部属性在这：
grid-template-columns
grid-template-rows
grid-template-areas
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
详细介绍请移步大佬链接：https://www.jianshu.com/p/d183265a8dad
参考链接：https://www.cnblogs.com/cythia/p/10894598.html
参考链接：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
参考链接：https://blog.csdn.net/qq_31635733/article/details/81660897