Grid布局（網格布局）

網格布局（grid）是 css 中乙個布局方案。

它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過複雜的 css 框架達到的效果，現在瀏覽器內建了。

下面這樣的布局，就是grid布局。

grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。

flex 布局是軸線布局，只能指定"專案"針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格，可以看作是二維布局。grid 布局比 flex 布局強大。

grid布局是乙個二維的布局方法，縱橫兩個方向總是同時存在。

作用在grid容器上作用grid布局子元素上

grid-template-columns 列

grid-column-start 水平方向上佔據的起始位置

grid-template-rows 行

grid-column-end 水平方向上佔據的結束位置。

grid-template-areas 區域

grid-row-start 垂直方向上佔據的起始位置。

grid-template 行，列，區域的組合寫法

grid-row-end 垂直方向上佔據的結束位置。

grid-column-gap 列與列間隙大小

grid-column grid-column-start

+ grid-column-end

的縮寫。

grid-row-gap 行與行間隙大小

grid-row grid-row-start

+ grid-row-end

的縮寫。

grid-gap 行，列網格間隙大小

grid-area 表示當前網格所占用的區域，名字和位置兩種表示方法。

justify-items 網格元素水平呈現的方式，拉伸、左右中對齊

justify-self 單個網格元素的水平對齊方式

align-items 網格元素垂直呈現的方式，拉伸、上下中對齊

align-self 單個網格元素的垂直對齊方式。

place-items 網格呈現方式組合寫法

place-self align-self

和justify-self

的縮寫。

justify-content 網格元素水平分布的方式

align-content 網格元素垂直分布的方式

place-content 網格分布方式組合寫法

對網格進行橫縱劃分，形成二維布局。單位可以是畫素，百分比，自適應以及fr單位（網格剩餘空間比例單位）。

grid-template-columns: 100px 25% auto fr；grid-template-rows: 100px 25% auto fr;有時候，我們網格的劃分是很規律的，如果需要新增多個橫縱網格時，可以利用repeat(4，1fr&&100px)語法進行簡化操作。

布局的時候如果左右兩側固定，中間自適應，可以用grid布局，**如下：