Grid佈局——頁面佈局如此簡單

前言

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

介紹

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

提供能力

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

兼容性

在開發以前，你得先了解其兼容性。整體來講，兼容性仍是不夠全面，但若是一些公司用於內部系統開發，grid佈局將會是一個不錯的選擇。

基本概念

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,佈局以下：

具體實現

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

html代碼

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

css代碼

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