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

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

我們的網(wǎng)格

我們將從模仿一個經(jīng)典網(wǎng)站的非?；镜木W(wǎng)格開始：

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

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

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

  
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;
}

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

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

3. 添加 grid-template-areas

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

把它添加到網(wǎng)格中，我們只需要簡單地給 container 添加一個 grid-template-area 屬性即可。語法可能有點怪，因為它不像任何其他的 CSS 語法。就像這樣：

.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)建一個可視化的網(wǎng)格。你可以看到，它有 3 行、12 列。就像我們在定義 grid-template-columns 和 grid-template-rows 一樣。

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

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

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

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

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

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

布局結(jié)果如下：

試驗布局

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

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é)果就會變成：

我們可以使用 . 來創(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 .”;

看起來是這樣的：

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

添加響應(yīng)能力

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

@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é)果看起來像這樣：

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

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

這被稱為源代碼的獨立性，這是 CSS 的一大進步。

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

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