簡(jiǎn)評(píng)：CSS 網(wǎng)格模塊是創(chuàng)建網(wǎng)站模型的絕佳工具晕讲。它是我嘗試過的任何其他系統(tǒng)中最快讓你體驗(yàn)布局的工具矢洲。
我們的網(wǎng)格
我們將從模仿一個(gè)經(jīng)典網(wǎng)站的非炒都祝基本的網(wǎng)格開始：
首先，我將解釋我們需要的 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)容于置，頁腳）。
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
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 屬性即可汹忠。語法可能有點(diǎn)怪，因?yàn)樗幌袢魏纹渌?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)建一個(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ì)變成：
我們可以使用.來創(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)格課程，你可以自己實(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é)果看起來像這樣：
記住這些是用純 CSS 代碼完成的鹏控，不需要改動(dòng) HTML致扯。無論 div 標(biāo)簽在標(biāo)記中是如何放置的，我們都能隨意轉(zhuǎn)換当辐。
這被稱為源代碼的獨(dú)立性抖僵，這是 CSS 的一大進(jìn)步。
它讓 HTML 回歸本職工作：標(biāo)記內(nèi)容瀑构。至于樣式，那是 CSS 的工作刨摩。
英文原文：How to prototype websites quickly with CSS Grid
舊文推薦：
節(jié)約 Web 開發(fā)時(shí)間的 67 個(gè)工具寺晌、庫和資源
StackBlitz - 針對(duì) Web 開發(fā)者的在線 IDE
55 個(gè)頂尖 Web 設(shè)計(jì)與開發(fā)網(wǎng)站
