grid 网格布局

一、网格布局概述

CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。
像表格一样，网格布局让我们能够按行或列来对齐元素。

网格： 网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。

二、属性介绍

1.网格容器

  通过在容器元素上声明 **display：grid** 或 **display：inline-grid** 来创建一个网格容器。
  grid就是容器元素，item就是容器中的项目（单元格）

        .grid {
            display: grid;
        }
        .item {
            text-align: center;
            background-color: #9fd3f9;
            border: 1px solid #fff;
        }

    <div class="grid">
        <div class="item">One</div>
        <div class="item">Two</div>
        <div class="item">Three</div>
        <div class="item">Four</div>
        <div class="item">Five</div>
    </div>

2.网格轨道 grid-template-columns grid-template-rows**

一个网格轨道就是网格中任意两条线之间的空间。

2.1 grid-template-columns列轨道的宽度，grid-template-rows定义行轨道的高度

下面3中写法都会得到相同的展现形式

    <div class="grid">
        <div class="item">One</div>
        <div class="item">Two</div>
        <div class="item">Three</div>
        <div class="item">Four</div>
        <div class="item">Five</div>
    </div>

        /* 网格轨道 */
        /* grid-template-columns定义列轨道的宽度 */
        .grid {
            display: grid;
            /* 定义网格列宽 */
            grid-template-columns: 300px 150px 150px;
            /* 定义网格行高 */
            grid-template-rows: 100px 200px;
        }

        /* fr单位,类似于flex中的比例关系，2：1：1 */
        .grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            grid-template-rows: 100px 200px;
        }

        /* fr和px的混合使用，第一个轨道是300像素，这个固定宽度被从可用空间中取走，
        剩下的宽度2个轨道按比例分配*/
        .grid {
            display: grid;
            grid-template-columns: 300px 1fr 1fr;
            grid-template-rows: 100px 200px;
        }

2.2.repeat函数，repeat() 标记重复部分或整个轨道列表**

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
        /* 等同于*/
        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }
        

还可以结合使用

        .grid {
            display: grid;
            grid-template-columns: 150px repeat(2, 1fr);
            grid-template-rows: 100px 100px;
        }

创建一个重复的多轨道

        /* Repeat 语句可以用于重复轨道列表中的一部分。 */
        /* 起始轨道为100px，接着1fr 2fr 1fr 2fr，最后100px。 */
        .grid {
            display: grid;
            grid-template-columns:100px  repeat(2, 1fr 2fr);
            grid-template-rows: 100px;
        } 

2.3 auto-fill 关键字

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

        .grid8 {
            display: grid;
            grid-template-columns: repeat(auto-fill, 150px);
            grid-template-rows: 100px 100px;
        } 

2.4 minmax()

我们也许想给网格一个最小的尺寸，确保他们能扩大到容纳他里面添加的内容。举个例子，我想让我的行的高度永远不会缩小到50像素以下，但是如果我的内容延伸到100像素高了我想让我的行高也延伸到这个高度。

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(50px, auto);
        }

2.5 auto关键字，由浏览器自己决定长度

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

3.网格间距 grid-column-gap，grid-row-gap

顾名思义，分别表示轨道的列间距，行间距

     .grid {
            display: grid;
   			grid-template-columns: 100px auto 100px;
   			grid-template-rows: 100px 100px;
       }
      *等同于
       grid-gap: 20px 20px;

4.网格线及跨轨道放置网格

Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。

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

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 100px;
        }
        .item1 {
            grid-column-start: 1;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 3;
        }
        .item2 {
            grid-column-start: 1;
            grid-row-start: 3;
            grid-row-end: 5;
        }