css-grid布局

一、概述

grid和上一章节的flex布局作为日常工作中常使用的两种布局。它们具有一定的相似性，也有着重大的区别。

其中flex布局只能指定项目针对轴线的位置，可以看作是一维布局，简单来说就是主要针对垂直或者水平方向上的排列。比较适合容器内项目的布局，如果嵌套过深或者布局复杂则不太合适。

grid布局可以看作是二维布局，它可以同时控制列和行方向上的排列，它能够精准控制项目在水平和垂直方向上的位置和大小，比较适合整个页面的布局。

二、概念

1、容器：通常我们设置为display: grid或者display：inline-grid的元素，称为容器

2、项目：容器的子元素，都称为项目，这里的项目只能是容器的亲儿子，不能是下层的子元素。此布局仅对项目生效。

三、容器属性

1、display: 设置为flex或者inline-flex,定义一个flex容器;

2、grid-template-columns,grid-template-rows，grid-template

.fatherBOX {
          display: grid;
          grid-template-columns: 50px 50px 50px;
          grid-template-rows: 50px 50px 50px;
        }

以上代码将父盒子fatherBox设置为grid布局，设置了一个3行3列的网格，项目的行和列都为50px；其中也可以设置为百分比，比如33%；。

1）repeat函数

重复写的话比较麻烦，我们可以使用repeat函数

.fatherBOX {
          display: grid;
          grid-template-columns: repeat(3, 33%);
          grid-template-rows: 50px 50px 50px;
        }

2）auto-fill关键字

有时候我们单元格的大小固定好了，但是容器的大小不是固定的。希望每一行或者每一列尽可能多的单元格，这时候我们可以使用auto-fill关键字表示自动填充。

3）fr

fr可以简单理解为占据整行的比例，以下展示一个1:2:3的一个占比，这里我们也可以给第一个单元格设置固定的像素，然后剩下的去设置fr倍数，会根据它们的比例去分配所占据的位置。

grid-template-columns: 1fr 2fr 3fr;

4）minmax他接受两个参数设置宽度或者高度的最小值和最大值（小，大）

5）auto 自动宽度

6）网格线的名称

grid-template-columns和grid-template-rows中也可以用[]去设置每一条网格线的名称。例如

.fatherBOX {
          display: grid;
          width: 1000px;
          grid-template-columns: [a]100px [b]auto [c]100px;
          grid-template-rows: 50px 50px 50px;
        }

7）grid-template 是grid-template-columns和grid-template-rows和grid-template-areas的简写形式

3、grid-gap,grid-column-gap,grid-row-gap,这个就是用来调整行和列之间的间距的，其中grid-gap是后面2个的简写（行，列）

4、grid-template-areas就是划分区域，简单理解就是给每个格子起个名字，如果哪个区域不需要，就用.表示。

grid-template-areas: 'a, b, c'
                      'd, e, f'
                       'g, h, l';

5、grid-auto-flow

当我们把网格划分好之后，容器的项目会自动放置在每一个网格。

1）row的顺序是先行后列。此处设置了第一个元素占据2个格子

       

2）column就是先列后行，此处设置了第一个元素占据2个格子

3）row dense

4）column dense

6、justify-items，align-items,place-items

这几个就是设置单元格水平和垂直方向上的左中右，也就是格子的起始位置，中间，结束位置。

place-items,就是前面两个的简写  place-items: align-items  justify-items

place-items: start center; 

这个就是设置了水平方向居中，垂直方向起始位置。设置的属性分别为start， center， end，stretch（默认值占满）

7、justify-content, align-content, place-content

这几个是设置整个内容区域在容器里面的水平和锤子位置

place-content: start end; 

以上图是设置垂直start 和水平end的效果，它们可以设置的值分别是start， center， end， stretch， space-around,  space-between， space-evenly。这个最后三个值和flex的同值效果一样，分别是，项目两边间隔相等，项目之间间隔相等，项目以及边框的间隔相等，可以参考上一篇flex的文章效果图，此处不在展示效果图。

8、grid-auto-columns， grid-auto-rows

这个就是我们在设置了grid-template-columns和grid-template-rows后，又设置一些单元格在它们两预设的范围之外，这时候会自动生成预设范围之外的单元格，宽度根据内容自适应宽高，我们可以通过grid-auto-columns，grid-auto-rows去设置预设之外的单元格的宽高

.fatherBOX {
          display: grid;
          width: 500px;
          height: 500px;
          background-color: #eee;
          grid-template-columns: repeat(3, 100px);
          grid-template-rows: repeat(3, 100px);
          grid-auto-flow: row; 
          /* place-items: center center; */
          place-content: center center;
          grid-auto-columns: 50px;
          grid-auto-rows: 50px;               
        }
 .nine {
            grid-column-start: 4;
            grid-row-start: 6;
        }

因为设置了第九个从第四列开始，第6行开始，所以grid自动生成了第4列和第4,5,6行。通过我们设置grid-auto-columns， grid-auto-rows设置宽高50px，所以第九个的宽高都是50px。

此外这里注意，因为出现第四列，那么第四个和第八个会自动排列到第四列，且宽度和设置的第九个项目一样50px。

如果不设置宽高，就根据特殊的这个盒子内容宽高自适应如下图。

四、项目属性

1、grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性，grid-column 属性，grid-row 属性

这几个属性就是指定项目的位置在单元格的什么位置，grid-column-start和grid-column-end设置的是项目列开始和结束的线位置

grid-column-start: 1;
grid-column-end: 3;

这就是从第1个列的线，到第3个列的线结束。grid-row-start和grid-row-end和这个同理一个水平位置，一个是垂直位置。

当然也可以根据上面grid-areas属性设置的单元格的名字取绑定位置。

也可以使用span关键字，表示跨越。我们也可以得到相同的效果,如下代码

grid-column-start: span 2;

grid-column 属性，grid-row 属性。这两个分别就是行列的简写属性，不做多余赘述

grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;

2、grid-area 属性

这个就是用来指定项目放在哪个盒子

 .fatherBOX {
          display: grid;
          width: 300px;
          height: 300px;
          background-color: #eee;
          grid-template-columns: repeat(3, 100px);
          grid-template-rows: repeat(3, 100px);
          /* grid-auto-flow: row;  */
          /* place-content: center center; */
          grid-template-areas: 'a b c'
                                'd e f'
                                'g h k';
        }
.two {
            grid-area: e;
        }

4、justify-self 属性，align-self 属性，place-self 属性

这个就是设置单元格内容水平和锤子的位置，值也就是start， center， end， stretch。

place-self是前面两个的简写。

五、业务代码

1.两列布局

grid-template-columns: 70% 30%

2.十二布局

grid-template-columns: repeat(12, 1fr);