他可以將頁面分為多個網格，可以任意組合不同的網格 ，做出各種各樣的布局。
網格布局為二維性質的。
grid-row-gap:1rem ;行間距
** grid-column-gap: 1rem ;列間距**
** grid-gap: 1rem;**設定行列間距
**grid-template-columns: ;**列寬和列數
**grid-template-rows: ;**行寬與行數
取值：一組空格代表一組值（幾個值就是幾行or列）
取值的方式
grid-auto-rows: minmax(100px ,auto);
minmax(最小值，最大值)
容器空間不足時，最小按指定的最小值顯示
容器空間有剩餘，最大按指定的最大值顯示
**justify-content水平位置
align-content 垂直位置**
self
grid-column
grid-row
如 grid-column: 1/3;（起始，中止）
定義網格模板
grid-area屬性指定專案放在哪乙個區域
使內容規範
Grid布局（網格布局）
網格布局 grid 是 css 中乙個布局方案。它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過複雜的 css 框架達到的效果，現在瀏覽器內建了。下面這樣的布局，就是grid布局。grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但...
Grid網格布局
前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...
Grid網格布局
flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....