首先提及，雖然14年就看到有Grid的佈局指南（CSS Grid布局：网格区域）但時至今日，并非所有瀏覽器都支持，下面的是找到的瀏覽器支持情況：
個人測試了一下常用的：
不支持：360瀏覽器（WebKit 537.36(Chrome 45.0.2454.101)）、Edge（Edge 14.14393 兼容 WebKit 537.36 ）
支持：FireFox（Mozilla/5.0 ）、Chrome（WebKit 537.36(Chrome 58.0.3029.81)）Chrome可能要開啓Web實驗室
看來還要一段時間才能在大部分瀏覽器上看到
第一個佈局參考：CSS Grid VS Flexbox：实例对比。
上面這個實例中，Flex比Grid多了一個div，自己修改了下，在不變動html結構的情況下，只變換css文件。
下面是測試結果
查看實際效果
- 2017/4/28 第一次編輯
