容器属性 grid-template-*
你想要多少行或者列，就填写相应属性值的个数，不填写，自动分配
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
- repeat()，第一个参数是重复的次数，第二个参数是所要重复的值
grid-template-columns: 100px 100px 100px;
grid-template-columns: repeat(3, 100px);
- auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充
grid-template-columns: repeat(auto-fill, 100px);
- fr，为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）
grid-template-columns: repeat(4, 1fr); //宽度平均分成4份
- minmax()，函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值
grid-template-columns: 1fr minmax(150px, 1fr);
- auto，表示由浏览器自己决定长度
grid-template-columns: 100px auto 100px;
- 网格线，可以用方括号定义网格线名称，方便以后的引用
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
容器属性 grid-row-gap / grid-column-gap
一句话解释就是，item（项目）相互之间的距离
容器属性 grid-template-areas
一个区域由单个或多个单元格组成，由你决定 (具体使用，需要在项目属性里面设置)
容器属性 grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”， 即先填满第一行，再开始放入第二行 （就是子元素的排放顺序）
容器属性 grid-auto-flow 相关
grid-auto-flow: row; grid-auto-flow: row dense
容器属性 justify-items(水平方向) / align-items (垂直方向)
设置单元格内容的水平和垂直的对齐方式
justify-items: start; justify-items: end;
justify-items: start | end | center | stretch;
容器属性 justify-items(水平方向) / align-items (垂直方向)
设置单元格内容的水平和垂直的对齐方式
align-items: start | end | center | stretch;
place-items属性是align-items属性和justify-items属性的合并简写形式 place-items: <align-items> <justify-items>;
容器属性 justify-content (水平方向) / align-content (垂直方向)
设置整个内容区域的水平和垂直的对齐方式 justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly;
容器属性 grid-auto-columns / grid-auto-rows
用来设置多出来的项目宽和高 grid-auto-rows: 50px;
项目属性 grid-column-start / grid-column-end
一句话解释，用来指定item的具体位置, 根据在哪根网格线
项目属性 grid-column / grid-row
grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-rowstart属性和grid-row-end的合并简写形式
项目属性 grid-area
指定项目放在哪一个区域
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并 简写形式，直接指定项目的位置
grid-area: <row-start> / <row-end> /<column-start> / <column-end> ;
项目属性 justify-self / align-self / place-self
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致， 但只作用于单个项目 (水平方向)
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致， 也是只作用于单个项目 (垂直方向)
justify-self: center; justify-self: start | end | center | stretch;
