3 分鐘上手 CSS Grid 佈局

CSS Grid 佈局是 CSS 中最強大的佈局系統。與 flexbox 的一維佈局系統不同，CSS Grid 佈局是一個二維佈局系統，也就意味着它可以同時處理列和行。通過將 CSS 規則應用於 父元素 (成爲 Grid Container 網格容器)和其 子元素（成爲 Grid Items 網格項），你就可以輕鬆使用 Grid (網格) 佈局。

基礎知識

截至2017年3月，許多瀏覽器都提供了對 CSS Grid 的原生支持，而且無需加瀏覽器前綴：Chrome（包括 Android ），Firefox，Edge，Safari（包括iOS）和 Opera 。 另一方面，Internet Explorer 10和11支持它，但是是一個過時的語法實現。 現在是時候使用 Grid 佈局網頁了！

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

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

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

您的第一個 Grid 佈局

---

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

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

HTML 代碼:

<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 即可：

CSS 代碼:

.wrapper {
    display: grid;
}

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

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

Columns(列) 和 rows(行)

---

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

CSS 代碼:

.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 ）。 結果如下：

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

CSS 代碼:

.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(網格)：

CSS 代碼:

.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 屬性來設置：

CSS 代碼:

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

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

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

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

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

CSS 代碼:

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

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

CSS 代碼:

.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 佈局系統中還有更多強大靈活的特性。

這裏給大家分享一個小福利，在線自動生成CSS Grid Source Code 的在線生成器 ： CSS Grid Geneartor

參考資料：

• https://www.html.cn/archives/8506
• https://www.html.cn/archives/8512
• https://www.html.cn/archives/8510