一篇文章讓你了解CSS中flex布局中的網格布局

前段時間我剛講了flex布局中的彈性布局，今天我就再來講講網格布局。
網格布局相對於彈性布局個人覺得較為簡單，
作用在容器上的：
display : grid
grid-template-columns : 設置列數
grid-template-rows : 設置行數
fr單位
repeat()方法
注：網格中提供了一個新的單位：fr ( 比例單位 )
grid-template-areas : 划分區域的
注：區域必須是矩形。
grid-template:復合寫法
grid-template-rows
grid-template-columns
grid-template-areas

grid-template:
"a1 a1 a1" 1fr
"a3 a3 a2" 1fr
"a3 a3 a2" 1fr
/1fr 1fr 1fr;

grid-column-gap : 列的間距
grid-row-gap : 行的間距
grid-gap : 復合寫法
grid-row-gap grid-column-gap

justify-items : 子項的水平居中方式
默認 : stretch 默認值，拉伸。表現為水平或垂直填充。
start
center
end

align-items : 子項的垂直居中方式
默認 : stretch 默認值，拉伸。表現為水平或垂直填充。
start
center
end
place-items : 復合寫法
align-items justify-items

justify-content : 整體網格的水平對齊方式
默認：stretch
start
end
center
space-between
space-around
space-evenly

align-content : 整體網格的垂直對齊方式
默認：stretch
start
end
center
space-between
space-around
space-evenly

place-content : 復合寫法
align-content justify-content


作用在子項上的：

grid-area : 找指定的區域
1.對應網格的名字
2.寫對應的線的數字：grid-area : 1 / 3 / span 2 / 4;
grid-row-start / grid-column-start / grid-row-end / grid-column-end

grid-column-start 水平方向上占據的起始位置
grid-column-end 水平方向上占據的結束位置
grid-row-start 垂直方向上占據的起始位置
grid-row-end 垂直方向上占據的結束位置
注：只有在grid-column-end和 grid-row-end 中可以設置span操作。span去設置的不是結束位置，而是個數。
正常數字是位置，加上span是個數。