css系列-grid柵格佈局

柵格介紹

#名詞解釋

CSS 網格佈局(Grid Layout) 是CSS中最強大的佈局系統。 這是一個二維繫統，這意味着它可以同時處理列和行。

柵格系統與FLEX彈性佈局有相似之處理，都是由父容器包含多個項目元素的使用。

#兼容性

下面是柵格系統兼容性數據，所以在根據項目使用的場景決定是否使用柵格佈局。

#聲明容器

#塊級容器

<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        padding: 200px;
    }

    article {
        width: 400px;
        height: 200px;
        border: solid 5px silver;
        display: grid;
        grid-template-rows: 50% 50%;
        grid-template-columns: 25% 25% 25% 25%;
    }

    article div {
        background: blueviolet;
        background-clip: content-box;
        padding: 10px;
        border: solid 1px #ddd;
    }
</style>


<article>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</article>

#行級容器

display: inline-grid;

#劃分行列

柵格有點類似表格，也 行 和 列。使用 grid-template-columns 規則可劃分列數，使用 grid-template-rows 劃分行數。

#固定寬度

下面是使用固定寬度劃分兩行三列的的示例，當容器寬度過大時將漏白。

<style>
	* {
    padding: 0;
    margin: 0;
  }
  body {
    padding: 200px;
  }
  article {
    width: 300px;
    height: 200px;
    border: solid 5px silver;
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 100px 100px 100px;
  }
  article div {
    background: blueviolet;
    background-clip: content-box;
    padding: 10px;
    border: solid 1px #ddd;
  }

</style>
...

<article>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</article>

#百分比

可以使用使用百分比自動適就容器。

display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 25% 25% 25% 25%;

#重複設置

使用 repeat 統一設置值，第一個參數爲重複數量，第二個參數是重複值

grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 50%);

可以設置多個值來定義重複，下面定義了四列，以 100%、20px 重複排列。

display: grid;
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 100px 50px);

#自動填充

自動填充是根據容器尺寸，自動設置元素尺寸。

width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);

#比例劃分

使用 fr 單位設置元素在空間中所佔的比例，下面按1份-2份 分成兩組共四列。

#單位組合

width: 300px;
height: 200px;
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 100px 1fr 2fr;

#重複定義

width: 300px;
height: 100px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr 2fr);

#組合定義

grid-tempalte 是 grid-template-rows、grid-template-columns、grid-template-areas 的三個屬性的簡寫。

下面是使用 grid-template 同時聲明 grid-template-rows、grid-template-columns。

grid-template: 100px 1fr / 50px 1fr

下面是使用grid-template 定義 grid-template-areas ，有關grid-template-areas的使用方法會在下面介紹。

grid-template: "header . ."
            ". main ."
            "footer footer .";

#minmax

使用 minmax 方法可以設置取值範圍，下列在行高在 最小100px ~ 最大1fr 間取值。

width: 300px;
height: 300px;
display: grid;
grid-template-rows: 100px minmax(100px, 1fr);
grid-template-columns: 100px 1fr;

#間距定義

#行間距

使用 row-gap 設置行間距。

width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
row-gap: 30px;

#列間距

使用 column-gap 定義列間距。

width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;

#組合定義

使用 gap 規則可以一次定義行、列間距，如果間距一樣可以只設置一個值。

設置行列間距爲20px與10px

width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 20px 10px;

統一設置行列間距爲20px

gap: 20px;

未完待續