CSS Grid 初識

CSS Grid (CSS網格) 是繼 Flexbox以後又一很是重要的佈局方法。目前，Chrome Firefox Safari 瀏覽器的最新版本已經開始支持它了。

本篇文章，咱們經過實現以下佈局的照片牆的例子來學習CSS Grid。

說在前面：FlexBox 與 CSS Grid 的區別？

Flexbox是一維的， CSS Grid是二維的。你想一想，使用Flexbox的時候你須要經過定義flex-direction: row | column來決定佈局方向。而CSS Grid能夠行、列布局。

效果分析

首先，咱們來分析一下最後的效果。咱們把Bootstrap的網格系統搬到腦殼中，能夠看到它是由4行4列組成的：

效果實現

首先，和Flexbox同樣，咱們須要定義一個Grid容器，而且經過display: grid聲明使用grid佈局方式。

定義列

隨後，咱們須要對列進行聲明。經過grid-template-columns屬性，如下方式定義了一個4列，每列200px的網格系統。

grid-template-columns: 200px 200px 200px 200px;

一種更簡單的寫法是：

grid-template-columns: repeat(4, 200px);

若是你並不想定義具體的數值，而是想每列的寬度按一行長度的佔比來定義的話，可使用Grid新引入的fr單位。fr是fraction(分數)的意思，也就是說你定義的就是分子，全部你定義的加起來就是分母。好比一整行是900px, 1fr 2fr就表明第一列佔據1/3,第二列佔據2/3。
在咱們的效果圖中，能夠看到4列平分了一行的寬度，所以咱們能夠這樣定義：

grid-template-columns: repeat(4, 1fr);

你還想在行列之間加一些間隔(Gutters), 使用grid-gap屬性：

grid-gap: 0.5rem;

目前，咱們的佈局狀況就是這樣：

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap:0.5rem;
}
<div class="grid-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

定義行

當一行佔滿以後會自動切換到下一行。沒有特別須要的話，你不用定義它。
不過像咱們這裏須要定義每一行的高度。定義行的方式也與前面講的定義列的方式類似，使用grid-template-rows進行定義:

grid-template-rows: repeat(4, 150px);

有一點比較尷尬的是，咱們每每不知道每一塊的內容是多少，有時候內容的高度會溢出定義的高度，不過不用擔憂，你可使用minmax(min, max)使高度更靈活。

grid-template-rows: repeat(4, minmax(150px, auto));

跨行列

以上，咱們就定義好了咱們網格系統的行列了。

在咱們的效果圖中，咱們看到某些元素是佔據了不止一行或者一列的，咱們能夠經過給每一個元素(grid item)設置grid-column-start, grid-column-end來定義每個元素開始和結束的地方。

灰色底色的數字呢，就表明着列。好比你想你的第一個元素橫跨兩列，那麼這個元素從1開始，橫跨兩列，到3結束：

grid-column-start: 1;
    grid-column-end: 3;

這樣寫，若是是後面的元素，計算它的開始位置實在不容易，所以你能夠採用一種更現代的寫法。經過span(擴展)關鍵字，意味着從這個元素應該開始的位置擴展幾列。

grid-column-start: span 2;

跨行也是一樣的寫法，只是經過grid-row-start來定義。

最後，給每個元素定義它應該佔據的行列:

.grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, minmax(150px, auto));
            grid-gap: .5rem;
        }
        .box-1 {
            grid-column-start: span 2;
            grid-row-start: span 2;
        }
        .box-2 {
            grid-column-start: span 2;
        }
        .box-4 {
            grid-row-start: span 3;
        }
        .box-5 {
            grid-row-start: span 2;
        }
        .box-6 {
            grid-column-start: span 2;
            grid-row-start: span 2;
        }

最最最後，給你的元素加上你最喜歡的背景圖吧！！

【參考資料】：Grid by Example