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