本文重點：網格布局的優點是可以控制元素占據的網格數量，可以靈活的跨行和跨列，可以很方便實現一般布局難以實現的布局效果，控制元素占據網格數量的屬性在本文
它將網頁划分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局
Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。
Flex 布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。
Grid 布局則是將容器划分成"行"和"列"，產生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。
案例效果圖如下：
2、划分行和列(以下例子是三行三列，屬性值也可以是百分比)
grid-template-columns:200px 200px 200px
grid-template-rows:200px 200px 200px
功能函數：repeat(重復的次數，重復的數值或者重復的模式)，可以簡化上面列和行分配，減少代碼量
eg:
grid-template-columns：repeat(3,33.33%);
等同
grid-template-columns:33.33% 33.33% 33.33%
auto-fill關鍵字( 自動填充 )：
grid-template-columns：repeat(auto-fill,33.33%);
/* 當項目寬高固定，容器不固定的情況下，自動填充網格列數 */
3、設置行間距 || 列間距
grid-row-gap:20px /* 行間距 */
grid-column-gap:20px /* 列間距 */
grid-gap:30px 30px /* 復合式寫法 */
4、規划子元素放置的順序（默認為先排行后排列）
grid-auto-flow: column | row;
/*
row dense和column dense。
這兩個值主要用於，某些項目指定位置以后，剩下的項目怎么自動放置。
*/
grid-column-start屬性：左邊框所在的垂直網格線
grid-column-end屬性：右邊框所在的垂直網格線
grid-row-start屬性：上邊框所在的水平網格線
grid-row-end屬性：下邊框所在的水平網格線
2、grid-column ， grid-row
grid-column屬性是grid-column-start和grid-column-end的合並簡寫形式
grid-row屬性是grid-row-start屬性和grid-row-end的合並簡寫形式。
grid-column: 1 / 3;
grid-row: 1 / 2;
案例實現代碼如下：
如果感覺對自己有幫助，麻煩點一下關注，會一直盒大家分享知識的，謝謝！！！