CSS Grid構(gòu)建圣杯布局

quasiceo 2016-08-03

展開全文

小編推薦：掘金是一個高質(zhì)量的技術(shù)社區(qū)，從 ECMAScript 6 到 Vue.js，性能優(yōu)化到開源類庫，讓你不錯過前端開發(fā)的每一個技術(shù)干貨。各大應(yīng)用市場搜索「掘金」即可下載APP，技術(shù)干貨盡在掌握中。

CSS 網(wǎng)格布局模塊，雖然現(xiàn)在仍處于編譯者的草案之中但是即將定稿。我們現(xiàn)在可以在一些瀏覽器中進行測試并可以檢測其潛在的bug。

有關(guān)于CSS Grid布局模塊更多的教程，可以點擊這里閱讀。

CSS 網(wǎng)格布局是真的很復(fù)雜，相較于 Flexbox 更是如此。它具有17個新屬性并且在如何使用CSS書寫方面介紹了很多新概念。為了嘗試如何使用縈繞在我腦海中的這些新規(guī)范，我決定創(chuàng)建一個圣杯布局嘗試新規(guī)范工作原理。

什么是圣杯布局？

圣杯布局是一種包括頁眉、頁腳和一個包含兩個左右邊欄的主內(nèi)容區(qū)的網(wǎng)頁布局。其布局遵循以下規(guī)則:

有固定寬度側(cè)邊欄和自適應(yīng)主內(nèi)容區(qū)域
中間一列應(yīng)該在標(biāo)記中最先出現(xiàn)，早于兩個側(cè)邊欄(但在頁眉后)
不管三列中包含的是什么，都應(yīng)該具有相同的高度
頁腳應(yīng)該總是處于瀏覽器視窗的底部，即使內(nèi)容不能填滿視區(qū)高度
布局應(yīng)該是響應(yīng)的，在小視窗中所有的部分應(yīng)該在一列中顯示

大家都知道如果不使用hacks這是很難用CSS來實現(xiàn)的。

CSS Grid解決方案

下面是我用 CSS 網(wǎng)格布局想出的的解決方案。第一，標(biāo)記--

<body class="hg">  
    <header class="hg__header">Title</header>
    <main class="hg__main">Content</main>
    <aside class="hg__left">Menu</aside>
    <aside class="hg__right">Ads</aside>
    <footer class="hg__footer">Footer</footer>
</body>

CSS樣式的代碼只有 31 行：

.hg__header {
    grid-area: header;
}
.hg__footer {
    grid-area: footer;
}
.hg__main {
    grid-area: main;
}
.hg__left {
    grid-area: navigation;
}
.hg__right {
    grid-area: ads;
}
.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 100px 
                        1fr
                        30px;
    min-height: 100vh;
}
@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
    }
}

Grid構(gòu)建圣杯布局

把它分解

如前所述，CSS 網(wǎng)格布局可能非常復(fù)雜。然而，創(chuàng)建此布局我只用 17 個新屬性中的4個:

grid-area
grid-template-areas
grid-template-columns
grid-template-rows

使用這些 CSS 網(wǎng)格屬性創(chuàng)建圣杯布局可以分解成五個步驟。

定義網(wǎng)格

我們想要做的第一件事是定義網(wǎng)格區(qū)域，創(chuàng)建網(wǎng)格時我們可以引用它們的別名。這里用到的是grid-area屬性。

.hg__header {
    grid-area: header;
}
.hg__footer {
    grid-area: footer;
}
.hg__main {
    grid-area: main;
}
.hg__left {
    grid-area: navigation;
}
.hg__right {
    grid-area: ads;
}

然后，使用grid-template-areas屬性，我們可以真正直觀的指定網(wǎng)格的布局。grid-template-areas屬性接受一個以空格分隔的字符串。每個字符串表示一行，利用每個字符串，我們就可以獲取以一個空格分隔的網(wǎng)格區(qū)域列表值，每一個值均定義網(wǎng)格區(qū)域的一列。所以如果我們要跨越兩列區(qū)域，我們需要定義兩次。

在我們圣杯布局中有 3 列 3 行。頁眉和頁腳行跨越 3 列，其他跨越 1 列。

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
}

利用此標(biāo)記我們可以得到以下結(jié)果。

Grid構(gòu)建圣杯布局

定義列寬

接下來，我們想要定義列的寬度。這里我們利用grid-template-columns屬性定義列的寬度。此屬性接受一個空格分隔的寬度列表，每一個值均表示網(wǎng)格中的一列。因為在我們的布局中有3列，我們可以指定3個寬度:

grid-template-columns: [column 1 width]  [column 2 width]  [column 3 width];

對于圣杯布局，我們想要將2個側(cè)欄的寬度設(shè)置為150px。

.hg {
    grid-template-columns: 150px  [column 2 width] 150px;
}

對于中間列，我們想要其占據(jù)其余的全部空間。這里我們可以使用新單位fr。這個單位表示網(wǎng)格中剩余的全部空間。在我們的例子表示網(wǎng)格減去300px(兩個側(cè)邊欄的寬度)后的寬度。

.hg {
    grid-template-columns: 150px 1fr 150px;
}

設(shè)置完網(wǎng)格列之后, 布局看起來如下所示-

Grid構(gòu)建圣杯布局

定義行高

接下來，我們就要定義行的高度了。類似于我們用grid-template-columns屬性定義列的寬度，我們使用grid-template-rows屬性定義行高。此屬性也是接受以空格分隔的一行高度列表。雖然我們可以把它寫在同一行中，但是我認(rèn)為為了使其更加清晰直觀將一值寫一行。

.hg {
    grid-template-rows: 100px
                        1fr
                        30px;
}

所以布局中的頁眉高度為100px，頁腳高度為30px，中間一行(主要內(nèi)容和兩個側(cè)邊欄)占據(jù).hg元素中其余的可用空間。

Grid構(gòu)建圣杯布局

定位頁腳

在圣杯布局中，即使頁面內(nèi)容十分稀疏，我們也想要頁腳總是處于視窗的底部。要實現(xiàn)這一目標(biāo)，我們可以在.hg元素中設(shè)置一個最小的視窗高度。

.hg {
    min-height: 100vh;
}

因為我們將中間一列的寬度和高度設(shè)置為占據(jù).hg元素的剩余空間，所以它就會適應(yīng)于整個屏幕。

Grid構(gòu)建圣杯布局

響應(yīng)式

最后，我們想要布局具有響應(yīng)性。在較小的設(shè)備上所有網(wǎng)格項應(yīng)該一個接一個的以單列顯示。為此，我們需要重新定義之前的-grid-template-areas、grid-template-columns和grid-template-rows3個屬性.

首先，我們想要所有的網(wǎng)格項按照特定順序在一列中顯示:

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
    }
}

接下來，我們想要所有的網(wǎng)格項跨越整個寬度:

@media screen and (max-width: 600px) {
    .hg {
        grid-template-columns: 100%;
    }
}

最后，我們需要重置每個行的高度。除了main之外的所有行都有一個已定義的高度:

@media screen and (max-width: 600px) {
    .hg {
        grid-template-rows: 100px /* Header */
                            50px /* Navigation */
                            1fr /* Main Content */
                            50px /* Ads */
                            30px; /* Footer */
    }
}

Grid構(gòu)建圣杯布局

就是這樣！你可以看看這里的演示以及源碼(nb:你可能需要在瀏覽器中啟用網(wǎng)絡(luò)功能才可以看到)。

瀏覽器支持

本文根據(jù)@Ire Aderinokun的《The Holy Grail Layout with CSS Grid》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉(zhuǎn)載此譯文，需注明英文出處：http:///holy-grail-layout-css-grid/。