栅格布局

1.相关概述

对于CSS来说，布局一直都是最重要的功能。虽说咱前面讲到的flex布局填补了一些布局上的空白，但并不适用于大部分情况，与之相比，栅格布局是普适的布局系统。
Grid栅格布局 与 Flex弹性布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

2.基本概念

2.1 容器和项目

与弹性布局类似，给一个元素定义栅格容器，这个元素随之成为栅格容器，直接子元素随之成为栅格元素。书上是这么写的，我更喜欢叫容器与项目。

        <div>
              <div><span></span></div>
              <div><span></span></div>
        </div>

如上面代码，最外面的div就是容器，里边的两个div就是项目。只有栅格容器的直接子元素能成为项目，项目的子元素就不是项目，比如内层div下的span就不是项目了，Grid布局只针对项目有效。
不过呢，项目自身也是可以变作容器的，因此子元素的子元素将变成嵌套栅格的项目。栅格之中可以嵌套栅格，层级不限。

2.2 行和列

上面的图片中，类似红色区域的被称为行，绿色的区域被称为列

2.3 单元格

行和列交叉所得到的就是单元格，如上图，2行 2列交叉得到了4个单元格

2.4 栅格线

栅格线就是划分栅格的线，如2.3的图，2行就有3条水平栅格线，2列就有3条垂直栅格线。
正常情况下是，n行就n+1条水平栅格线，m列就m+1条垂直栅格线

---

容器的属性分为两类，一类定义在父元素(容器)身上，称为容器属性;一类定义在子元素(项目)身上，称为项目属性

3.定义在容器(父元素)身上的属性

3.1 display属性

栅格有两种，常规栅格和行内栅格。这两种栅格使用display属性的特殊值创建:grid和inline-grid。前者生成块级框框，后者生成行内框。

    <span>span</span>
    <div class="container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
        <div class="item">D</div>
        <div class="item">E</div>
        <div class="item">F</div>
        <div class="item">G</div>
        <div class="item">H</div>
        <div class="item">I</div>
    </div>
    <span>span</span>

    span {
            font-size: 50px;
        }

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

        .item {
            font-size: 2em;
            text-align: center;
            border: 1px solid black;
            background-color: #f68f26;
        }

display:grid的效果

display: inline-grid的效果

虽然display:grid创建的是块级栅格，但是严谨的规范明确指出，“栅格容器不是块级容器”。意思就是，栅格框在布局中的行为与块级容器很像，但是二者之间仍有诸多区别。

    区别如下：
    1.首先，浮动的元素不会打乱栅格容器。这意味着，栅格不会移动到浮动元素的下方，而块级容器会。
    
    2.栅格容器的外边距不与其子元素的外边距折叠，而普通块级框外边距默认是和其后代的外边距折叠的。
        
        普通块级框：
        对于两个嵌套关系的（父子）块元素，父元素有上外边距同时
        子元素也有上外边距，此时父元素会塌陷较大的外边距值。
        解决方案就是：加边框、加内边距、或者overflow：hidde
        
        栅格容器：
        栅格容器(父元素)的外边距绝不会与项目(子元素)的外边距折叠

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

3.2 grid-template-columns属性和grid-template-rows属性

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
示例：

    <div class="container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
        <div class="item">D</div>
        <div class="item">E</div>
        <div class="item">F</div>
        <div class="item">G</div>
        <div class="item">H</div>
        <div class="item">I</div>
    </div>

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

        .item {
            font-size: 2em;
            text-align: center;
            border: 1px solid black;
            background-color: #f68f26;
        }

上面代码指定了一个三行三列的网格，列宽和行高都是50px
除了使用像素单位，还可以使用绝对单位%

    将上面的.container写成以下代码，效果图一样
    .container {
            display: grid;
            width: 150px;
            height: 150px;
            grid-template-columns: 33.33% 33.33% 33.33%;
            grid-template-rows: 33.33% 33.33% 33.33%;
        }
     因为是百分比，所以是以容器整体的宽高来计算的，如果不给容器添加宽高
     就会以浏览器的宽、单元格内容的高来计算

3.2.1 repeat()

在网格比较多的时候，重复写行和列的大小是比较麻烦的，这时候我们可以使用repeat()函数，简化重复的值。repeat()函数可以接收两个参数，第一个是重复次数，第二是重复的值
示例：

    .container {
            display: grid;
            grid-template-columns: repeat(3,50px);
            grid-template-rows: repeat(3,50px);
        }
    效果图不变

repeat()函数也能重复某种模式

grid-template-columns: repeat(3, 50px 100px 50px);
上面的代码相当于定义了9列，是按照 50px 100px 50px这个顺序排下去的，如图

3.2.2 auto-fill 关键字

有时候，容器大小是不固定的，单元格大小是固定的。而我们希望每一行(或者每一列)尽可能的容纳更多单元格，可以在repeat()函数中使用auto-fill关键字，表示自动填充

            .container {
              display: grid;
              grid-template-columns: repeat(auto-fill, 100px);
            }
            
            这里表示每列宽度为100px，自动填充，直到容器放不下更多的列

这里的容器宽度默认和浏览器一样宽，自动填充列，最后面的一列小于100px，所以换行了

3.2.3 fr关键字

与弹性布局的中的项目的flex属性类似，fr表示片段

            .container {
              display: grid;
              grid-template-columns: 1fr 2fr;
            }
            
            这里表示第二列的宽度是第一列宽度的两倍

上图同理，我没给容器设置宽度，容器宽度默认就是浏览器的宽度

             
            fr可以搭配绝对长度单位一起使用，如下
            
            .container {
              display: grid;
              grid-template-columns: 100px 1fr 2fr;
            }  

上图，第一列的宽为100px，然后将浏览器剩余的宽度分成3份，一份给第二列，两份给第三列

3.2.4 minmax()函数

该函数接收两个参数，分别是最小值和最大值，然后会产生一个长度范围，表示长度在这个区间内
grid-template-columns: 1fr 1fr minmax(150px, 1fr);
比如这句代码意思是第三列最小是150px，最大不超过1fr。在你缩放浏览器的时候，第三列的宽度始终在minmax函数所设置的范围内

3.2.5 auto关键字

auto关键字表示由浏览器自己决定宽度
grid-template-columns: 200px auto 200px;执行效果如下

上面那句代码表示第一列和第三列固定是200px，当我缩放浏览器的时候，它会自动缩小或者放大，它的值等于该列的最大宽度。除非给第二列设置了min-width值，并且这个值大于最大宽度。

3.2.6 栅格线的名称

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

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

上面的代码是一个3行3列的栅格，这样就有3+1根垂直栅格线和3+1跟水平栅格线。
栅格布局还允许一根线有多个名字，eg：[c1 column1]

3.3 grid-row-gap属性、grid-column-gap属性和grid-gap属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）

    <div class="container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
        <div class="item">D</div>
        <div class="item">E</div>
        <div class="item">F</div>
        <div class="item">G</div>
        <div class="item">H</div>
        <div class="item">I</div>
    </div>

        .container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-row-gap: 20px;
            grid-column-gap: 20px;
            border: 2px solid black;
        }

        .item {
            font-size: 2em;
            text-align: center;
            border: 1px solid black;
            background-color: #f68f26;
        }

上面代码设置了行与行之间，列与列之间的间隔都为20px

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，见如下代码。

            语法：grid-gap: <grid-row-gap> <grid-column-gap>;
            
            上面代码等同于
            .container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-gap: 20px 20px;
            /*如果只写一个，默认第二个等于第一个*/
            border: 2px solid black;
        }
        
        以上3个属性的grid-前缀能省略不写

3.4 grid-template-areas属性

栅格布局允许指定区域，一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

        .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';
        }
        
        上面代码先3行3列划分出了9个单元格，然后指定了9个区域，分别对应9个单元格
        

多个单元格合并成一个区域的写法如下。

    grid-template-areas: 'A A A'
                         'B B B'
                         'C C C';

注意，如果某些区域不需要利用，则使用"点"（.）表示。

          grid-template-areas: 'A . C'
                               'D . F'
                               'G . I';
                               
         上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。

区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。比如，区域名为A，则起始位置的水平网格线和垂直网格线叫做A-start，终止位置的水平网格线和垂直网格线叫做A-end。

3.5 grid-auto-flow属性

划分网格以后，容器的项目(子元素)会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行,即下图顺序。

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置

        .container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-auto-flow: row;
        }

        .item {
            font-size: 2em;
            text-align: center;
            line-height: 100px;
            border: 1px solid black;
            background-color: #f68f26;
        }

        .container .item:nth-child(-n+2) {
            grid-column-start: 1;
            grid-column-end: 3;
        }
        
        我们让A项目和B项目各占两个单元格，在grid-auto-flow：row的情况下，会产生以下布局
        

上图中，1号项目后面的位置是空的，这是因为3号项目默认跟着2号项目，所以会排在2号项目后面。

现在修改设置，设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。

grid-auto-flow: row dense;效果图如下

上图会先填满第一行，再填满第二行，所以C项目就会紧跟在A项目的后面。H项目和I项目就会排到第四行。

如果将设置改为column dense，表示"先列后行"，并且尽量填满空格。

grid-auto-flow: column dense;效果图如下

上图会先填满第1列，再填满第2列，所以C项目在第1列，E项目在第2列。H项目和I项目被挤到了第4列。

3.6 justify-items属性、align-items属性、place-items 属性

        justify-items属性设置单元格内容的水平位置（左中右）
        align-items属性设置单元格内容的垂直位置（上中下）。


        .container {
            justify-items: start | end | center | stretch;
            align-items: start | end | center | stretch;
        }


        这两个属性的写法完全相同，都可以取下面这些值。

        start：对齐单元格的起始边缘。
        end：对齐单元格的结束边缘。
        center：单元格内部居中。
        stretch：拉伸，占满单元格的整个宽度（默认值）。

        .container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            /* justify-items: start; */
            /* align-items: start; */
            border: 2px solid black;
        }

未设置这两个属性之前的效果图如下

设置了justify-items: start;后,单元格内容左对齐

设置了align-items: start;后,单元格内容头部对齐

    place-items属性是align-items属性和justify-items属性的合并简写形式。
        
        语法：
            place-items: <align-items> <justify-items>;

3.7 justify-content属性、align-content属性、place-content属性

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

  .container {
           display: grid;
           grid-template-columns: 100px 100px 100px;
           grid-template-rows: 100px 100px 100px;
           border: 2px solid black;
          /*justify-content: start | end | center | stretch | space-around | space- between | space-evenly;*/
          /*align-content: start | end | center | stretch | space-around | space-between | space-evenly;*/ 
        }  
        
        这两个属性的写法完全相同，都可以取上面这些值
        以下仅举例justify-content
        

justify-content:start;效果图

justify-content:end;效果图

justify-content:center;效果图

justify-content:stretch;....emmm.不知道怎么让他生效，老奇怪了，以后再补充

justify-content:space-around;效果图

justify-content:space-between;效果图

justify-content:space-evenly;效果图

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

    语法：place-content: <align-content> <justify-content>

3.8 grid-auto-columns属性、grid-auto-rows属性

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

      grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。
      它们的写法与grid-template-columns和grid-template-rows完全相同。
      如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

4.定义在项目(子元素)身上的属性

4.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属性：下边框所在的水平网格线

示例

        .item:nth-child(1) {
            grid-column-start: 1;
            grid-column-end: 4;
        }
        
        /*
        这里指定了第一个项目的左右边框在哪根栅格线，没有指定上下边框的
        这时候就会采用默认默认位置，上下分别是第一根水平栅格线和第二根水平栅格线
        
        除了A项目外，其他的项目是没有指定位置的
        这时候它们的位置由容器的grid-auto-flow属性决定
        这个属性的默认值是row，因此会"先行后列"进行排列。
        
        除了指定为第几个网格线，还可以指定为网格线的名字。
        
        还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
        grid-column-start: span 2;

4.2 grid-column 属性、grid-row属性

    /*
    grid-column属性是grid-column-start和grid-column-end的合并简写形式
    grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
    
    语法：
        grid-column: <start-line> / <end-line>;
        grid-row: <start-line> / <end-line>;

4.3 grid-area

/*
    grid-area属性指定项目放在哪一个区域。
    
    grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的
    合并简写形式，直接指定项目的位置
    
    语法：
    grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

4.4 justify-self属性、align-self属性、place-self 属性

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

    align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致
    也是只作用于单个项目。
    
    语法：
        justify-self: start | end | center | stretch;
        align-self: start | end | center | stretch;
        
        
        
    place-self属性是align-self属性和justify-self属性的合并简写形式 
    语法： place-self: <align-self> <justify-self>;

5.参考链接

不瞒大家，栅格布局是我昨天才知道的，哈哈哈，一直以为栅格布局是bootstrap里面那个，昨天翻书看到了栅格布局，然后在网上看了阮老师的文档学的，所以这一篇帖子算是我做笔记给自己看的，因为阮老师那个文档没目录，容易看一个忘一个......
CSS Grid 网格布局教程 - 阮一峰的网络日志