带你入门 CSS Grid 布局
前言
三月中旬的時候，有一個對于 CSS 開發(fā)者來說很重要的消息，最新版的 Firefox 和 Chrome 已經(jīng)正式支 CSS Grid 這一新特性啦。沒錯：我們現(xiàn)在就可以在最流行的兩大瀏覽器上玩轉(zhuǎn) CSS Grid 啦 ~(≧▽≦)/~
為什么 CSS Grid 很重要？
因為 CSS Grid 布局是 Web 的第一個真正的布局系統(tǒng)。它的目的是將內(nèi)容組織成行列的形式，最終使開發(fā)人員能高度控制我們眼前屏幕上頁面的顯示效果。這意味著我們終于可以摒棄多年的各種 hack 和 trick 了，CSS Grid 布局不僅僅可以使復(fù)雜的布局和精美的排版成為可能，而且還可以使其變的干凈利落可維護(hù)。
通過使用 CSS Grid，Web開發(fā)變得更加簡潔且對開發(fā)者更加友好了 :-D 。那么 Grid 是如何工作的咩？有些教程事無巨細(xì)，但是我認(rèn)為我們應(yīng)該從最基礎(chǔ)的知識學(xué)起。下面我們將會實現(xiàn)一個比較簡單的小例子，即在一個頁面上放置一串字母。
在開始前，我們先添加幾個標(biāo)簽：
<div class="wrapper"><div class="letter">A</div><div class="letter">B</div> </div>首先，我們使用 font-size 和 color 設(shè)置這些字母的字體和顏色，然后使用諸如 align-items 和 justify-content 之類的 flexbox 屬性將其居中。CSS Grid 沒有替換 flexbox 屬性，盡可能保留了它們的功能。我們甚至可以將這些屬性與 CSS Grid 結(jié)合。但是現(xiàn)在先讓我們回到這個 demo：
在上面這個例子中，一個大的 div 又包含著兩個 div ，它們默認(rèn)屬性是 display: block。接下來我們用 Grid layout 設(shè)置父類元素：
.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; }則顯示結(jié)果如下：
現(xiàn)在你可能看到似乎沒什么變化。為什么這樣呢？這不像設(shè)置 display: inline-block; 或者 display: inline; ，當(dāng)我們把布局設(shè)為網(wǎng)格布局是不會發(fā)生很明顯的變化。事實上，想讓我們的 grid 起作用，首先需要給它設(shè)置一個確切的行數(shù)和列數(shù)。在這個例子中，我們可以讓兩個字母并排排列：
.wrapper {display: grid;grid-template-columns: 1fr 1fr;grid-column-gap: 1px;background-color: black; }讓我們拆解一下上面的代碼。首先我們用 grid-template-columns 創(chuàng)建了一個兩列的網(wǎng)格，如果你以前沒見過這樣的，那 1fr 可能看起來比較奇怪 ，但它是有效的 CSS 單元，可以將每一列列為我們網(wǎng)格的一小部分。在這個例子中，意味著讓兩列等寬。
效果如下：
看見效果了就開心了吧，哈哈。但是看到兩列之間的黑線了嗎？這是 wrapper 勾勒的每個字母 div 的背景，因為我們將 grid-column-gap 設(shè)置為了 1px。通常，我們會設(shè)置更大的距離，尤其是對于兩個相鄰的文本框來說。但在本例中，1px 就足夠了。
如果我們再添加兩個新字母會怎樣呢？我們應(yīng)該怎么改變布局？
<div class='wrapper'><div class='letter'>A</div><div class='letter'>B</div><div class='letter'>C</div><div class='letter'>D</div> </div>看吧，加兩個字母之后也沒啥神奇的效果。加兩個字母對網(wǎng)格沒什么影響，為什么呢？因為我們已經(jīng)將其設(shè)置成了兩列，所以這兩個字母的 div 直接被放在了它們下面，并且正好是 1fr寬：
但是現(xiàn)在我有一個疑問啊，為啥字母 A、C 之間以及 B、D 之間沒有 1px 的距離╭(╯^╰)╮
因為 grid-column-gap 只用于列，我們剛才做的是在網(wǎng)格布局中增加了一行。那就必須使用 grid-row-gap 才能看到想要的效果：
現(xiàn)在我們已經(jīng)創(chuàng)建好了一個一行一列的網(wǎng)格布局，所以接下來我們就得改變標(biāo)記了。但是咱現(xiàn)在再挖掘下列的好玩的地方。如果給 grid-template-columns 屬性添加另一個值會有啥變化？像這樣：
.wrapper {grid-template-columns: 1fr 1fr 1fr; }啊哈，這就添加了一個新的列啊。我們現(xiàn)在也可以清晰地看見 wrapper 的背景，因為現(xiàn)在那沒東西顯示：
如果我們改變 fr，那一個非對稱的網(wǎng)格布局就搞出來了。假如我們想讓網(wǎng)格的第一列是其他兩列的三倍：
這會使A和D兩列的寬度大于其他兩列：
好玩吧？我們沒必要在擔(dān)心負(fù)邊距或者網(wǎng)格列的完美百分比。我們可以輕松地做很復(fù)雜的網(wǎng)格布局，而不用像以前那樣用數(shù)學(xué)來算...
現(xiàn)在我們只需要給 grid-template-columns 屬性添加一個新的值，一個網(wǎng)格列就奇跡般地出現(xiàn)了。
你可能會問，那=響應(yīng)式網(wǎng)格怎么實現(xiàn)？那其實也很簡單。比如我們默認(rèn)想要顯示為 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，來試試改變?yōu)g覽器窗口大小，看看響應(yīng)式效果。
grid-template-columns 屬性比本文展示的要更復(fù)雜，但是本文是很好的一個起點。接下來我們會學(xué)習(xí) CSS Grid 中真正的革命性意義的屬性： grid-template-rows
看下面的一小段代碼，結(jié)合我們已經(jīng)學(xué)的知識，搞明白這個新屬性能干啥：
.wrapper {display: grid;grid-template-columns: 3fr 1fr 1fr;grid-template-rows: 1fr 3fr; }我們現(xiàn)在可以設(shè)置行高之間的關(guān)系。如果我們把前面的行高設(shè)成 1fr ，最后一個則設(shè)置為 3fr，這意味著第二行的行高是第一行的3倍：
這可能看起來很簡單，以前我們從沒真正做到過這一點。我們總是不得不在一個特定元素上設(shè)置最小高度或者改變類名。我們以前從沒以現(xiàn)在這樣的方式創(chuàng)建過行之間的關(guān)系，這就是 CSS Grid 強(qiáng)大之處。
有了這些小知識和一些新屬性，我們可以創(chuàng)建非常復(fù)雜的布局，不對稱網(wǎng)格和響應(yīng)式網(wǎng)格只是冰山一角。目前為止，只是對 CSS Grid 的初探，還有很多沒有談到的。但是我覺得 Jen Simmons 在寫 Grid 的時候描述的最好：
我們要一直探索 CSS Grid，直到搞清楚它想做的是什么，它能勉強(qiáng)做什么和它做不了什么。設(shè)計師可能永遠(yuǎn)不會學(xué) CSS 的代碼，但是要足夠了解 CSS 才能更好地理解我們的藝術(shù)媒介（artistic medium）。
當(dāng)然，上面的代碼起初看起來會有些奇怪。但是我想表達(dá)的意思是：我們不再需要使用臃腫的 CSS 框架，也不用管一大堆繁瑣的布局。這就是 CSS Grid 真正讓我興奮的地方，它讓我們以一種全新的方式看界面的顯示。
我們不僅需要學(xué)習(xí)一大堆新屬性，還要重新思考我們以前所學(xué)的東西。所以 CSS Grid 不僅僅是一個規(guī)范，它本身就是一個奇怪的哲學(xué)。
讓我們一起來探索吧！
瀏覽器支持情況
綠色表示在列出的版本（及以上）的完全支持。黃色表示部分支持。紅色表示不支持。有關(guān)完整的瀏覽器支持詳情，請參閱 Caniuse.
相關(guān)學(xué)習(xí)資源鏈接
Jen Simmons
Rachel Andrew
Grid Inspector Tools in Firefox is super handy
Complete Guide to Grid
?
原文：Getting Started with CSS Grid
作者：ROBIN RENDLE
歡迎大家在評論區(qū)留下你的想法和感受！
歡迎大家關(guān)注知乎專欄：全棧成長之路
文章保質(zhì)保量 (づ￣3￣)づ╭?～
也歡迎大家加入學(xué)習(xí)交流QQ群：637481811
本文首發(fā)于我的 個人網(wǎng)站 LeviDing ，更多內(nèi)容歡迎關(guān)注我的個人網(wǎng)站。
歡迎掃描上方二維碼關(guān)注 公眾號: LeviDing 訂閱實時動態(tài)。
總結(jié)
以上是生活随笔為你收集整理的带你入门 CSS Grid 布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 9.1-全栈Java笔记: 容器泛型—认
- 下一篇： C语言精要总结-指针系列（二）