定義
grid布局是指對網頁進行划分成一個一個網格，然后根據自己的要求，可以任意組合。
以前寫類似的功能，很麻煩，需要寫很多的CSS去控制，有了grid就很方便了，可以隨意進行組合。
跟flex有很多地方相似，包括有部分屬性。不同的地方也很突出，尤其是flex是一維，只有橫向。而grid是有橫向和縱向。另外grid功能要更強大點。
基本屬性
display
通過對父元素進行設置display:grid，表示里面包裹的元素全是網格布局。
display:grid
grid-template-columns/grid-template-cols
grid-template-columns：表示每行的寬度，有幾個表示每行有幾列，多出部分會往下排列
grid-template-cols：表示每列的寬度
.grid{
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: 50px 50px 50px 50px;
}
以上的代碼表示橫向的每個item寬度和高度是50px，多出一個就會被自動排布下去。
單位
單位既可以是px，也可以是百分比，或者用auto
- px
.grid{
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: 50px 50px 50px 50px;
}
- 百分比
.grid{
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
- auto 表示寬度或高度是剩余的部分
.grid{
display: grid;
grid-template-columns: 33.33% 10% auto;
grid-template-rows: 33.33% 20% auto;
}
repeat()
repeat()用來處理幾個item寬度相同的時候，避免寫相同的數值，或者是重復某種模式
.grid{
display: grid;
grid-template-columns: repeat(3,20%);
grid-template-rows: repeat(3,20%);
}
.grid{
display: grid;
grid-template-columns: repeat(3,100px 50px 100px);
grid-template-rows: repeat(3,100px 50px 100px);
}
auto-fill
當容器的寬度不確定，但是item的寬度確定，一行盡可能多的容納item，這時可以使用auto-fill
.grid{
display: grid;
grid-template-columns: repeat(auto-fill,100px);
}
fr
方便表示比例關系，使用fr來表示
.grid{
display: grid;
grid-template-columns: 1fr 2fr;
}
這表示后者是前者的2倍
fr也可跟px結合，會更方便
.grid{
display: grid;
grid-template-columns:100px 1fr 2fr;
}
上面代碼表示第一列是100px，第二列是第三列的一半。
minmax
表示最大值最小值
.grid{
display: grid;
grid-template-columns:1fr 2fr minmax(100px,1fr);
}
上面代碼表示，最小值不小於100px，最大值不大於1fr
row-gap，column-gap，gap
row-gap：每行之間的間距
column-gap：每列之間的間距
gap：縮寫行/列間距
.grid{
display: grid;
grid-template-columns:1fr 2fr 1fr;
row-gap: 10px;
column-gap: 10px;
}
或者簡便的寫法：gap
.grid{
display: grid;
grid-template-columns:1fr 2fr 1fr;
gap: 10px;
}
上面代碼表示行/列之間的間隔是10px
grid-area/grid-template-area
grid-area和grid-template-area，用來划分區域,grid-area用來指定item的名稱，grid-template-area根據子區域的名稱來排布，表示展現的方式
.grid{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: "div1 div1 div1"
"div2 div3 div4"
"div5 div6 div7"
"div8 div9 div9";
}
.div1{
grid-area: div1;
background-color: tan;
}
上面代碼表示div區域指代的grid的div1，整個頁面想展示的布局是如下圖：
grid-auto-flow
網格布局一般根據橫向依次排布，如果想豎向排序，可以設置grid-auto-flow
.grid{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: column;
}
上面的代碼表示按照豎向排序。
justify-items/align-items/place-items
justify-items/align-items類似，一個是水平方向上的展示，一個是垂直方向上的展示，屬性一致
start：對齊起始位置
end：對齊結束位置
center：居中展示
stretch:拉伸至整個寬度
justify-items：設置的是item的水平方向展現方式。
.grid{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-items: center;
}
上面代碼表示每個item居中展示
align-items：設置的是垂直方向上的展現方式。
.grid{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
align-items: center;
}
上面代碼表示item在垂直方向上居中展示
place-items是align-items和justify-items的結合
place-items:<align-items><justify-items>
justify-content/align-content/place-content
justify-content/align-content類似，一個是展示水平方向上，一個是展示垂直方向
justify-content：是指整個grid在整個容器中的水平方向展示位置
.grid{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-content: center;
}
上面代碼表示整個grid水平展現方式
grid-column-start/grid-column-end/grid-row-start/grid-row-end
可以指定項目的位置，通過控制左右上下的網格線
grid-column-start:左邊框的網格線
grid-column-end：右邊框的網格線
grid-row-start：上邊框的網格線
grid-row-end：下邊框的網格線
.div1{
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
background-color: tan;
}
上面代碼表示第一個item的位置，開始位置是2，結束位置是4，上面的位置是1，下的位置是3，其他的item根據瀏覽器排布，由grid-auto-flow來決定，默認是先行后豎
tips:參考阮一峰的文章CSS Grid網格布局教程