為什麼CSS Grid比Bootstrap更適合佈局？本篇文章跟大家介紹一下原因。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
CSS Grid是一種全新的創建佈局方式，這是有史以來第一次合適的佈局系統，並且他是瀏覽器原生的，他為我們帶來了很多好處。
當你和當今最流行的Bootstrap框架相比，grid的好處變的尤為清晰，您不僅可以創建在以前在不引入JavaScript的情況下無法實現的佈局，而且您的程式碼將更易於維護和理解。
【相關推薦：《##css影片教學#》《##bootstrap教學》】本文我會解釋為什麼。
標籤會更簡潔，使用grid會使你的HTML更乾淨，雖然這不是最重要的好處，但它可能會是你第一個注意到的。 為了舉例說明，我建立了一個佈局，以便我們可以比較兩個版本所需的程式碼。
Bootstrap沒有任何關係，所以我只保留佈局部分的CSS
需要建立的標籤。
如果這是一個響應式網站，它會看起來更複雜：
對比。 顯然，grid用來佈局看起來更簡單，醜陋的類別名稱和每行所需的額外的div標籤一去不復返了，簡簡單單一個container和裡面的item。
與
Bootstrap不同的是，隨著佈局複雜度的增加，Grid佈局標籤的複雜度將不會增加太多。
範例不需要新增任何CSS，引用一下就可以了。 CSS Grid肯定需要添加。具體來說，是這樣的：
的一個論點：你不用關心CSS，只需要在HTML中定義佈局。但是，正如你將會明白的那樣，當涉及到靈活性的時候，標籤和佈局之間的耦合會變成一個很大的問題。
換句話說，佈局從這樣：
CSS Grid
用
media query
，佈局就像變魔術一樣變成了你想要的。
這個需求只要使用media query是遠遠不夠的，你還要用JavaScript。
這個例子是我體會到的grid最大的好處
這個不是一個很大的問題，但這個問題也困擾過我多次，因為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中文網其他相關文章！
