CSS Grid 初識(shí)

xingqiba 發(fā)布于2019-08-29 12:52 / 529人閱讀

摘要：網(wǎng)格是繼之后又一非常重要的布局方法。目前，瀏覽器的最新版本已經(jīng)開始支持它了。說在前面與的區(qū)別是一維的，是二維的。定義列隨后，我們需要對(duì)列進(jìn)行聲明。通過擴(kuò)展關(guān)鍵字，意味著從這個(gè)元素應(yīng)該開始的位置擴(kuò)展幾列。

CSS Grid (CSS網(wǎng)格) 是繼 Flexbox之后又一非常重要的布局方法。目前，Chrome Firefox Safari 瀏覽器的最新版本已經(jīng)開始支持它了。

本篇文章，我們通過實(shí)現(xiàn)如下布局的照片墻的例子來學(xué)習(xí)CSS Grid。

說在前面：FlexBox 與 CSS Grid 的區(qū)別？

Flexbox是一維的， CSS Grid是二維的。你想想，使用Flexbox的時(shí)候你需要通過定義flex-direction: row | column來決定布局方向。而CSS Grid可以行、列布局。

效果分析

首先，我們來分析一下最后的效果。我們把Bootstrap的網(wǎng)格系統(tǒng)搬到腦袋中，可以看到它是由4行4列組成的：

效果實(shí)現(xiàn)

首先，和Flexbox一樣，我們需要定義一個(gè)Grid容器，并且通過display: grid聲明使用grid布局方式。

定義列

隨后，我們需要對(duì)列進(jìn)行聲明。通過grid-template-columns屬性，以下方式定義了一個(gè)4列，每列200px的網(wǎng)格系統(tǒng)。

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

一種更簡(jiǎn)單的寫法是：

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

如果你并不想定義具體的數(shù)值，而是想每列的寬度按一行長(zhǎng)度的占比來定義的話，可以使用Grid新引入的fr單位。fr是fraction(分?jǐn)?shù))的意思，也就是說你定義的就是分子，所有你定義的加起來就是分母。比如一整行是900px, 1fr 2fr就代表第一列占據(jù)1/3,第二列占據(jù)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;
}

    1
    2
    3
    4
    5
    6

定義行

當(dāng)一行占滿之后會(huì)自動(dòng)切換到下一行。沒有特別需要的話，你不用定義它。
不過像我們這里需要定義每一行的高度。定義行的方式也與前面講的定義列的方式相似，使用grid-template-rows進(jìn)行定義:

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

有一點(diǎn)比較尷尬的是，我們往往不知道每一塊的內(nèi)容是多少，有時(shí)候內(nèi)容的高度會(huì)溢出定義的高度，不過不用擔(dān)心，你可以使用minmax(min, max)使高度更靈活。

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

跨行列

以上，我們就定義好了我們網(wǎng)格系統(tǒng)的行列了。

在我們的效果圖中，我們看到某些元素是占據(jù)了不止一行或者一列的，我們可以通過給每個(gè)元素(grid item)設(shè)置grid-column-start, grid-column-end來定義每一個(gè)元素開始和結(jié)束的地方。

灰色底色的數(shù)字呢，就代表著列。比如你想你的第一個(gè)元素橫跨兩列，那么這個(gè)元素從1開始，橫跨兩列，到3結(jié)束：

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

這樣寫，如果是后面的元素，計(jì)算它的開始位置實(shí)在不容易，因此你可以采用一種更現(xiàn)代的寫法。通過span(擴(kuò)展)關(guān)鍵字，意味著從這個(gè)元素應(yīng)該開始的位置擴(kuò)展幾列。

grid-column-start: span 2;

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

最后，給每一個(gè)元素定義它應(yīng)該占據(jù)的行列:

        .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