Grid布局

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占据太多，导致元素溢出设置的棋盘中，则会再最下面加一行添加溢出的元素；