96_css笔记12_css的网格流布局（grid布局）

参考文章链接：https://juejin.im/post/599970f4518825243a78b9d5

MDN的网格布局参考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids

一，网格布局基本概念

1，网格线(Grid Lines)

网格线组成了网格，他是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。

 

 

2，网格轨道(Grid Track)

网格轨道是就是相邻两条网格线之间的空间，就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小，用来控制宽度或高度。

 

 

 

 

3，网格单元格(Grid Cell)

网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。

 

 

 

4，网格区域(Grid Area)

网格区域是由任意四条网格线组成的空间，所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。

 

 

 

二，网格布局

1. 通过display属性设置属性值为 grid 或 inline-grid 或者是 subgrid

2.      .grid-container{
               padding: 20px;
               display: grid;
               grid-template-rows: 50px 100px 60px 80px;
               grid-template-columns: 50px 40px 100px 80px;
               background: pink;
           }
           .item{
               border: 2px solid palegoldenrod;
               color: #fff;
           }
   

3. 是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。fr 是基于网格容器可用空间来计算的（flex 也是一样）
4. 行或列最小和最大尺寸

1. minmax() 函数来创建行或列的最小或最大尺寸，第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值

2. 示例：grid-template-rows: minmax(100px,200px)

5，重复行或者列

1. repeat() 属性可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。

2. repeat() 也接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸

3. 示例：grid-template-columns: repeat(2,100px);

6，间距

1. grid-column-gap：创建列与列之间的距离。

2. grid-row-gap：行与行之间的距离。

3. 示例：grid-column-gap: 50px; grid-row-gap: 15px;