1.盒子
想要给一个内容区使用Grid布局吗？
首先需要给最外层的盒子添加:
display：grid;
1.设置行数及行宽
grid-template-rows: 200px 200px;
给盒子内部设置为两行;每一行都是200px的高;
2.可以列数及列宽
grid-template-cols:100px auto auto;
给盒子内部区域分为3列，第一列是100px，其余两列都是auto,平分剩下来的区域；
* **简写：grid-template：200px 200px / 100px auto auto;
3.设置格子之间的间距
gap:10px 20px;
给格子之间添加10px的宽度间隔,20px的高度间隔；
4. 整个网格在盒子中横向分布位置
justify-content: space-between；
两边的列靠着盒子边缘,剩下间距平分;
5.整个网格在盒子中纵向分布位置
align-content: start；
所有行都在靠近盒子中从上至下排列;
***简写：place-content：space-between start；
6.盒子中每个元素在他所在格子中的横向位置
justify-items: stretch；
格子中的元素如果设置的是auto，则沾满整个盒子的宽度;又设置宽高则显示为设置的宽高;
5.盒子中每个元素在他所在格子中的纵向向位置
align-items: end；
盒子中的元素靠近盒子底部；
***简写：place-items：center；//justify-items==align-items==center;
如果 gap为0，place-content与gap冲突，则以place-content为主；
如果gap为10px 20px；则place-content会在本身设置的排列方式上再加上间距；
2.单个元素
如果想要单个元素不遵守justify-items，或者align-items的设置;
1.盒子中某个元素在他所在格子中的横向位置
justify-self: stretch；
格子中的某个元素如果设置的是auto，则沾满整个盒子的宽度;又设置宽高则显示为设置的宽高;
2.盒子中某个元素在他所在格子中的纵向向位置
align-self: end；
盒子中的某个元素靠近盒子底部；
***简写：place-self：center；//justify-self==align-self==center;
3.设置盒子中某个元素开始的格子位置及所占据的棋格的格数
grid-area: 1 / 2 / span2 / span2 ；
该元素在第一行第二列除，但是该元素占据两行两列；
如果grid-area占据太多，导致元素溢出设置的棋盘中，则会再最下面加一行添加溢出的元素；