CSS Grid 布局入門

03-01

Grid 布局是網站設計的基礎，CSS Grid 是創建網格布局最強大和最簡單的工具。

CSS Grid 今年也獲得了主流瀏覽器（Safari，Chrome，Firefox，Edge）的原生支持，所以我相信所有的前端開發人員都必須在不久的將來學習這項技術。

在本文中，我將儘可能快速地介紹CSS網格的基本知識。我會把你不應該關心的一切都忽略掉了，只是為了讓你了解最基礎的知識。

你的第一個 Grid 布局

CSS Grid 布局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。

下面是一個 wrapper 元素，內部包含6個 items ：

<div class="wrapper"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

要把 wrapper 元素變成一個 grid(網格)，只要簡單地把其 display 屬性設置為 grid 即可：

.wrapper { display: grid;}

但是，這還沒有做任何事情，因為我們沒有定義我們希望的 grid(網格) 是怎樣的。它會簡單地將6個 div 堆疊在一起。

我已經添加了一些樣式，但是這與 CSS Grid 沒有任何關係。

Columns(列) 和 rows(行)

為了使其成為二維的網格容器，我們需要定義列和行。讓我們創建3列和2行。我們將使用grid-template-row和grid-template-column屬性。

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px;}

正如你所看到的，我們為 grid-template-columns 寫入了 3 個值，這樣我們就會得到 3 列。我們想要得到 2 行，因此我們為 grid-template-rows 指定了2個值。

這些值決定了我們希望我們的列有多寬（ 100px ），以及我們希望行數是多高（ 50px ）。結果如下：

為了確保你能正確理解這些值與網格外觀之間的關係，請看一下這個例子。

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 100px 30px;}

請嘗試理解上面的代碼，思考一下以上代碼會產生怎樣的布局。

這是上面代碼的布局的結果：

非常好理解，使用起來也非常簡單是不是？下面我們來加大一點難度。

放置 items(子元素)

接下來你需要學習的是如何在 grid(網格) 上放置 items(子元素) 。特別注意，這裡才是體現 Grid 布局超能力的地方，因為它使得創建布局變得非常簡單。

我們使用與之前相同的 HTML 標記，為了幫助我們更好的理解，我們在每個 items(子元素) 加上了單獨的 class ：

<div class="wrapper"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div></div>

現在，我們來創建一個 3×3 的 grid(網格)：

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;}

將得到以下布局：

不知道你發現沒有，我們只在頁面上看到 3×2 的 grid(網格)，而我們定義的是 3×3 的 grid(網格)。這是因為我們只有 6 個 items(子元素) 來填滿這個網格。如果我們再加3個 items(子元素)，那麼最後一行也會被填滿。

要定位和調整 items(子元素) 大小，我們將使用 grid-column 和 grid-row 屬性來設置：

.item1 { grid-column-start: 1; grid-column-end: 4;}

我們在這裡要做的是，我們希望 item1 佔據從第一條網格線開始，到第四條網格線結束。換句話說，它將獨立佔據整行。以下是在屏幕上顯示的內容：

如果你不明白我們設置的只有 3 列，為什麼有4條網格線呢？看看下面這個圖像，我畫了黑色的列網格線：

請注意，我們現在正在使用網格中的所有行。當我們把第一個 items(子元素) 佔據整個第一行時，它把剩下的 items(子元素) 都推到了下一行。

最後，給你一個更簡單的縮寫方法來編寫上面的語法：

.item1 { grid-column: 1 / 4;}

為了確保你已經正確理解了這個概念，我們重新排列其他的 items(子元素) 。

.item1 { grid-column-start: 1; grid-column-end: 3;}.item3 { grid-row-start: 2; grid-row-end: 4;}.item4 { grid-column-start: 2; grid-column-end: 4;}

你可以嘗試在你的腦子裡過一邊上面代碼的布局效果，應該不會很難。

以下是頁面上的布局效果：

Grid 布局就是這麼簡單，當然這裡展示的是最簡單的 Grid 布局概念，還有很多概念在這裡沒講。

我的要創建的網格

我們將模仿一個經典網站布局，從非常基本的 Grid(網格) 開始：

首先，我將解釋我們需要的 HTML 和 CSS ，我已經將其分解為四個部分。一旦你了解了這些，我們將繼續進行布局試驗。

如果您對 CSS Grid 比較陌生，則可能需要瀏覽一下這篇文章：5分鐘學會 CSS Grid 布局。當然，如果你想完全掌握 CSS Grid 布局，那麼請看： CSS Grid 布局完全指南(圖解 Grid 詳細教程)，特別文章中對網格術語的解釋，可以幫助加快理解這篇文章。這篇文章討論更多的是 Grid(網格) 布局的實際應用以及靈活性。

1、HTML 結構

我們需要的第一件事是一點 HTML 。一個網格容器（將變成一個網格元素）和網格項（header, menu, content, footer）。

<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

那麼我們需要在 container 元素設置 display: grid; ，將其設置為網格容器，並指定我們需要多少行和列。這是基本的CSS：

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

我將在後面介紹內容，但是我首先讓你了解一下。

以上代碼的意思是：使用 grid-template-columns 屬性創建一個 12 列的網格，每個列都是一個單位寬度（總寬度的 1/12 ）。（愚人碼頭註：其中， repeat(12, 1fr) 意思是 12 個重複的 1fr 值。 fr 是網格容器剩餘空間的等分單位。）使用 grid-template-rows 屬性創建 3 行，第一行高度是 50px ，第二行高度是 350px 和第三行高度是 50px。最後，使用 grid-gap 屬性在網格中的網格項之間添加一個間隙。

3、添加 grid-template-areas

這個屬性被稱為網格區域，也叫模板區域，能夠讓我們輕鬆地進行布局實驗。

要將它添加到網格中，我們只需給網格容器加一個 grid-template-areas 屬性即可。語法可能有點奇怪，因為它不像其他的 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 屬性背後的邏輯是你在代碼中創建的網格可視化表示。正如你所看到的，它有 3 行 12 列，和我們在 grid-template-columns 和 grid-template-rows 中定義的正好呼應。

每行代表一行，用網格術語來說是網格軌道(Grid Track) ，每個字元（ h，m，c，f）代表一個網格單元格。愚人碼頭註：其實是網格區域(Grid Area) 名稱，你可以使用任意名稱。

四個字母中的每一個現在都形成一個矩形 grid-area 。

你可能已經猜到，我選擇了字元 h，m，c，f，是因為他們是 header, menu, content 和 footer 的首字母。當然，我可以把它們叫做任何想要的名稱，但是使用他們所描述的東西的第一個字元更加容易讓人理解。

4、給網格項設定網格區域名稱

現在我們需要將這些字元與網格中的網格項建立對應的連接。要做到這一點，我們將在網格項使用 grid-area 屬性：

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

以下是完整的布局效果：

嘗試其他布局

現在，我們開始討論 Grid(網格) 布局特性的精妙之處，因為我們可以很容易地對布局進行修改嘗試。只需修改 grid-template-areas 屬性的字元即可。舉個例子，把 menu 移到右邊：

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

修改後的布局效果：

我們可以使用點 . 來創建空白的網格單元格。

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 .」;

修改的布局效果看起來是這樣的：

現在，我建議你自己嘗試修改代碼，得到自己想要的或者文章開頭 gif 動畫演示的布局效果應該不是什麼難事。為了方便起見，我建了一個 codepen ，你可以在這裡編輯，並實時查看 Grid(網格) 布局效果。

添加響應式布局

將 Grid(網格) 布局與響應式布局結合起來，簡直就是一個殺手鐧。因為在 Grid(網格) 布局之前，僅使用 HTML 和 CSS 實現的響應式布局不可能的做到簡單而又完美。假設你想在移動設備上查看的是：標題旁邊是菜單。那麼你可以簡單地這樣做：

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

你可以看到以下效果：

請記住，所有這些更改都是使用純 CSS 完成的，不需要修改 HTML 。無論 div 標籤如何在 HTML 中是怎麼樣的順序結構，我們都可以隨意轉換。（愚人碼頭註：這點與 flexbox 類似，網格項（grid items）的源順序無關緊要。你的 CSS 可以以任何順序放置它們，這使得使用媒體查詢（media queries）重新排列網格變得非常容易。）

這被稱為結構和表現分離， Grid(網格) 布局真正做到了這點，對於 CSS 來說是一個巨大的進步。

它允許 HTML 成為它想要的樣子: 作為內容的標記。HTML 結構不再受限於樣式表現，比如不要為了實現某種布局而多次嵌套，現在這些都可以讓 CSS 來完成。

如果你錯過了 Grid(網格) 布局的最簡入門，請閱讀：5分鐘學會 CSS Grid 布局。了解更多請閱讀：CSS Grid 布局完全指南(圖解 Grid 詳細教程)，讓你體會 Grid 布局真正的強大和靈活。

如果您有任何問題，歡迎評論，我會盡我所能回答。

更多關於 CSS Grid 布局的優秀文章

5分鐘學會 CSS Grid 布局
CSS Grid 布局完全指南(圖解 Grid 詳細教程)
如何使用 CSS Grid 快速而又靈活的布局

更多關於 Flexbox 的優秀文章：

CSS3 Flexbox屬性可視化指南
Flexbox布局是如何工作的 – 用大彩圖和GIF動畫解釋
更多關於Flexbox布局如何工作的 – 用大彩圖和GIF動畫解釋
CSS3 Flexbox解決方案