grid的布局

五种前端基本布局—table布局、float布局、absolute布局、flexbox布局、grid布局
一、Table布局
缺点
1.table 比其他html标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源（代码冗余）。
2.table 会阻挡浏览其渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。
3.灵活性差，一旦设计确定，后期很难通过CSS让它展现新的面貌。
4.不利于搜索引擎抓取信息，直接影响到网站的排名。

优点
1.兼容性好.
2.容易上手

二、float
缺点
脱离文档流，需要清楚浮动，*高度塌陷（float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在对高度计算的时候会忽略浮动的元素）。

优点
兼容性好，比较简单

三、flex
优点：布局灵活，代码简洁，实现复杂布局和自适应布局时比较高效，而且以后代码的可维护性也比较强。

缺点：以往很多人说兼容性不好，但是现如今IE10以下的浏览器市场占有率越来越低，兼容性这块已经不用担忧了

四、Grid布局
table的升级版本，二维布局
4.1父级
Grid line（网格线）
用于将整体划分为每一个各自的线，可以水平（row grid lines），也可以是垂直的（column grid lines），如下图中的红线蓝线。

Grid cell（网格单元格）
被划分之后每一个格子就是单元格，也是gird布局的最小单位。

Grid area（网格区域）
若干个单元格拼接而成的区域。

Grid gap（网格间隙）
单元格与单元格之间的距离，可以垂直也可以水平。

容器属性（container）
以下图片来源：http://grid.malven.co/

display（启动该布局）

grid-template（网格模板）
用于定义 grid columns, rows 和areas。

grid-gap（单元格间隙）

justify-items
用于定义主轴（水平）对齐方式

align-items
用于定于副轴（垂直）对齐方式

justify-content
用于定于主轴（水平）上多跟轴线的对齐方式

align-content
用于定于副轴（垂直）上多跟轴线的对齐方式

grid-auto-flow
用于定义单元格的自动遍历顺序

children（组件）
以下图片来源：http://grid.malven.co/

grid-column
用于控制该组件在水平方向上占多少个格

grid-row
用于控制该组件在垂直方向上占多少个格

grid-row + grid-column
合并控制组件在垂直水平方向上各占多少个格

justify-self
用于定义该组件在主轴（水平）方向上内容的对齐方式

align-self
用于定义该组件在副轴（垂直）方向上内容的对齐方式

实际例子
如何在不改变dom节点结构的情况下，实现如下功能：在屏幕不同分辨率的情况下，页面中的组件自动地移位。
①电脑：宽度大于1200px，布局如下：

②平板：宽度大于992px，小于1200px，布局如下：

③手机：宽度小于992px,布局如下：

<div class="container">
        <div class="header">header</div>
        <div class="subtitle">subtitle</div>
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right-top" style="background-color: rgba(244, 213, 171, 1); border: 2px solid rgb(224, 162, 75);">right-top</div>
        <div class="right-middle" style="background-color: rgba(244, 213, 171, 1); border: 2px solid rgb(224, 162, 75);">right-middle</div>
        <div class="right-bottom" style="background-color: rgba(244, 213, 171, 1); border: 2px solid rgb(224, 162, 75);">right-bottom</div>
        <div class="footer">footer</div>
    </div>

.container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        grid-auto-rows: minmax(50px, auto);
    }
    .container div{
        background-color: rgba(189, 249, 255, 1);
        border: 2px solid rgb(77, 170, 179, 1);
        border-radius: 5px;
        text-align: center;
        line-height: 50px;
    }
 
    @media only screen and (min-width: 768px) {
        .header{
            grid-column: 1;
            grid-row: 1;
        }
        .subtitle{
            grid-column: 1;
            grid-row: 2;
        }
        .left{
            grid-column: 1;
            grid-row: 4 / 7;
        }
        .middle{
            grid-column: 1;
            grid-row: 8 / 11;
        }
        .right-top{
            grid-column: 1;
            grid-row: 3;
        }
        .right-middle{
            grid-column: 1;
            grid-row: 7;
        }
        .right-bottom{
            grid-column: 1;
            grid-row: 11;
        }
        .footer{
            grid-column: 1;
            grid-row: 12;
        }
    } 
 
    @media only screen and (min-width: 992px) {
        .header{
            grid-column: 1 / 3;
            grid-row: 1;
        }
        .subtitle{
            grid-column: 1 / 3;
            grid-row: 2;
        }
        .left{
            grid-column: 1;
            grid-row: 4 / 7;
        }
        .middle{
            grid-column: 2;
            grid-row: 4 / 7;
        }
        .right-top{
            grid-column: 1 / 3;
            grid-row: 3;
        }
        .right-middle{
            grid-column: 1;
            grid-row: 7;
        }
        .right-bottom{
            grid-column: 2;
            grid-row: 7;
        }
        .footer{
            grid-column: 1 / 3;
            grid-row: 8;
        }
    } 
 
    @media only screen and (min-width: 1200px) {
        .header{
            grid-column: 1 / 4;
            grid-row: 1;
        }
        .subtitle{
            grid-column: 1 / 4;
            grid-row: 2;
        }
        .left{
            grid-column: 1;
            grid-row: 3 / 6;
        }
        .middle{
            grid-column: 2;
            grid-row: 3 / 6;
        }
        .right-top{
            grid-column: 3;
            grid-row: 3;
        }
        .right-middle{
            grid-column: 3;
            grid-row: 4;
        }
        .right-bottom{
            grid-column: 3;
            grid-row: 5;
        }
        .footer{
            grid-column: 1 / 4;
            grid-row: 6;
        }
    }