淺談css grid比Bootstrap更適合建立佈局的原因

為什麼CSS Grid比Bootstrap更適合佈局？本篇文章跟大家介紹一下原因。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

CSS Grid是一種全新的創建佈局方式，這是有史以​​來第一次合適的佈局系統，並且他是瀏覽器原生的，他為我們帶來了很多好處。

當你和當今最流行的Bootstrap框架相比，grid的好處變的尤為清晰，您不僅可以創建在以前在不引入JavaScript的情況下無法實現的佈局，而且您的程式碼將更易於維護和理解。

【相關推薦：《##css影片教學#》《##bootstrap教學》】本文我會解釋為什麼。

標籤會更簡潔

比較

Bootstrap

，使用grid會使你的HTML更乾淨，雖然這不是最重要的好處，但它可能會是你第一個注意到的。 為了舉例說明，我建立了一個佈局，以便我們可以比較兩個版本所需的程式碼。

注意：我在給的例子中稍微設計了一下，但他和我們比較

Bootstrap

沒有任何關係，所以我只保留佈局部分的CSS

Bootstrap先看一下

Bootstrap

需要建立的標籤。

這裡有兩件事要注意一下：

每個row都需要一個

標籤使用了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

##更多程式相關知識，請造訪：

程式設計影片！ ！

以上是淺談css grid比Bootstrap更適合建立佈局的原因的詳細內容。更多資訊請關注PHP中文網其他相關文章！