grid網格佈局使用

定義

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網格佈局教程