## Grid

Grid 布局教程 by

    .container.one{
      grid-template-columns:100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
    }

1

2

3

4

5

6

7

8

9

      .container.two{
       grid-template-columns: 33.33% 33.33% 33.33%;
       grid-template-rows: 33.33% 33.33% 33.33%;
      }

1

2

3

4

5

6

7

8

9

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

1

2

3

4

5

6

7

8

9

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

1

2

3

4

5

6

7

8

9

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

1

2

3

4

5

6

7

8

9

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

1

2

3

4

5

6

7

8

9

      .container.seven{
       grid-template-columns: 1fr 1fr minmax(100px, 1fr);
     }

1

2

3

4

5

6

7

8

9

      .container.eight{
       grid-template-columns: 100px auto 100px;
     }

1

2

3

4

5

6

7

8

9

      /* 指定每根线的名字，每根线的名字可以是多个的 */
      .container.nine{
        grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
        grid-template-areas: [r1] 100px [r2] 100px [r3] auto [r4];
      }

1

2

3

4

5

6

7

8

9

      .container.ten-1{
        grid-template-columns: 70% 30%;
      }
      .container.ten-2{
      grid-template-columns: repeat(12,1fr);
    }

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

11

12

        /* 设置间距 */
        grid-row-gap:20px;
        grid-column-gap: 20px;
        /* 简写 */
        grid-gap:<grid-row-gap>   <grid-column-gap>;
        /* 最新标准 */
        grid-row-gap => row-gap
        grid-column-gap => column-gap
        grid-gap => gap

1

2

3

4

5

6

7

8

9

        grid-template-areas属性用于定义区域。
        grid-template-areas: 'a . c'
        'd . f'
        'g . i';
        /* 先列后行 */
        grid-auto-flow: column;
        /* 先行后列 */
        grid-auto-flow: row;/* 默认值 */

1

2

3

4

5

6

7

8

9

        grid-column-start:1;
        grid-column-end:3;

1

2

3

4

5

6

7

8

9

        grid-auto-flow: row dense;

1

2

3

4

5

6

7

8

9

        grid-auto-flow: column dense;

1

2

3

4

5

6

7

8

9

      .container {
        justify-items: start | end | center | stretch;
        align-items: start | end | center | stretch;
      }
      start：对齐单元格的起始边缘。
      end：对齐单元格的结束边缘。
      center：单元格内部居中。
      stretch：拉伸，占满单元格的整个宽度（默认值）。

1

2

3

4

5

6

7

8

9

      align-items: start;

1

2

3

4

5

6

7

8

9

      /* 简写 */
      place-items: <align-items> <justify-items>
      place-items: start end;

1

2

3

4

5

6

7

8

9

      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;
      }

    start - 对齐容器的起始边框。

1

2

3

4

5

6

7

8

9

     end - 对齐容器的结束边框。

1

2

3

4

5

6

7

8

9

     center - 容器内部居中。

1

2

3

4

5

6

7

8

9

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

1

2

3

4

5

6

7

8

9

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

1

2

3

4

5

6

7

8

9

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

1

2

3

4

5

6

7

8

9

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

1

2

3

4

5

6

7

8

9

        /* 简写 */
        place-content: <align-content> <justify-content>

1

2

3

4

5

6

7

8

9

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

1

2

3

4

5

6

7

8

9

    3.9(不推荐使用下面这2个简写)
    grid-template 属性
      grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
    grid 属性
      grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

    4.1
      grid-column-start 属性，
        左边框所在的垂直网格线
      grid-column-end 属性，
        右边框所在的垂直网格线
      grid-row-start 属性，
        上边框所在的水平网格线
      grid-row-end 属性
        下边框所在的水平网格线

    /*
      这段代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。
    */
    .item-1 {
      grid-column-start: 2;
      grid-column-end: 4;
    }

1

2

3

4

5

6

7

8

9

    /*
      指定四个边框位置
    */
    .item-1 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 2;
      grid-row-end: 4;
    }

1

2

3

4

5

6

7

8

9

    /*
      指定为网格线的名字
    */
    .item-1 {
      grid-column-start: header-start;
      grid-column-end: header-end;
    }

1

2

3

4

5

6

7

8

9

    /*
      使用 span 关键字，表示 '跨越'  即左右边框（上下边框）之间跨越多少个网格
    */
    .item-1 {
     grid-column-start: span 2;
    }

1

2

3

4

5

6

7

8

9

    /*
      属性简写：
          grid-column：grid-column-start / grid-column-end;
          grid-row：grid-row-start / grid-row-end;
    */
    .item-1 {
      grid-column:  / ;
      grid-row:  / ;
    }
    例子：

    .item-1 {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
    }
    /* 等同于 */
    .item-1 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 2;
    }

    上面 item-1占据第一行，从第一根列线到第三根列线。

1

2

3

4

5

6

7

8

9

    /*
     用span关键字
    */
    .item-1 {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
    }
    /* 等同于 */
    .item-1 {
      grid-column: 1 / span 2;
      grid-row: 1 / span 2;
    }

1

2

3

4

5

6

7

8

9

    /*
    .item-1 {
      grid-column: 2;
      grid-row: 2;
    }
    */

1

2

3

4

5

6

7

8

9

    /* grid-area */

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

    .item {
      grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
    }

1

2

3

4

5

6

7

8

9

    /* 例子 */
    .item-1 {
      grid-area: 1 / 1 / 3 / 3;
    }

1

2

3

4

5

6

7

8

9

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

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

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

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

          place-self: <align-self> <justify-self>;

          .item {
            place-self: center center;
          }