grid 布局是真正的 css 框架，和 flex 相比，它是二維的，而 flex 是一維的
幾個 cheat sheet：
（附之前我寫的乙個 flex cheat sheet）
入門的話，css-tricks 上有篇入門文章 getting started with css grid，不過我更推薦這篇 5 分鐘學會 css grid 布局。因為是入門，兩者不約而同都沒有提到grid-template-areas這個 grid 布局最強大的屬性
詳細屬性介紹可以看下 css-tricks 的這篇 a complete guide to grid，英文吃力的話可以看下 中文版，但是排版遠不及原文
或許你有疑問，grid 和 flex 的區別是什麼？grid 是否可以取代 flex？答案當然是 no
先看下這篇文章 the ultimate css battle: grid vs flexbox，我來概括下文中說的二者區別：
然後來看這篇文章 does css grid replace flexbox?，簡單總結下文中所言。
首先：grid 能做 flex 不能做的事情
flex 也能做 grid 不能做的事情
兩者能一起用。grid 布局的元素能包含 flex 布局的元素，反之亦然
grid 對比 flex 的優勢有：
事實上，flex 通過某種類似 hack 也能實現二維，可以參考 這裡，而 grid 也能實現一維，一維其實就是特殊情況下的二維，參考 這裡
有了 grid，我們可以大膽拋棄 bootstrap grid 了，參考此文 why css grid is better than bootstrap for creating layouts，簡單總結下，grid 相比 bootstrap grid 有如下幾點（有興趣的可以根據原文寫寫 demo）：
最後，上個聖杯布局用 grid 實現的 demo（之前用 flex 實現過，在 這裡），可以看到用 grid 實現更加簡單。關於 grid 實現布局，可以看下 這篇文章 入門
微信小程式布局初體驗
1.display flex 用於設定乙個容器 2.flex direction row column row是橫向排列 預設 column是縱向排列，其餘反向排列不再列出 3.flex wrap nowrap wrap 控制一條軸線排不下對時候如何換行，nowrap表示不換行，wrap表示換行顯示...
布局篇 Grid布局
特點 1 可以定義任意數量的行和列 2 行的高度和列的寬度可以使用絕對值 相對比例或自動調整的方式，可設定最大值和最小值 3 內部元素可以設定自己所在的行 列，還可以設定跨越幾行 幾列 4 可以設定內部元素的對齊方向 grid類具有columndefinitions和rowdefinitions兩個...
Grid布局方式
wp7中grid布局類似html中的 但是又不太一致 為了測試新乙個3行3列的grid 方了方便,剔除掉其它xaml c sharp collapse view plain copy layoutroot showgridlines true r1 r2 r3 c1 c2 c3 行分別命名為r1,r...