Grid布局

        虽说刚开始学的就是flex布局，但学了grid布局后，感觉这个布局真的高级。

        首先grid布局是网格式布局，特别适合用在一堆整齐排列的元素中，比如商城中的一些商品列表之类的，虽说flex布局也能很好地完成这项工作，但是grid布局使用起来将会更加规整。

        grid布局分为两个作用域，一个是给大盒子，父类的，另一个是给大盒子中的元素，子类的；大盒子中在display：grid后，最常用的两个方法就是

grid-template-rows指定每行的高度 ，grid-template-columns指定每列的宽度
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

这个用法就相当于给大盒子每几行，几列设置固定行高，列宽，就相当于把一个大盒子切成了几个小盒子，行列中写了几个px就是横竖切了几刀，但如果有很多一样的这样写有些麻烦，可以用repeat方法

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);//括号中第一个数是重复几次
}

另外还有特殊的单位fr，auto-fill 关键字等等挺多的就不在赘述了。

        小盒子中，有个特别高效的方法，当整齐排列的小盒子内有一两个元素比较大要占两个正常盒子的大小的情况可以这么解决

grid-column 属性，grid-row 属性

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

举个栗子（画图水平不太好啊）

 图片中代码应该是

.item {
  grid-column: 1/ 2;
  grid-row: 1 / 2;
}

在写一些对齐的但大小不同的图片时这样写很好用喔。

总之grid布局功能更强大，但有些方面也可以光简单使用flex布局也可以很好完成。