摘要：簡(jiǎn)評(píng)網(wǎng)格模塊是創(chuàng)建網(wǎng)站模型的絕佳工具。如果你對(duì)網(wǎng)格完全陌生，你可能要瀏覽一下我的分鐘介紹網(wǎng)格的文章。每一行代表一行，每一個(gè)字符，，，代表一個(gè)網(wǎng)格元素。無(wú)論標(biāo)簽在標(biāo)記中是如何放置的，我們都能隨意轉(zhuǎn)換。這被稱(chēng)為源代碼的獨(dú)立性，這是的一大進(jìn)步。

簡(jiǎn)評(píng)：CSS 網(wǎng)格模塊是創(chuàng)建網(wǎng)站模型的絕佳工具。它是我嘗試過(guò)的任何其他系統(tǒng)中最快讓你體驗(yàn)布局的工具。

我們的網(wǎng)格

我們將從模仿一個(gè)經(jīng)典網(wǎng)站的非常基本的網(wǎng)格開(kāi)始：

首先，我將解釋我們需要的 HTML 和 CSS 代碼，我將之分為 4 個(gè)部分。一旦你弄明白了，我們將繼續(xù)布局試驗(yàn)。

如果你對(duì) CSS 網(wǎng)格完全陌生，你可能要瀏覽一下我的 5 分鐘介紹 CSS 網(wǎng)格的文章。

1. 標(biāo)記
首先我們需要一點(diǎn)點(diǎn) HTML 代碼。一個(gè)容器（我們把它變成網(wǎng)格的元素）和一些項(xiàng)目（標(biāo)題，菜單，內(nèi)容，頁(yè)腳）。

  
HEADER
  
MENU
  
CONTENT
  
FOOTER

2. CSS 中的基礎(chǔ)設(shè)置
然后我們需要設(shè)置我們的網(wǎng)格，并聲明我們需要多少行和列。這是我們最初的 CSS：

.container {
    display: grid;    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 5px;
}

稍后我們會(huì)添加更多代碼，但首先我想解釋一下。

上面的代碼意思是：創(chuàng)建一個(gè)有 12 列的網(wǎng)格，每列寬度為總寬度的十二分之一。創(chuàng)建三行，第一行高 50px，第二行高 350px，第三行高 50px，最后，網(wǎng)格中每個(gè)元素添加一個(gè)間隙。

3. 添加 grid-template-areas

讓我們能輕松體驗(yàn)布局的功能叫模版區(qū)域。

把它添加到網(wǎng)格中，我們只需要簡(jiǎn)單地給 container 添加一個(gè) grid-template-area 屬性即可。語(yǔ)法可能有點(diǎn)怪，因?yàn)樗幌袢魏纹渌?CSS 語(yǔ)法。就像這樣：

.container {
    display: grid;
    grid-gap: 5px;    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-template-areas:
        "h h h h h h h h h h h h"
        "m m c c c c c c c c c c"
        "f f f f f f f f f f f f";
}

grid-template-areas 屬性背后的邏輯是你在代碼中創(chuàng)建一個(gè)可視化的網(wǎng)格。你可以看到，它有 3 行、12 列。就像我們?cè)诙x grid-template-columns 和 grid-template-rows 一樣。

每一行代表一行，每一個(gè)字符（h，m，c，f）代表一個(gè)網(wǎng)格元素。

四個(gè)字符中的每一個(gè)都形成一個(gè)矩形：grid-area。

可能你已經(jīng)猜到了，我選擇的四個(gè)字符 h，m，c，f 分別代表了 header，menu，content，footer。我當(dāng)然可以把它們換成我想要的任何字符，但使用它們描述的項(xiàng)目的第一個(gè)字符顯然比較合理。

4. 把網(wǎng)格區(qū)域賦給項(xiàng)目

現(xiàn)在我們需要連接字符和網(wǎng)格中的項(xiàng)目。我們將使用 grid-area 屬性：

.header {
    grid-area: h;
}
.menu {
    grid-area: m;
}
.content {
    grid-area: c;
}
.footer {
   grid-area: f;
}

布局結(jié)果如下：

試驗(yàn)布局

現(xiàn)在終于到了我們體驗(yàn)這個(gè)功能的強(qiáng)大時(shí)候了，我們可以輕松地實(shí)驗(yàn)布局。只需要修改一下 grid-template-areas 中的字符即可。例如我們把上面的菜單移動(dòng)到右邊：

grid-template-areas:
        “h h h h h h h h h h h h”
        "c c c c c c c c c c m m”
        “f f f f f f f f f f f f”;

結(jié)果就會(huì)變成：

我們可以使用 . 來(lái)創(chuàng)建空白網(wǎng)格：

grid-template-areas:
        “. h h h h h h h h h h .”
        "c c c c c c c c c c m m”
        “. f f f f f f f f f f .”;

看起來(lái)是這樣的：

現(xiàn)在我推薦你看一下我的 CSS 網(wǎng)格課程，你可以自己實(shí)驗(yàn)代碼。

添加響應(yīng)能力

把這個(gè)和響應(yīng)能力相結(jié)合簡(jiǎn)直就是一大殺器，以前這是不可能只用 HTML 和 CSS 就能達(dá)到這種效果的。假設(shè)當(dāng)你用手機(jī)瀏覽時(shí)想讓菜單放在標(biāo)題旁邊，你可以這樣做：

@media screen and (max-width: 640px) {
    .container {
        grid-template-areas:
            "m m m m m m h h h h h h"
            "c c c c c c c c c c c c"
            "f f f f f f f f f f f f";
    }
}

結(jié)果看起來(lái)像這樣：

GIF 鏈接（總是上傳失敗，也是醉了）

記住這些是用純 CSS 代碼完成的，不需要改動(dòng) HTML。無(wú)論 div 標(biāo)簽在標(biāo)記中是如何放置的，我們都能隨意轉(zhuǎn)換。

這被稱(chēng)為源代碼的獨(dú)立性，這是 CSS 的一大進(jìn)步。

它讓 HTML 回歸本職工作：標(biāo)記內(nèi)容。至于樣式，那是 CSS 的工作。

原文鏈接：How to prototype websites quickly with CSS Grid