[譯] 帶你入門 CSS Grid 佈局

前言

三月中旬的時候，有一個對於 CSS 開發者來講很重要的消息，最新版的 Firefox 和 Chrome 已經正式支 CSS Grid 這一新特性啦。沒錯：咱們如今就能夠在最流行的兩大瀏覽器上玩轉 CSS Grid 啦 ~(≧▽≦)/~

爲何 CSS Grid 很重要？ 咱們爲何要關注它？

由於 CSS Grid 佈局是 Web 的第一個真正的佈局系統。它的目的是將內容組織成行列的形式，最終使開發人員能高度控制咱們眼前屏幕上頁面的顯示效果。這意味着咱們終於能夠摒棄多年的各類 hack 和 trick 了，CSS Grid 佈局不只僅可使複雜的佈局和精美的排版成爲可能，並且還可使其變的乾淨利落可維護。

經過使用 CSS Grid，Web開發變得更加簡潔且對開發者更加友好了 :-D 。那麼 Grid 是如何工做的咩？有些教程事無鉅細，可是我認爲咱們應該從最基礎的知識學起。下面咱們將會實現一個比較簡單的小例子，即在一個頁面上放置一串字母。

在開始前，咱們先添加幾個標籤：

<div class="wrapper">
    <div class="letter">
        A
    </div>
    <div class="letter">
        B
    </div>
</div>複製代碼

首先，咱們使用 font-size 和 color 設置這些字母的字體和顏色，而後使用諸如 align-items 和 justify-content 之類的 flexbox 屬性將其居中。CSS Grid 沒有替換 flexbox 屬性，儘量保留了它們的功能。咱們甚至能夠將這些屬性與 CSS Grid 結合。可是如今先讓咱們回到這個 demo：

在上面這個例子中，一個大的 div 又包含着兩個 div ，它們默認屬性是 display: block。接下來咱們用 Grid layout 設置父類元素：

.wrapper {
  display: grid;
}複製代碼

在這我放一下完整的 HTML 和 CSS 代碼：

<div class="wrapper">
  <div class="letter">
    A
  </div>
  <div class="letter">
    B
  </div>
</div>複製代碼

body,html {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: grid;
}

.letter {
  background-color: #0069b3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-size: 70px;
  color: white;
  line-height: 1;
  font-family: 'hobeaux-rococeaux-background', Helvetica;
  font-weight: 200;
  cursor: pointer;
  transition: all .3s ease;
}複製代碼

則顯示結果以下：

如今你可能看到彷佛沒什麼變化。爲何這樣呢？這不像設置 display: inline-block; 或者 display: inline; ，當咱們把佈局設爲網格佈局是不會發生很明顯的變化。事實上，想讓咱們的 grid 起做用，首先須要給它設置一個確切的行數和列數。在這個例子中，咱們可讓兩個字母並排排列：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1px;
  background-color: black;
}複製代碼

讓咱們拆解一下上面的代碼。首先咱們用 grid-template-columns 建立了一個兩列的網格，若是你之前沒見過這樣的，那 1fr 可能看起來比較奇怪 ，但它是有效的 CSS 單元，能夠將每一列列爲咱們網格的一小部分。在這個例子中，意味着讓兩列等寬。

效果以下：

看見效果了就開心了吧，哈哈。可是看到兩列之間的黑線了嗎？這是 wrapper 勾勒的每一個字母 div 的背景，由於咱們將 grid-column-gap 設置爲了 1px。一般，咱們會設置更大的距離，尤爲是對於兩個相鄰的文本框來講。但在本例中，1px 就足夠了。

若是咱們再添加兩個新字母會怎樣呢？咱們應該怎麼改變佈局？

<div class='wrapper'>
  <div class='letter'>
    A
  </div>
  <div class='letter'>
    B
  </div>
  <div class='letter'>
    C
  </div>
  <div class='letter'>
    D
  </div>
</div>複製代碼

看吧，加兩個字母以後也沒啥神奇的效果。加兩個字母對網格沒什麼影響，爲何呢？由於咱們已經將其設置成了兩列，因此這兩個字母的 div 直接被放在了它們下面，而且正好是 1fr寬：

可是如今我有一個疑問啊，爲啥字母 A、C 之間以及 B、D 之間沒有 1px 的距離╭(╯^╰)╮
由於 grid-column-gap 只用於列，咱們剛纔作的是在網格佈局中增長了一行。那就必須使用 grid-row-gap 才能看到想要的效果：

.wrapper {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  /* other styles go here */
  /* we could have also used the shorthand `grid-gap` */
}複製代碼

如今咱們已經建立好了一個一行一列的網格佈局，因此接下來咱們就得改變標記了。可是咱如今再挖掘下列的好玩的地方。若是給 grid-template-columns 屬性添加另外一個值會有啥變化？像這樣：

.wrapper {
 grid-template-columns: 1fr 1fr 1fr;
}複製代碼

啊哈，這就添加了一個新的列啊。咱們如今也能夠清晰地看見 wrapper 的背景，由於如今那沒東西顯示：

若是咱們改變 fr，那一個非對稱的網格佈局就搞出來了。假如咱們想讓網格的第一列是其餘兩列的三倍：

這會使A和D兩列的寬度大於其餘兩列：

好玩吧？咱們不必在擔憂負邊距或者網格列的完美百分比。咱們能夠輕鬆地作很複雜的網格佈局，而不用像之前那樣用數學來算...
如今咱們只須要給 grid-template-columns 屬性添加一個新的值，一個網格列就奇蹟般地出現了。

你可能會問，那=響應式網格怎麼實現？那其實也很簡單。好比咱們默認想要顯示爲 2 列，若是屏幕爲 500px 的時候咱們想讓其顯示爲 3 列，若是屏幕再大點，咱們要4列。只須要這樣寫：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;

  @media screen and (min-width: 500px) {
    grid-template-columns: 1fr 1fr 1fr;
  }

  @media screen and (min-width: 800px) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}複製代碼

確保在你能用電腦在新窗口打開下面這個 Demo 連接-Demo，來試試改變瀏覽器窗口大小，看看響應式效果。

grid-template-columns 屬性比本文展現的要更復雜，可是本文是很好的一個起點。接下來咱們會學習 CSS Grid 中真正的革命性意義的屬性： grid-template-rows

看下面的一小段代碼，結合咱們已經學的知識，搞明白這個新屬性能幹啥：

.wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-template-rows: 1fr 3fr;
}複製代碼

咱們如今能夠設置行高之間的關係。若是咱們把前面的行高設成 1fr ，最後一個則設置爲 3fr，這意味着第二行的行高是第一行的3倍：

這可能看起來很簡單，之前咱們從沒真正作到過這一點。咱們老是不得不在一個特定元素上設置最小高度或者改變類名。咱們之前從沒以如今這樣的方式建立過行之間的關係，這就是 CSS Grid 強大之處。

有了這些小知識和一些新屬性，咱們能夠建立很是複雜的佈局，不對稱網格和響應式網格只是冰山一角。目前爲止，只是對 CSS Grid 的初探，還有不少沒有談到的。可是我以爲 Jen Simmons 在寫 Grid 的時候描述的最好：

咱們要一直探索 CSS Grid，直到搞清楚它想作的是什麼，它能勉強作什麼和它作不了什麼。設計師可能永遠不會學 CSS 的代碼，可是要足夠了解 CSS 才能更好地理解咱們的藝術媒介（artistic medium）。

固然，上面的代碼起初看起來會有些奇怪。可是我想表達的意思是：咱們再也不須要使用臃腫的 CSS 框架，也不用管一大堆繁瑣的佈局。這就是 CSS Grid 真正讓我興奮的地方，它讓咱們以一種全新的方式看界面的顯示。

咱們不只須要學習一大堆新屬性，還要從新思考咱們之前所學的東西。因此 CSS Grid 不只僅是一個規範，它自己就是一個奇怪的哲學。

讓咱們一塊兒來探索吧！

瀏覽器支持狀況：

綠色表示在列出的版本（及以上）的徹底支持。黃色表示部分支持。紅色表示不支持。有關完整的瀏覽器支持詳情，請參閱 Caniuse.

相關學習資源連接：

• Jen Simmons
• Rachel Andrew
• Grid Inspector Tools in Firefox is super handy
• Complete Guide to Grid

 

原文：Getting Started with CSS Grid
做者：ROBIN RENDLE

歡迎你們在評論區留下你的想法和感覺！
歡迎你們加入學習交流QQ羣：637481811

---

微信公衆號： LeviDing

本文首發於個人 我的網站 LeviDing 和微信公衆號 更多內容歡迎關注個人我的網站和公衆號。