【前言】
就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一種福音。
就前面學習的css grid和css flexbox，我們對css的flexbox和grid有了很深入的了解。特別是在《使用css grid和flexbox製作card》一文中，已經見識到了css grid和flexbox結合對布局的巨大優勢。那麼這篇文章，將再一次向大家展現css grid和flexbox的強大之處。那是因為他們的結合將解決布局的實際問題。
【參考文章】①②
③④
Grid網格布局
flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....
grid網格布局
1.1 容器和專案 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 1.2 行和列 容器裡面的水平區域稱為 行 row 垂直區域稱為 列 column 1.3 單元格 行和列的交叉區域，稱為 單元格 cell 正常情況下，n行和m列會產生n x...
Grid網格布局
將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局 grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產...