為什么CSS Grid比Bootstrap更適合布局？本篇文章給大家介紹一下原因。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
CSS Grid是一種全新的創建布局方式，這是有史以來第一次合適的布局系統，并且他是瀏覽器原生的，他給我們帶來了很多好處。
當你和當今最流行的Bootstrap框架相比，grid的好處變的尤為清晰，您不僅可以創建在以前在不引入JavaScript的情況下無法實現的布局，而且您的代碼將更易于維護和理解。
本文中我會解釋一下為什么。
標簽會更加簡潔
相比Bootstrap，使用grid會使你的HTML更加干凈，雖然這不是最重要的好處，但它可能會是你第一個注意到的。
為了舉例說明，我創建了一個布局，以便我們可以比較兩個版本所需要的代碼。
注意：我在給出的例子中稍微設計了一下，但是他和我們比較Bootstrap沒有任何關系，所以我只保留布局部分的CSS
Bootstrap
先看一下Bootstrap需要創建的標簽。
這里有兩件事需要注意一下：
每個row都需要一個<div>標簽
使用了class name來指定布局(col-xs-2)
隨著這種布局的復雜性增長，HTML也是如此。
如果這是個響應式網站，它會看起來更復雜：
現在我們來看一下用Grid布局：
我可以在這里使用語義化元素，但我還是使用div來和Bootstrap對比。
顯然，grid用來布局看起來更簡單，丑陋的類名和每行所需的額外的div標簽一去不復返了，簡簡單單一個container和里面的item。
與Bootstrap不同的是，隨著布局復雜度的增加，Grid布局標簽的復雜度將不會增加太多。
Bootstrap示例不需要添加任何CSS，引用一下就可以了。CSS Grid肯定需要添加。具體來說，是這樣的：
這可能是一些人贊成Bootstrap的一個論點：你不用關心CSS，只需要在HTML中定義布局。但是，正如你將會明白的那樣，當涉及到靈活性的時候，標簽和布局之間的耦合會變成一個很大的問題。
更靈活
假設您想要根據屏幕大小更改布局。 例如，將菜單拉到最上面一行，在移動設備上查看。
換句話說，布局從這樣：
換成這樣：
CSS Grid
用CSS Grid的話會非常簡單，我們只需要添加一個media query，布局就像變魔術一樣變成了你想要的。
你可以這樣重新排列布局，不用擔心HTML標簽編寫的順序，這對開發人員和設計師都是很大的一個好處！
BootStrap
如果想在Bootstrap中做同樣的事情，就必須得修改HTML了，需要調整標簽的順序。
這個需求僅僅使用media query是遠遠不夠的，你還得使用JavaScript。
這個例子是我體會到的grid最大的好處
不再限死12列
這個不是一個很大的問題，但是這個問題也困擾過我多次，因為Bootstrap的grid系統分為了12列，如果你想要一個5列的布局就會糾結，或是7列、9列、任何不會合為12列的。
CSS Grid就沒有任何限制，你可以讓grid正好有你想要的數量。這是一個7列的grid：
通過設置grid-template-columns : repeat(7, 1fr)實現，就像這樣：
瀏覽器支持
當然也必須討論一下瀏覽器支持，在撰寫本文的時候，全球75%的網站流量支持CSS Grid
CSS Grid是一個布局模塊，它允許我們改變文檔的布局，而不會干擾標簽順序。換句話說，CSS網格是一個純粹的可視化工具，使用得當，對文檔內容的表達應該沒有影響。所以：在舊的瀏覽器中缺乏對CSS Grid的支持不影響訪問者的體驗，只是讓體驗不同。
原文地址：https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163
