栅格布局

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 网格布局教程 – 阮一峰的网络日志