grid布局

经历过表格布局，浮动布局，flex布局。网页布局是越来越方便，下面讲的是grid布局，一些基本的grid基础知识

《1》网格布局的相关基本概念
    1.容器和项目
      容器：采用网格布局的区域
      项目：容器内部采用网格定位的子元素
        <div class="box">
          <div class="item"><p>1</p></div>
          <div class="item"><p>2</p></div>
          <div class="item"><p>3</p></div>
        </div>
      最外层的<div class="box">元素就是容器，内层的三个<div class="item">元素就是项目。
      注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。

    2.行和列
      容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
      可以类比表格行和列的概念

    3.单元格
      行和列的交叉区域，称为"单元格"（cell）。
      正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。
    
    4.网格线
      划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
      正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。
  
　　   

《2》网格布局 -- 容器属性(定义在容器上的属性)
    《1》display: grid  | inline-grid      //将容器元素设置成 - 块级元素 / 行内元素

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

    《2》
        //指定每一列的列宽
        grid-template-columns：特定列 | auto | fr | minmax(min,max) | repeat(重复的次数 | auto-fill ,重复的值|重复某种模式)
        //指定每一行的行高
        grid-template-rows：特定行 | auto| fr | minmax(min,max) |  repeat(重复的次数 | auto-fill ,重复的值|重复某种模式)

          eg:重复的值
            grid-template-columns: repeat(3, 33.33%);
            grid-template-rows: repeat(3, 33.33%);

        eg:重复某种模式
            grid-template-columns: repeat(2, 100px 20px 80px)

          《a》repeat ：auto-fill关键字：
              单元格的大小是固定的，但是容器的大小不确定。
              如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
              eg: grid-template-columns: repeat(auto-fill, 100px);

          《b》fr 关键字
              表示比例关系。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
              可与绝对长度的单位结合使用
              eg: grid-template-columns: 150px 1fr 2fr;
        
          《c》minmax(min,max)
              长度在设定的范围之内。它接受两个参数，分别为最小值和最大值。
              //列宽不小于100px，不大于1fr
              eg: grid-template-columns: 1fr 1fr minmax(100px, 1fr);

          《d》auto关键字
              表示由浏览器自己决定长度。
              eg: grid-template-columns: 100px auto 100px;

          《e》网格线的名称
              使用方括号，指定每一根网格线的名字，方便以后的引用。
              eg:
                grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
                grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
       
          《f》注意：设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

      《3》grid-row-gap / grid-column-gap / grid-gap
          grid-row-gap属性设置行与行的间隔（行间距）

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

          grid-gap: <grid-row-gap> <grid-column-gap>

      《4》grid-template-areas 属性
          指定"区域"（area）,些区域不需要利用，则使用"点"（.）表示。
          eg:
            grid-template-areas:  'a b c'
                                  'd . f'
                                  'g h i';

      《5》grid-auto-flow 属性：排序方向
          划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。
          默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。
          grid-auto-flow ： row | column

          grid-auto-flow: row dense; //表示"先行后列"，并且尽可能紧密填满，尽量不出现空格

      《6》justify-items / align-items / place-items

          （a）justify-items属性:
            设置单元格内容的水平位置（左中右）
            justify-items: start | end | center | stretch;
          
          （b）align-items属性：
            设置单元格内容的垂直位置
            align-items: start | end | center | stretch;
          
          （c）place-items: <align-items> <justify-items>

          说明：
            start：对齐单元格的起始边缘。
            end：对齐单元格的结束边缘。
            center：单元格内部居中。
            stretch：拉伸，占满单元格的整个宽度（默认值）。
          
      《7》justify-content / align-content / place-content 
          (a)整个内容区域在容器里面的水平位置（左中右）
              justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

          （b）整个内容区域的垂直位置（上中下）
              align-content: start | end | center | stretch | space-around | space-between | space-evenly;

          （c）place-content: <align-content> <justify-content>

      《8》grid-auto-columns / grid-auto-rows 
            定义：设置浏览器自动创建的多余网格的列宽和行高
                  写法与grid-template-columns和grid-template-rows完全相同
            作用：比如网格只有3行，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。


《3》网格布局 -- 项目属性(定义在项目上的属性) 
    《1》
        grid-column-start属性：左边框所在的垂直网格线
        grid-column-end属性：右边框所在的垂直网格线
        grid-row-start属性：上边框所在的水平网格线
        grid-row-end属性：下边框所在的水平网格线

        （a）或者指定为网格线的名字
            grid-column-start: header-start;
            grid-column-end: header-end;

        （b）使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
            grid-column-start: span 2; //即此项目的左边框距离右边框跨越2个网格
    
    《2》grid-column 属性 / grid-row 属性
          grid-column: 1 / 3; 
            等同于
          grid-column-start: 1;
          grid-column-end: 3;

          grid-row: 1 / 2;
            等同于
          grid-row-start: 1;
          grid-row-end: 2;
        
    《3》grid-area 属性
        指定项目放在哪一个区域。
         grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
        
    《4》justify-self 属性/align-self 属性/place-self 属性
        justify-self: start | end | center | stretch;
          设置单元格内容的水平位置（左中右）

        align-self: start | end | center | stretch;
          设置单元格内容的垂直位置（上中下）

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

转载于:https://www.cnblogs.com/changxue/p/10959696.html