摘要：網格單元格被劃分之后每一個格子就是單元格，也是布局的最小單位。網格區域若干個單元格拼接而成的區域。網格間隙單元格與單元格之間的距離，可以垂直也可以水平。

CSS網格布局用于將頁面分割成數個主要區域，或者用來定義組件內部元素間大小、位置和圖層之間的關系。像表格一樣，網格布局讓我們能夠按行或列來對齊元素。 但是，使用CSS網格可能還是比CSS表格更容易布局。 例如，網格容器的子元素可以自己定位，以便它們像CSS定位的元素一樣，真正的有重疊和層次。

gird布局是一種基于二維的網格布局，與flex和普通的浮動布局相比，他最大的優勢在于不取決dom節點的結構，而是直接把整個頁面劃分為多個格子，繼而進行填充。

①二維布局，提供橫、豎方向布局，與table相似
②可設置具體的行數、列數，且可設置每行、每列的大小，提供多種的彈性大小控制屬性
③可定義每個格子間的間隔（橫豎）
④可設置元素的對齊方式（基于元素所在單元格），批量控制，具體某個子元素控制
⑤可讓元素填充到指定的格子（某行、某列，跨格子），此功能可以對元素進行任意的布局，而無需修改html結構

在開發之前，你得先了解其兼容性。總體來說，兼容性還是不夠全面，但如果一些公司用于內部系統開發，grid布局將會是一個不錯的選擇。

用于將整體劃分為每一個各自的線，可以水平（row grid lines），也可以是垂直的（column grid lines），如下圖中的紅線藍線。

被劃分之后每一個格子就是單元格，也是gird布局的最小單位。

若干個單元格拼接而成的區域。

單元格與單元格之間的距離，可以垂直也可以水平。

以下圖片來源：http://grid.malven.co/

用于定義 grid columns, rows 和areas。

用于定義主軸（水平）對齊方式

用于定于副軸（垂直）對齊方式

用于定于主軸（水平）上多跟軸線的對齊方式

用于定于副軸（垂直）上多跟軸線的對齊方式

用于定義單元格的自動遍歷順序

以下圖片來源：http://grid.malven.co/

用于控制該組件在水平方向上占多少個格

用于控制該組件在垂直方向上占多少個格

合并控制組件在垂直水平方向上各占多少個格

用于定義該組件在主軸（水平）方向上內容的對齊方式

用于定義該組件在副軸（垂直）方向上內容的對齊方式

如何在不改變dom節點結構的情況下，實現如下功能：在屏幕不同分辨率的情況下，頁面中的組件自動地移位。
①電腦：寬度大于1200px，布局如下：

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

③手機：寬度小于992px,布局如下：

代碼來源，https://github.com/TheWalking...

        
header
        
subtitle
        
left
        
middle
        
right-top
        
right-middle
        
right-bottom
        
footer
    

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