大多數主流瀏覽器都支持了 CSS Grid 佈局。自然地，規範也成為了大小會議的熱門話題之一。在參與了一些關於 Grid 佈局和漸進增強的討論後，我認為使用它還是有很大的不確定性。我聽到一些很有趣的問題和發言，我想在這篇文章中討論討論。
1、我什麼時候可以開始使用 CSS grid 佈局？
2、還需要好幾年我才能在實際項目中使用 CSS Grid 佈局，這太扯淡了。
3、為了使用 CSS Grid 佈局，網站需要 Modernizr 嗎？
4、如果我現在想使用 CSS Grid，那我需要為我的網站做兩三個版本。
5、漸進增強在理論上聽起來不錯，但我認為在實際項目中不可能實現。
6、漸進增強的成本是多少？
這些都是很好的問題，並不是所有的都很容易回答，但我很樂於分享我的一些方法。CSS Grid 佈局模塊是響應式設計中最令人激動的發展之一。如果它對我們和我們的項目有意義，我們應儘快去用好它。
漸進增強佈局
示例網站的主頁，具有可調節的滑塊，可在不同的佈局技術之間進行切換。
當你打開這個 demo, 你會發現自己在一個基本佈局的網站的主頁上。您可以調整左上角的滑塊以增強您的體驗。佈局從非常基本到基於浮動的佈局，再轉換為 基於 flexbox 的佈局，最後是基於 CSS Grid 的佈局。
它不是最美麗或最複雜的設計，但它足以顯示基於瀏覽器功能的網站可以採用哪些形態。
此演示頁面使用 CSS Grid 佈局構建，不使用任何前綴屬性或 polyfills。
它對於 Internet Explorer（IE）8，極限模式下的 Opera Mini，UC 瀏覽器和當前最流行的現代瀏覽器的用戶來說，都是可以訪問的。
如果你不期待在所有瀏覽器中都看到完全相同的效果，那麼你現在完全可以使用 CSS Grid 佈局。但是期望使用 CSS Grid 在所有瀏覽器中都看到完全相同的效果是現在無法實現的。我很清楚，這種情況並不完全取決於我們的開發人員，但是我相信如果客戶明白其中的好處（面向未來的設計，更好的可訪問性和更高的性能），我們的客戶會很願意接受這些差異。
除此之外，我相信我們的客戶和用戶 —— 感謝響應式設計 —— 已經瞭解到，網站在每個設備和瀏覽器中看起來都不一樣。
在接下來的部分中，我將向你展示如何構建 demo 的部分內容，以及為什麼有些效果只在 box 外有效。
邊注：為了讓這個 demo 支持 IE 8，我不得不多添加幾行 JavaScript 和 CSS（一個 HTML 5 墊片）。我沒辦法，因為 IE 8+ 聽起來比 IE 9+ 更令人印象深刻。
CSS Grid 佈局和漸進增強
我們一起來深入瞭解我如何在頁面中心建立“四級增強”組件。
HTML
我將所有項目按邏輯順序放入到 section 中。該部分的第一個 section 中是標題，其次是四個小節。假設它們代表單獨的博客帖子，我把它們中的每一個都包含在一個 article 標籤中。每篇文章由一個標題（h3）和一個圖像鏈接組成。我在這裡使用 picture 元素，因為我想在視口足夠寬的情況下，為不同的用戶提供不同的圖像。在這，我們已經有了良好的漸進增強的第一個例子。如果瀏覽器不理解 picture 和 source，它仍然會顯示 img，這也是 picture 元素的一個子元素。
浮動增強功能
所有的項目都在“四級增強”組件中，向左浮動。
在較大的屏幕上，如果所有項目彼此排列，則此組件的效果最好。為了支持不瞭解 flexbox 或 grid 的瀏覽器，我將其設為浮動，給它們設置了一定的 size 和 margin，並在最後一個浮動項目之後清除浮動。
Flexbox 增強功能
“四個層次的漸進增強”中的所有項目都因 flexbox 的加入而得到了提升。
在這個例子中，我實際上不需要使用 flexbox 來增強組件的總體佈局，因為浮動已經完成了我的需求。在設計中，標題在圖像的下邊，這可以通過 flexbox 實現。
article {
display: flex;
flex-direction: column;
}
h3 {
order: 1;
}
使用 flexbox 重新為各個項目進行排序時，我們必須非常謹慎 我們應該僅將其用於視覺上的變化，並確保重新排序不會改變鍵盤或屏幕閱讀器用戶的體驗。
Grid 增強功能
“四個層次的漸進增強”中的所有項目都因 CSS Grid 的加入而得到了提升。
一切看起來都不錯，但標題仍然需要進行一些定位上的調整。有很多方法可以將標題放在第二個項目的正上方。我發現最簡單、最靈活的方式是使用 CSS Grid 佈局。
首先，我畫了一個四列的網格，在父級容器上有一個 20 像素的凹槽。
section {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
因為所有文章的寬度都是 24.25％，所以我為支持 CSS Grid 的瀏覽器重新設置了這個屬性。
@supports(display: grid) {
article {width: auto;
}
}
然後，我把標題放在第一行和第二列。
h2 {
grid-row: 1;
grid-column: 2;
}
為了去掉 Grid 的自動 auto-placement，我還將第二個 article 顯式地放在第二行和第二列（標題下）。
article:nth-of-type(2) {
grid-column: 2;
grid-row: 2 / span 2;
}
最後，因為我想刪除標題和第二個項目之間的間距，所有其他項目必須跨兩行。
article {
grid-row: span 2;
}
如果我需要讓這些代碼支持 IE 9+，那麼我們將總共需要八行代碼（其中三行實際上是 clearfix，並且是可重用的）。當你使用前綴的時候也要對比一下。
這只是一個簡單的例子，而不是一個完整的項目，我知道一個網站有更復雜的組件。但是，想像一下，在所有的瀏覽器中構建一個佈局效果幾乎一樣的項目需要多長時間。
你不需要覆蓋一切
在前面的例子中，width 是唯一一個必須重置的屬性。關於 grid（和 flexbox，順便說一下）的一個重要的事兒是，如果某些屬性被應用於 flex 或 grid 的項目內部，它們將失去原來的作用。例如 float，如果它應用於的元素在 grid 容器內，則不起作用。對於其他一些屬性也是如此：
- display: inline-block
- display: table-cell
- vertical-align
- column-* 屬性
幾乎每個主流瀏覽器都支持 CSS 功能查詢。
如果你必須使用屬性覆蓋，那就是用 CSS 功能查詢。在大多數情況下，你只需要覆蓋 width 或 margin 等屬性。 功能查詢的支持情況非常好，並且最好的是每個瀏覽器都支持網格。在這你不需要 Modernizr。
此外，你不需要將所有的 grid 屬性都放在功能查詢中，因為舊的瀏覽器會簡單的忽略他們不瞭解的屬性和值。
在我寫這個 demo 的時候，對我來說唯一感到有點棘手的是當有一個 flex 或 grid 容器使用了 clearfix 的。包含內容的偽元素也可以變為 flex 或 grid 項。它可能會，也可能不會影響你；只要知道它就好了。作為替代方案，你可以使用 overflow：hidden 來清除父級，如果這適用於你的話。
衡量漸進增強的成本
瀏覽器已經為我們做了很多漸進增強的工作。我已經提到 picture 元素，它返回到 img 元素。另一個例子是 email 字段，如果瀏覽器不明白，它將返回一個簡單的 text 字段。另一個例子是我在demo 中使用的調節滑塊。在大多數瀏覽器中，它會被渲染為可調節的滑塊。例如，IE 9 中不支持輸入類型 range，但它仍然可以使用，因為它返回一個簡單的 input 字段。用戶必須手動輸入正確的值，這不太方便，但它可以正常工作。
比較在 Chrome 和 IE 9 中如何呈現 range 輸入類型。
有些東西是瀏覽其所關注的，其他的則需要由我們負責
在準備 demo 的時候，我意識到，真正瞭解 CSS 是非常有幫助，而不僅僅是寫一些屬性，希望能夠在瀏覽器中獲得最佳的效果。越瞭解浮動，flexbox 和 grid 的工作原理，以及您對瀏覽器的瞭解越多，越容易實現漸進增強。
成為一個瞭解 CSS 的人，而不僅僅是使用 CSS 的人，將為你在工作中帶來巨大的優勢。
摘要
我有一種感覺，我們中的一些人忘記了我們的工作是什麼，甚至可能忘記我們實際做的“僅僅”是一份工作。我們不是搖滾明星，忍者，工匠或大師，我們所做的最終是將內容放在網上，讓人們儘可能輕鬆地消費。
內容是我們創建網站的原因。
這聽起來很無聊，我知道，但不一定是這樣的。我們可以使用最熱門的尖端技術和花哨的技術，只要我們不忘記我們在為誰做的網站：用戶。我們的用戶不一樣，也不使用相同的設備，操作系統，瀏覽器，互聯網提供商或輸入設備。通過提供最基本的版本開始，我們可以從現代網絡中獲得最佳效果，而不會影響可訪問性。
幾乎每個主流瀏覽器都支持 CSS 功能查詢。
Grid，例如，幾乎在每個主流瀏覽器中都得到了支持，我們不應該等待好多年，直到覆蓋率達到 100％ 才在實際項目中使用它，因為那根本不存在。僅僅是因為 web 本就不是那麼玩的。
Grid 非常好用。現在就開始使用吧！
截圖
以下是各種瀏覽器的 demo 頁面的截圖：
Internet Explorer 8, Windows 7
Internet Explorer 9, Windows 7
Internet Explorer 10, Windows 7
Internet Explorer 11, Windows 8
Opera Mini 42 (Extreme), Android 7
UC Browser 11, Android 7
閱讀更多 JS加加網 的文章
