CSS網格佈局與其他佈局系統有什麼不同？

Question

什麼樣Bootstrap或其他類似的佈局或CSS FlexboxCSS TablesCSS Grid Layout和現有的布點框架之間的差異（不 HTML表格，我知道他們都應該是僅用於表中的內容）？

它是什麼概念，它包含哪些用例？

Answer 1

CSS網格佈局並不試圖取代Twitter Bootstrap中的HTML表格，flexbox和網格。 CSS網格是創建標記的新方法。

創建網格佈局的目的是在CSS中聲明您的佈局。如果你的容器中有簡單的孩子列表，你可以通過CSS添加2D佈局。不需要包裝row容器等物品。但它不是網格的好處，有時你需要將你的單元格用HTML包裝成行。

Twitter引導程序和表具有相同的概念：您有一些行和他們的孩子在HTML中聲明。這不是一個缺點，它是如何工作的。在flexbox之前，由於缺乏其他方式，我們更多地使用這些方法。

很久很久以前（在CSS之前）我們只在前端使用表格。這並不意味着桌子不好。這是唯一的方法。但是當你真的需要一張桌子的時候桌子很好。你不應該把它們用於一切。

Flexbox是所有關於1D排列的元素。當然在某些情況下，它會看起來像2D。在某些情況下，你將不得不使用一些黑客，因爲你真的需要一個網格！但是這是由於網格瀏覽器相對較低，而不是由於flexbox的正確應用。對於一些佈局來說，它是完美的，對於其他真正需要二維（其中最好使用表格或網格的地方）的人來說，它可能會很不方便。

所以，只需使用網格佈局，其中您的佈局優雅地用網格表示。在其他情況下，它不會被維護和優雅的方式。

Answer 2

CSS網格佈局允許創建一個二維網格來佈置它上面的項目。它用於生成響應式用戶界面設計。

佈局系統（如Bootstrap和CSS Flexbox）的主要區別在於它是二維的。在Bootstrap中，Flexbox佈局是以一維方式定義的。這意味着，在CSS網格佈局中，網格項目在表格中水平和垂直對齊。與CSS表格的不同之處在於，它在網格中調整大小和對齊元素方面更加靈活，並且允許項目彼此重疊。

儘管其他系統也可以實現2D效果（在某種程度上），但Bootstrap的網格系統基於12列布局，並且Bootstrap和Flexbox在一個方向上對齊元素時會將它們對齊到下一行不適合他們的容器大小。此外，CSS網格佈局允許將包含的元素放置在不同的「網格區域」中，而不依賴於它們在DOM中的位置。

在網格佈局中，根據可用的視口或容器大小，只有放置在implicit grids內的項目纔會打包與Flexbox或Bootstrap類似的元素。放置在explicit grids中的元素不會以這種方式進行重新排列，但這可以與媒體查詢結合使用。

Answer 3

引導是一個巨大的框架，但我認爲你只是在這個比較中引用它的網格。

對我來說，css flexbox和css網格的輝煌部分在於它們將網格世界中的網格系統與桌面世界中的網格系統更加接近 - 它更具響應性和動態性。 flexbox/css網格所能實現的是可以描述項目/列/行，以便不僅根據容器的大小調整其大小，還可以相互響應。例如，flexbox允許您指定某個項目具有固定大小（100像素），某些項目的容量相對於容器（20％），某些項目適合內容（自動）以及所有項目其他項目以您想要的比例分享剩餘的可用空間。如果窗口大小發生變化，所有項目都會自動調整。而且，如果自動調整大小的項目改變，其他人也將調整以吸收刷新的可用空間。這是桌面應用程序佈局的工作原理。

CSS網格共享flexbox的相同功能，但它是一個網格，意味着它在兩個維度上運行。如果您嘗試使用多個Flexbox行來模擬網格，則會遇到以下問題：您無法要求每行上的第一項具有相同的大小，而沒有給出某種不太靈活的寬度（無論是percantage還是px ）。 CSS網格可以將它們設置爲列的大小，因此無論它位於哪一行，都將寬度設置爲最寬的項目。

Bootstrap v3根本就沒有這種靈活性。它的響應只意味着對容器和設備的響應，它不能使列/行相互響應。

Bootstrap v4是一個不同的故事，它建立在flexbox之上，因此靈活性大大增強。但是，如果你只是在談論網格系統，我會說先去css網格和flexbox。