帶你入門 CSS Grid 布局

coordinate35 發布于2019-08-01 17:04 / 618人閱讀

摘要：接下來我們用設置父類元素在這我放一下完整的和代碼則顯示結果如下現在你可能看到似乎沒什么變化。只需要這樣寫確保在你能用電腦在新窗口打開下面這個鏈接，來試試改變瀏覽器窗口大小，看看響應式效果。黃色表示部分支持。

前言

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

為什么 CSS Grid 很重要？

因為 CSS Grid 布局是 Web 的第一個真正的布局系統。它的目的是將內容組織成行列的形式，最終使開發人員能高度控制我們眼前屏幕上頁面的顯示效果。這意味著我們終于可以摒棄多年的各種 hack 和 trick 了，CSS Grid 布局不僅僅可以使復雜的布局和精美的排版成為可能，而且還可以使其變的干凈利落可維護。

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

在開始前，我們先添加幾個標簽：

首先，我們使用 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 代碼：

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 直接被放在了它們下面，并且正好是 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

歡迎大家在評論區留下你的想法和感受！

歡迎大家關注知乎專欄：全棧成長之路

文章保質保量 (づ￣3￣)づ╭?～

也歡迎大家加入學習交流QQ群：637481811

本文首發于我的 個人網站 LeviDing ，更多內容歡迎關注我的個人網站。
歡迎掃描上方二維碼關注 公眾號: LeviDing 訂閱實時動態。

GPU云服務器云服務器 css布局 css布局教程學習css布局布局入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50924.html

帶你入門 CSS Grid 布局

摘要：接下來我們用設置父類元素在這我放一下完整的和代碼則顯示結果如下現在你可能看到似乎沒什么變化。只需要這樣寫確保在你能用電腦在新窗口打開下面這個鏈接，來試試改變瀏覽器窗口大小，看看響應式效果。黃色表示部分支持。 showImg(https://segmentfault.com/img/remote/1460000010000550); 前言三月中旬的時候，有一個對于 CSS 開發者來說很...

zhaot 2019-08-29 12:53 評論0 收藏0
翻譯 | CSS網格（CSS Grid）布局入門

摘要：瀏覽器兼容性網格布局從開始收到支持，微軟在會更新對網格布局的支持。微軟的瀏覽器和有一種比較舊的實現，所以有不少限制，我們會簡單介紹新的實現方式和老的實現方式之間的區別，這樣你能知道如何規避他們。原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 譯者：華翔校對者：珂珂、干干翻譯 | CSS網格（CSS Grid）布局入...

Ashin 2019-08-29 13:18 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0
css grid布局入門

摘要：簡介網格布局又稱網格，是一種二維網格布局系統。在處理網頁布局方面一直做的不是很好。網格容器中的所有子元素就會自動變成網格項目網格線組成網格線的分界線。簡介 CSS網格布局（又稱網格），是一種二維網格布局系統。CSS在處理網頁布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動)，position（定位）和inline-block（行內塊）布局，但是...

wzyplus 2019-08-29 17:06 評論0 收藏0