繼續介紹grid，前面有提過網格數是依照grid-template-columns或rows的數量而定，下面分別給row和column設定六個網格，下面用圖片展示，下面介紹的不是用網格來定位，而是用網格線

.grid-box
{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr;
    background-color: lightskyblue;
    column-gap: 20px;
    row-gap: 50px;
    border: 1px solid red;
}
.div1
{
    background-color: aqua;
    grid-row-start: 2;
    grid-row-end: 6;
}

grid-row-start:從row的第幾個格線開始
grid-row-end:到row的第幾個格線結束
上面設定了div1從row的第二行開始，到第六行結束


grid-column-start:從column的第幾個格線開始
grid-column-end:到column的第幾個格線結束

.div1{
    background-color:aqua;
    grid-row-start: 2;grid-row-end: 6;
    grid-column-start: 3;
    grid-column-end: 7;
}

(grid-row-start: 2;grid-row-end: 6;)=grid-row:2/6
(grid-column-start: 3;grid-column-end: 7)=grid-column: 3/7;
讓div1與div2重疊

.div1{background-color: aqua;grid-row:2/6;grid-column: 3/7;}
.div2{background-color: yellow;grid-row:3/5;grid-column: 4/6;}

如果給上z-index則會影響上下層關係

.div1{background-color: aqua;grid-row:2/6;grid-column: 3/7;z-index: 1;}

上面的表示方法可以全部結合為grid-area，彼此用/隔開
grid-area:row-start/column-start/row-end/column-end，

.div3{background-color: coral;grid-area:2/2/7/7}

現在給div3，從row和column第二條開始到第七條線結束，現在div1,div2都被div3給蓋住


給上兩者z-index:1

.div1{background-color: aqua;grid-row:2/6;grid-column: 3/7;z-index: 1;}
.div2{background-color: yellow;grid-row:3/5;grid-column: 4/6;z-index:1;}

如果用負數會倒著數,像這裡-1=7，-2=6，依此類推

.div3{background-color: coral;grid-area:2/2/-1/-1}

grid-auto-flow:改浮動方向，預設是grid-auto-flow:row

.grid-box {
            display:grid;
            grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr;
            background-color: lightskyblue;
            column-gap: 20px;
            row-gap: 50px;
            border: 1px solid red;
            grid-auto-flow:column;
}

改成column後變縱向排列


grid也能夠用前面flex提過的justify-items和align-items，只不過用上後大小會變成以內容填充，justify-items控制行向,align-items控制縱向

.grid-box {
            display:grid;
            grid-template-columns:repeat(3,100px);
            grid-template-rows:repeat(3,100px);
            background-color: lightskyblue;
            column-gap: 20px;
            row-gap:    40px;
            border: 1px solid red;
            justify-items:center;
            align-items:end;
            
        }

現在調整的位置就是，行向置中，縱向貼底

.div2
{
    background-color: yellow;
    justify-self:stretch;
    align-self: start;
}
.div3
{
    background-color: coral;
    justify-self: start;
    align-self: stretch;
}

grid也有獨自設定justify-self與align-self