Grid网格布局

1.Grid网格布局---基本概念

　　Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。

　　采用网格布局的区域，成为 “容器”，容器内部采用网格定位的子元素，成为“项目”容器里面的水平区域称为 行（row），垂直区域称为 列（column）行和列的交叉区域，称为“单元格”（cell），正常情况下，n行和m列会产生n X m个单元格，如3行3列会产生9个单元格

　　划分网格的线，成为“网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。正常情况下，n 行有n+1根水平网格线，m列有m+1根垂直网格线，如三行就有4根水平网格线

　　设为网格布局以后，容器子元素（项目）的float、display:inline-block、display：table-cell、vertical-align和column-*等设置都将失效

2.Grid网格布局---容器属性

　　（1）display

　　　　display：grid；

　　　　display：inline-grid；

　　（2）grid-template-columns和grid-template-rows属性

　　　　grid-template-columns：该属性定义了每一列的列宽

　　　　grid-template-rows： 该属性定义了每一行的行高

　　　　如：

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

　　　　上面的代码：定义了一个三行三列的网格，行高和列宽都是50px 

　　　　除了使用绝对单位，还可以使用百分比，如：

 .container{
                display: grid;
                grid-template-columns: 33.3% 33.3%33.3%;
                grid-template-rows: 33.3% 33.3%33.3%;
            }

　　　　　repeat() 方法

　　　　　　有时候重写同样的值非常麻烦，尤其网格很多时。这是可以使用repeat()函数，简化重复的值。repeat()接收两个参数，第一个参数是重复的次数，第二个参数是所要重复的值，如：

.container{
                display: grid;
                grid-template-columns: repeat(3,33.3%);
                grid-template-rows: repeat(3,33.3%);
            }

　　　　　　auto-fill 关键字　　　　

　　　　　　　有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。如：

.container {
                 display: grid;
                 grid-template-columns: repeat(auto-fill, 100px);
            }       　　　　

　　　　　　上面的代码是每列宽度100px，然后自动填充，直到容器不能放置更多的列

　　　　fr关键字

　　　　　　为了方便表示比列关系，网格布局提供了fr关键字（fraction的缩写，意为“片段”）。如果两列的宽度分别为1fr和1fr,就表示后者是前者的两倍

.container {
                 display: grid;
                 grid-template-columns:1fr 1fr ;
            }       　　　　　

　　　　　　fr还可以与绝对长度的单位结合使用，这是会非常方便。如：

 .container {
                display: grid;
                grid-template-columns: 150px 1fr 2fr;
            }

　　　　　　上面的代码表示，第一列的宽度为150px 第二列的宽度是第三列的一半

　　　　minmax()　　　

　　　　　　该函数产生一个长度范围，表示长度在这个范围之中。它接受两个参数，分别为最小值和最大值

grid-template-columns:1fr 1fr minman(100px,1fr)　　

　　　　　　上面代码中，minman(100px,1fr)表示列宽不小于100px,不大于1fr

　　　　auto关键字

　　　　　 auto关键字表示由浏览器自己决定长度

 grid-template-columns:100px auto 100px

　　　　　上面的代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

　　(3)网格线名称　　

　　　　　　grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用

 .container {
                        display: grid;
                        grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
                        grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
                    }

　　(4)row-gap、column-gap和gap属性

　　　　　　row-gap 属性设置行与行的间距（行间距）

　　　　　　column-gap属性设置列与列的间距（列间距）

　　　　　　gap 属性是上面两个属性的合并简写模式

　　　　　　grid-gap：<grid-row-gap> <grid-column-gap>

　　(5)grid-template-areas属性

　　　　　　网格布局允许指定区域（area），一个区域由单个或多个单元格组成。该属性用于定义区域

 .container {
                display: grid;
                grid-template-columns: 100px 100px 100px;
                grid-template-rows: 100px 100px 100px;
                grid-template-areas: 'a b c'
                                      'd e f'
                                     'g h i';
            }

　　　　　　如果某些区域不需要利用，则使用“点”（.）表示

　　(6)grid-auto-flow 属性　　

　　　　　　划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，即先填满第一行，再开始放入第二行。这个顺序有grid-auto-flow属性决定，默认值是row，也可以设成column,还可以设成row dense 和 column dense

　　(7)justify-items、align-items和place-items 属性

　　　　　　justify-items 属性设置单元格内容的水平位置，取值有如下4个:

　　　　　　　　start：对齐单元格的起始边缘

　　　　　　　　end：对齐单元格的结束边缘

　　　　　　　　center：单元格内部居中

　　　　　　　　stretch：拉伸，占满单元格的整个宽度（默认值）

　　　　　　align-items属性设置单元格内容的垂直位置，取值与justify-items相同

　　　　　　place-items属性是align-items和justify-items属性的合并简写形式，place-items：<align-items><justify-items>

　　(8)justify-content、align-content和place-content属性

　　　　　　justify-content属性是整个内容区域在容器里面的水平位置，取值有如下7个：

　　　　　　　　start：对齐容器的起始边框

　　　　　　　　end： 对齐容器的结束边框

　　　　　　　　center： 容器内部居中

　　　　　　　　stretch： 项目大小没有指定时，拉伸占据整个网格容器

　　　　　　　　space-around：每个项目两侧的间隔相等，所以，项目之间的间隔比项目与容器边框的间隔大一倍

　　　　　　　　space-between： 项目与项目的间隔相等，项目与容器边框之间没有间隔

　　　　　　　　space-evenly： 项目与项目的间隔相等，项目与容器之间也是同样长度间隔

　　　　　　align-items属性是整个内容区域的垂直位置，取值跟justify-content相同

　　　　　　place-content属性是align-content属性和justify-content属性的合并简写形式 place-content：<align-content><justify-content>

3.项目属性

　　(1)grid-column-start、grid-column-end、grid-row-start、grid-row-end

　　　　　　grid-column-start属性：左边框所在的垂直网格线

　　　　　　grid-column-end属性：右边框所在的垂直网格线

　　　　　　grid-row-start属性：上边框所在的水平网格线

　　　　　　grid-row-end属性：下边框所在的水平网格线

　　(2)grid-column和grid-row属性

　　　　　　grid-column属性是grid-column-start和grid-column-end的合并简写形式

　　　　　　grid-row属性是grid-row-start和grid-row-end的合并简写形式

　　(3)grid-area属性

　　　　　　grid-area属性指定项目放在哪个一个区域

　　(4)justify-self、align-self和place-self属性

　　　　　　justify-self属性设置单元格内容的水平位置，跟justify-items属性的用法完全一致，但只作用于单个项目。有如下4个值：

　　　　　　　　start：对齐单元格的起始边缘

　　　　　　　　end：对齐单元格的结束边缘

　　　　　　　　center：单元格内部居中

　　　　　　　　stretch：拉伸，占满单元格的整个宽度（默认值）

　　　　　　align-self属性设置单元格内容的垂直位置，跟align属性的用法完全一致，也是只作用于单个项目。取值跟justify-self完全一致

　　　　　　place-self属性是align-self属性和justify-self属性的合并简写形式，place-self：<align-self><justify-self>

参考自阮一峰老师的文章  》》》http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html