CSS網格佈局基礎

瀏覽器兼容性

能夠看出CSS網格佈局從Safari 10.1, Firefox 52, Chrome 60，Edge 15開始受到支持。

網格佈局

頁面基本元素：

<div class="wrapper">
        <div class="box box1">One</div>
        <div class="box box2">Two</div>
        <div class="box box3">Three</div>
        <div class="box box4">Four</div>
        <div class="box box5">Five</div>
    </div>

樣式：

.wrapper {
            border: 2px solid #f76707;
            border-radius: 5px;
            background-color: #fff4e6;
        }
        .box {
            border: 2px solid #FDC180;
        }

經過在元素上聲明 display：grid 或 display：inline-grid 來建立一個網格容器：

.wrapper {
        display: grid;
    }

以下效果：

定義網格中的行和列

經過 grid-template-columns和grid-template-rows屬性來定義網格中的行和列。這些屬性定義了網格的軌道。網格軌道是網格中任意兩條線之間的空間。
以下網格，包含了三個200像素寬的列軌道：

.wrapper {
        display: grid;
        grid-template-columns: 200px 200px 200px;
    }

fr單位

新的fr單位表明網格容器中可用空間的一等份。下一個網格定義將建立三個相等寬度的軌道，這些軌道會隨着可用空間增加和收縮。

.wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

也能夠和像素單位混用：

.wrapper {
            display: grid;
            grid-template-columns: 500px 1fr 2fr;
        }

在軌道清單中使用repeat()

repeat 的語法以下：

repeat(number of columns/rows, the column width we want);

有着多軌道的大型網格可以使用 repeat() 標記來重複部分或整個軌道列表。以下方的網格定義：

.wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

能夠寫成：

.wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

Repeat 語句能夠用於重複軌道列表中的一部分。在下面的例子中我建立了一個網格：它起始軌道爲20像素，接着重複了6個1fr的軌道，最後再添加了一個20像素的軌道。

.wrapper {
        display: grid;
        grid-template-columns: 20px repeat(6, 1fr) 20px;
    }

Repeat 語句能夠傳入一個軌道列表，所以你能夠用它來建立一個多軌道模式的重複軌道列表。在下一個例子中，網格將有共計10個軌道，爲1個1fr軌道後面跟着1個2fr軌道，該模式重複5次。

.wrapper {
        display: grid;
        grid-template-columns: repeat(5, 1fr 2fr);
    }

grid-auto-rows 和 grid-auto-columns

建立上文中網格例子的時候，咱們用 grid-template-columns 屬性定義了本身的列軌道，可是卻讓網格按所需的內容建立行，這些行會被建立在隱式網格中。顯式網格包含了你在 grid-template-columns 和 grid-template-rows 屬性中定義的行和列。若是你在網格定義以外又放了一些東西，或者由於內容的數量而須要的更多網格軌道的時候，網格將會在隱式網格中建立行和列。按照默認，這些軌道將自動定義尺寸，因此會根據它裏面的內容改變尺寸。
能夠在隱式網格中用 grid-auto-rows 和 grid-auto-columns 屬性來定義一個設置大小尺寸的軌道。
在下面的例子中咱們用 grid-auto-rows 屬性來確保在隱式網格中建立的軌道是200像素高。

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

minmax()

在設置一個顯式的網格或者定義自動建立的行和列的大小的時候，咱們也許想給網格一個最小的尺寸，但要確保他們能擴大到容納他裏面添加的內容。舉個例子，我想讓個人行的高度永遠不會縮小到100像素如下，可是若是個人內容延伸到300像素高了我想讓個人行高也延伸到這個高度。

網格用minmax()函數來解決這個問題。在下一個例子中我用minmax()做爲grid-auto-rows的值。自動建立的行高將會是最小100像素，最大爲auto。用auto意味着行的尺寸將會根據內容的大小來自動變換：根據本行中最高的單元，把空間擴展到足夠容納該單元。

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

<div class="wrapper">
    <div class="box">One</div>
    <div class="box">Two
        <p>I have some more content in.</p>
        <p>This makes me taller than 100 pixels.</p>
    </div>
    <div class="box">Three</div>
    <div class="box">Four</div>
    <div class="box">Five</div>
</div>

跨軌道放置網格項目

以下有四條縱向的網格線和三條橫向的網格線：

使用了grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 屬性，把前兩個元素放到了咱們的三列網格中。從左至右，第一個元素從列線1開始，延伸至列線4，也就是咱們這個例子中最右邊的列線。並從行線1延伸到行線3，佔據了兩個行軌道。
第二個元素從列線1開始，延伸了一個軌道。由於這是默認行爲，因此我不用指定結束線。而且它從行線3到行線5，跨越了兩個行軌道。剩下的元素會把本身安放到網格空餘的空間中。

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

網格間距

在兩個網格單元之間的 網格橫向間距 或 網格縱向間距可以使用 grid-column-gap 和 grid-row-gap 屬性來建立，或者直接使用兩個合併的縮寫形式 grid-gap。在下面的例子中，我會建立一個橫向間距爲10px、縱向間距爲1em的網格元素。

嵌套網格

一個網格項目能夠也成爲一個網格容器。在接下來的例子中我事先有了一個3列的網格元素，並有兩個跨軌道的網格。在這個例子中，第一個網格項目含有幾個子級項目。當這些項目不是網格容器的直接子級元素時，它們不會參與到網格佈局中，並顯示爲正常的文檔流。
html：

<div class="wrapper">
        <div class="box box1">
            <div class="nested">a</div>
            <div class="nested">b</div>
            <div class="nested">c</div>
        </div>
        <div class="box box2">Two</div>
        <div class="box box3">Three</div>
        <div class="box box4">Four</div>
        <div class="box box5">Five</div>
    </div>

css：

.wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .wrapper {
        border: 2px solid #f76707;
        border-radius: 5px;
        background-color: #fff4e6;
    }
    .box1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    .box2 {
        grid-column-start: 1;
        grid-row-start: 3;
        grid-row-end: 5;
    }
    .box {
        border: 2px solid #FDC180;
        background: #FFD7A4;
        padding: 10px;
        color: #FB2E10;
    }
    .nested {
        border: 2px solid #FFF1A2;
        background: #FFFAD9;
    }

若是我把 box1 設置成 display: grid 我能夠給它定義軌道而後它也會變成一個網格元素，它的子級元素也會排列在這個新網格元素中。

.box1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

參考文章：
https://www.w3cplus.com/css3/...
https://developer.mozilla.org...
http://caibaojian.com/fr.html