网格布局知识点总结

网格布局grid

它与传统的布局方案，包括前面介绍的 Flex 布局方案相比的特性在于：

• 它是第一个真正意义上的布局系统，其主要表现在它是第一个基于二维方向的布局模块

• 它是第一个基于网格（或者叫栅格，本文叫网格）的原生布局系统

---

网格容器(container)上可以设置的属性有

1. display: grid || inline-grid || subgrid

   和 Flex 类似，Grid 的使用同样简单，第一步，我们需要把某个容器指定成网格容器：

   .grid {
       display: grid || inline-grid;
   }

    

   这个时候，.grid 就变成了一个 网格容器（Grid Conatainer），包含在这个容器中的子元素则自动变成了 网格项(Grid Items)， Grid 的所有属性都在两个概念之间展开。

2. grid-template-columns 和 grid-template-rows

   设置行的个数和高度，列的个数和宽度

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

    

   
   repeat(个数，值) 重复方法

   grid-template-columns: 200px 1fr repeat(3, 100px);
   ​
   .grid {
       display: grid; 
       grid-template-columns: 1fr  auto; auto表示自动分配 
       grid-template-rows: 1fr 1fr 1fr;
     
   }
   .grid {
       display: grid; 
       grid-template-columns: 100px 100px 100px;
       grid-template-rows: 1fr 1fr 1fr;
   ​
   }
   ​
   .grid {
       display: grid; 
       grid-template-columns: 100px minmax(200px,auto);
       grid-template-rows: 1fr 1fr 1fr;
     
   }

    

   
   minmax(min,max)最大最小值区间​
   ​
   

   .grid {
       display: grid; 
       grid-template-columns: 33.33% 33.33% 33.33%;
       grid-template-rows: 1fr 1fr 1fr;
      
   }
   ​

    

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

   .container {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
       
     // grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
   }
   ​

    

   grid-template-columns 和 grid-template-rows 分别表示水平方向上和垂直方向上网格项的空间分配比例，fr 是一个新单位，表示占据可用空间的一等分。所以上面的代码表示，在水平和垂直方向分别把可用空间分为三份，且三份占据空间相等

3. grid-auto-columns 和 grid-auto-rows

   有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

   它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。(指定超出网格外部的元素大小)

    

4. grid-auto-flow划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

5. grid-auto-flow: column/row/row-dense/column-dense;

    

6. grid-column-gap 和 grid-row-gap 以及两者合写 grid-gap

grid-gap 用来设置网格间距，也就是两个网格之间留出来的空白，其可以在横向和纵向分别通过 grid-column-gap 和 grid-row-gap 来设置相应的大小，这两个属性值通常可以合写为 grid-gap：

.grid {
    grid-gap: 20px 10px;    //20px row-gap  10px column-gap
}

在横向设置 10px 的间距，纵向设置 20px 的间距，如果，横向和纵向要设置的大小一致时，可以直接缩写为一个值： grid-gap: 20px;

 

1. align-items

   align-items 与后者相同道理，不再赘述

2. justify-items

   属性是整个项目内容在单元格里面的水平位置（左中右）

   .grid {
       justify-items: start | end | center | stretch(默认值) 填满;
   }
   属性值介绍：
   ​
   stretch: 默认值，内容充满整个网格区域
   start：网格项内容与网格区域左侧对齐
   end: 网格项内容与网格区域右侧对齐
   center: 网格项内容在网格区域居中显示
   ​
   ​

3. justify-content

   justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

   .container {
     justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
     align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
   }

     

4. align-content

   与上面的justify-content属性值完全相同 只是排列方向变成了垂直方向

5. grid-template-areas

   划分容器的区域

   grid-template-areas: "header header header"
                        "siderbar content content"
                        "footer footer footer";

    

网格项(item)上面可以设置的属性有：

1. grid-column-start

2. grid-column-end

   .item1 {
       grid-column-start: 1;
       grid-column-end: 3
   }
   grid-column-start, grid-column-end，分别表示该网格项开始和结束的网格线序号，其值是代表网格线的编号。

    

3. grid-row-start

4. grid-row-end

   竖直方向同理，使用 grid-row-start 和 grid-row-end 两个属性实现

   .item1 {
       grid-row-start: 2;
       grid-row-end: 4;
   }

   这两组属性同样有相应的缩写形式，我们把 grid-column-start, grid-column-end 合写为 grid-column，把 grid-row-start 和 grid-row-end 合写为 grid-row，其值用一个 / 来分隔。

5. grid-column（1 和 2 的合写形式）

   除了在网格容器上统一进行的设置，我们可以针对特定的网格项进行设置，决定其占据的网格区域，我们可以借助网格线的约束，来决定某一个网格项的空间

6. gird-row（3 和 4 的合写形式）

   grid-column: 1/3;
   grid-row: 2/4;

7. grid-area

   将项目放在某个特定区域内 覆盖关系可以用z-index实现 与grid-row grid-column的两个属性功能相同

8. justify-self

9. align-self

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}