CSS柵格布局

本文轉載自查看原文 2020-07-18 10:26 1566 CSS3

認識柵格布局

　　CSS的柵格布局也被稱為網格布局(Grid Layout)，它是一種新興的布局方式。

　　柵格布局是一個二維系統，這意味着它可以同時處理列和行，與彈性布局相似，柵格系統也是由柵格容器包裹柵格元素進行使用。

　　對於柵格布局來說，它的思想實際上非常簡單，將一塊區域繪制成格子，然后將元素填進去即可。

　　我們學習者應該從下面兩個角度來學習柵格布局：

　　1.怎么樣畫出柵格容器

　　2.怎么樣將元素放進柵格容器中的某一區域

　　值得一提的是，現在的一些舊版瀏覽器對於柵格布局並沒有較好的支持性，所以這項技術的應用場景其實相比於傳統式的浮動布局以及彈性布局來說會少一些。

柵格容器

聲明柵格容器

　　我們可以使用display:grid;來將一個容器聲明為塊級的柵格容器，它的特點是獨占一行。

　　當然，也可以使用display:inline-grid;來將一個容器聲明為內聯塊級容器，雖然沒有獨占一行但可以設置寬高。

塊級柵格容器

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body{
                        padding: 100px;
                }

                main {
                        width:300px ;
                        height: 300px;
                        border: solid 5px silver;
                        display: grid;

                        /* 划分行列 */
                        grid-template-rows: repeat(3,100px);
                        grid-template-columns: repeat(3,100px);
                }

                section{
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;
                        
                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }

        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>
        </main>
        上面的是塊級柵格容器，看來是獨占一行了

</body>

</html>

塊級柵格容器

內聯塊級柵格容器

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body{
                        padding: 100px;
                }

                main {
                        width:300px ;
                        height: 300px;
                        border: solid 5px silver;
                        display: inline-grid;

                        /* 划分行列 */
                        grid-template-rows: repeat(3,100px);
                        grid-template-columns: repeat(3,100px);
                }

                section{
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;
                        
                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }

        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>
        </main>
        左邊是內聯塊級容器，不會獨占一行了

</body>

</html>

內聯塊級柵格容器

柵格容器之划分行列

　　光有柵格容器沒用，還要為柵格容器划分行數與列數，並且為它們指定寬度。

　　grid-template-rows:划分行數　　

　　grid-template-columns:划分列數

　　下面就介紹幾種划分的方式。

固定寬高

　　如我們想畫一個2行3列的固定寬高的柵格容器，就可以使用下面這種方法來繪制出。

　　grid-template-rows: 100px 100px;
　　grid-template-columns: 100px 100px 100px;

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body{
                        padding: 100px;
                }

                main {

                        width: 300px;
                     
                        border: solid 5px silver;
                        display: grid;

                        /* 划分行列 2行3列 每行代表高度，100px，每列代表寬度，100px */
                        grid-template-rows: 100px 100px;
                        grid-template-columns: 100px 100px  100px;
                }

                section{
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }

        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
        </main>

</body>

</html>

固定寬高

百分比寬高

　　除開固定寬高，也可以指定百分比。

　　如下圖，柵格容器的寬度與高度均為200px，我們來畫出一個2行2列的樣式。

　　grid-template-rows: 50% 50%;

　　grid-template-columns: 50% 50%;

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body{
                        padding: 100px;
                }

                main {

                        width: 200px;
                        height: 200px;
                     
                        border: solid 5px silver;
                        display: grid;

                        /* 划分行列 2行2列 每行代表高度，100px，每列代表寬度，100px */
                        grid-template-rows: 50% 50%;
                        grid-template-columns: 50% 50%;
                }

                section{
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }

        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                
        </main>

</body>

</html>

百分比寬高

重復划分

　　可以看到，上面每個塊的區域都是一樣的，那么有沒有什么辦法能夠重復繪制呢？使用repeat即可實現。

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

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

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {

                        width: 200px;
                        height: 200px;

                        border: solid 5px silver;
                        display: grid;

                        /* 重復繪制2次,每行50%高度，重復繪制2次,每列50%寬度， */
                        grid-template-rows: repeat(2, 50%);
                        grid-template-columns: repeat(2, 50%);
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>

        </main>

</body>

</html>

重復划分

　　我們也可以重復繪制不同寬度的行或者列，比如我們想繪制16個單元格，每個單元格的高度都是100px，但是寬度的話偶數單元格都是50px，奇數單元格是100px，那么久可以進行如下設置：

　　grid-template-rows: repeat(2, 100px 100px);

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

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                  

                        border: solid 5px silver;
                        display: grid;

                        /* 
                                以列舉例，第一次，繪制一個100px寬度的單元格，在繪制一個50px寬度的單元格，
                                第二次，以此類推。每次繪制2個。
                         */
                        grid-template-rows: repeat(2, 100px 100px);
                        grid-template-columns: repeat(2, 100px 50px);
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>
                <section>10</section>
                <section>11</section>
                <section>12</section>
                <section>13</section>
                <section>14</section>
                <section>15</section>
                <section>16</section>
        </main>

</body>

</html>

重復划分不同寬度

自動划分

　　自動划分是指不指定划分多少行或者列，而是只給他一個行列占比的具體數值，它會自動根據容器的大小來進行划分。

　　我們想在一個寬和高都是300px的柵格容器中進行繪制，而每個單元格的寬高都是100px，那就設置一下交給他自動繪制。

　　grid-template-rows: repeat(auto-fill, 100px);
　　grid-template-columns: repeat(auto-fill, 100px);

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        height: 300px;

                        border: solid 5px silver;
                        display: grid;


                        grid-template-rows: repeat(auto-fill, 100px);
                        grid-template-columns: repeat(auto-fill, 100px);
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>

        </main>

</body>

</html>

自動划分

比例划分

　　可以使用 fr 單位設置元素在空間中所占的比例，它將按照比例來進行划分。

　　比如我們設置了一個2行3列的柵格容器，其中的一行高度為的1fr，而第二行為2fr，第一列為40px，而第二列為1fr，第三列為2fr。

　　grid-template-rows: 1fr 2fr;

　　grid-template-columns: 40px 1fr 2fr;

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        height: 300px;

                        border: solid 5px silver;
                        display: grid;


                        grid-template-rows: 1fr 2fr;
                        grid-template-columns:  40px 1fr 2fr;
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
        </main>

</body>

</html>

比例划分

　　當然，它同樣支持以該單位自動划分比例。

grid-template 簡寫

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

　　但是目前還沒有學習grid-template-areas ，所以這里就只用grid-template來聲明 grid-template-rows與grid-template-columns即可。

　　比如我們來構建一個3行3列單元格寬高均為100px的柵格容器。

　　/* 行數，列數 */

　　grid-template: repeat(3,100px)/repeat(3,100px);

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        height: 300px;

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template: repeat(3,100px)/repeat(3,100px);
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>
        </main>

</body>

</html>

簡寫

minmax划分

　　使用minmax可以為行線或列線設定一個動態的取值數值，防止元素不會溢出。

　　如上，每一行的柵格元素單元格總寬度是400px，柵格容器的寬度卻只有300px，造成了列溢出，如果設置minmax則可以讓每個單元格進行適當調整。

　　/* 行數，列數 */

　　grid-template: repeat(2,100px)/repeat(4,minmax(50px,100px));

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template: repeat(2,100px)/repeat(4,minmax(50px,100px));
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
        </main>

</body>

</html>

minmax划分

柵格容器之間距定義

行間距

　　柵格容器中每一個元素，現在看是緊密挨在一起的。我們可以對柵格元素本身進行margin或者padding來將彼此之前撐開留出間隙，也可以使用柵格容器提供的方法。

　　使用 row-gap 設置行間距。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */
                        
                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template: repeat(3,100px)/repeat(3,minmax(50px,100px));
                        /* 行間距 */
                        row-gap:30px ;
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>
        </main>

</body>

</html>

行間距

列間距

　　使用column-gap定義列間距。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */
                        
                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template: repeat(3,100px)/repeat(3,minmax(50px,100px));
                        /* 列間距 */
                        column-gap:30px ;
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>
        </main>

</body>

</html>

列間距

gap 簡寫

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

統一設置行列間距為20px

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */
                        
                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template: repeat(3,100px)/repeat(3,minmax(50px,100px));
                        /* 行列間距 */
                        gap:30px ;
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>
        </main>

</body>

</html>

行列間距簡寫

柵格容器之柵格線命名

　　可以發現，其實最少有2條線的數據就可以定位一個柵格元素所在的位置。

　　如果我們想將元素放入正中間，可以這樣設置：

　　行線開始位：2號線開始或者1號線結束位置

　　列線開始位：2號線開始或者1號線結束位置

　　行線結束位：3號線開始或者2號線結束位置

　　列線結束位：3號線開始或者2號線結束位置

　　那么這樣，我們就可以將元素定位在該容器正中，並且大小只占據1個單元格。

獨立命名

　　我們可以為每一條柵格線都進行獨立命名，現在就來將上面的偽代碼實現一下。

　　grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];

　　grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];

　　每條線可以有多個名字，在使用的時候可以使用其任意的且具有的名字。

　　當我們需要定位的時候，使用如下格式對一個元素進行定位：

　　grid-row-start: r2-start;

　　grid-column-start:c1-end;

　　grid-row-end: r2-end;

　　grid-column-end: c3-start;

　　Ps：默認的柵格容器是不會展示柵格線的，此時需要打開瀏覽器的檢查功能就會看到柵格線。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
                        grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;

                        grid-row-start: r2-start;
                        grid-column-start: c1-end;
                        grid-row-end: r2-end;
                        grid-column-end: c3-start;
                }
        </style>
</head>

<body>

        <main>
                <section>中間</section>
        </main>

</body>

</html>

獨立命名

自動命名

　　對於重復設置的柵格容器系統會為它自動命名，使用時使用 r1、c2 的方式定位柵格。

　　r代表行

　　c代表列

　　重復設置，命名前綴：

　　grid-template-rows: repeat(3, [r-start] 100px [r-end]);

　　grid-template-columns: repeat(3, [c-start] 100px [c-end]);

　　在使用自動命名的柵格線進行定位時，應該按照如下格式：

　　grid-row-start: r-start 2;

　　grid-column-start: c-start 2;

　　grid-row-end: r-start 2;

　　grid-column-end: c-end 2;

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template-rows: repeat(3, [r-start] 100px [r-end]);
                        grid-template-columns: repeat(3, [c-start] 100px [c-end]);
                        
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;

                        grid-row-start: r-start 2;
                        grid-column-start: c-start 2;
                        grid-row-end: r-start 2;
                        grid-column-end: c-end 2;

                }
        </style>
</head>

<body>

        <main>
                <section>中間</section>
        </main>

</body>

</html>

自動命名

柵格元素之元素定位

　　我們可以使用以下方法對柵格元素進行定位，但是關於如何定位又分為很多種。

選項	說明
grid-row-start	行開始柵格線
grid-row-end	行結束柵格線
grid-column-start	列開始柵格線
grid-column-end	列結束柵格線

柵格線位置定位

　　柵格線位置定位實際上就是數數，在水平的第幾根線，在垂直的第幾根線。

　　還是老辦法，規定行開始線位置與行結束線位置以及列開始線位置和列結束線位置。

　　如下，可以看到，單純的就是數數，非常的簡單粗暴。

　　grid-row-start: 2;

　　grid-column-start: 2;

　　grid-row-end: 2;

　　grid-column-end: 2;

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template-rows: repeat(3, 100px);
                        grid-template-columns: repeat(3, 100px);

                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;

                        grid-row-start: 2;
                        grid-column-start: 2;
                        grid-row-end: 2;
                        grid-column-end: 2;

                }
        </style>
</head>

<body>

        <main>
                <section>中間</section>
        </main>

</body>

</html>

柵格線位置定位

柵格線自定義名稱定位

　　這個其實上面在說柵格線命名的時候就已經說過了，這里不再重復。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
                        grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;

                        grid-row-start: r2-start;
                        grid-column-start: c1-end;
                        grid-row-end: r2-end;
                        grid-column-end: c3-start;
                }
        </style>
</head>

<body>

        <main>
                <section>中間</section>
        </main>

</body>

</html>

柵格線自定義名稱定位

柵格線自動名稱定位

　　也是在上面介紹過了，不再詳細贅述。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template-rows: repeat(3, [r-start] 100px [r-end]);
                        grid-template-columns: repeat(3, [c-start] 100px [c-end]);
                        
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;

                        grid-row-start: r-start 2;
                        grid-column-start: c-start 2;
                        grid-row-end: r-start 2;
                        grid-column-end: c-end 2;

                }
        </style>
</head>

<body>

        <main>
                <section>中間</section>
        </main>

</body>

</html>

柵格線自動名稱定位

偏移量定位

　　這個其實也比較簡單，我們只需要指定行線的開始位置以及列線的開始位置即可，關於結束為止也是數數，使用span來數，往后走一根線還是兩根線。

　　grid-row-start: 1;

　　grid-column-start: 1;

　　/* 代表從行線開始位置向后數3根線 */

　　grid-row-end: span 3;

　　/* 代表從列線開始位置向后數3根線 */

　　grid-column-end: span 3;

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template-rows: repeat(3, 100px);
                        grid-template-columns: repeat(3, 100px);

                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 300px;
                        color: #fff;

                        grid-row-start: 1;
                        grid-column-start: 1;
                        /* 代表從行線開始位置向后數3根線 */
                        grid-row-end: span 3;
                        /* 代表從列線開始位置向后數3根線 */
                        grid-column-end: span 3;

                }
        </style>
</head>

<body>

        <main>
                <section>全占</section>
        </main>

</body>

</html>

偏移量定位

簡寫模式

　　可以使用 grid-row 設置行開始柵格線，使用 grid-column 設置結束柵格線。

　　grid-row: 3/span 3;

　　grid-column: 2/span 3;

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template-rows: repeat(3, 100px);
                        grid-template-columns: repeat(3, 100px);

                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;


                        grid-row: 3/span 3;
                        grid-column: 2/span 3;

                }
        </style>
</head>

<body>

        <main>
                <section>右下角兩格</section>
        </main>

</body>

</html>

簡寫模式

grid-area 極簡模式

　　grid-area是對上面的簡寫模式grid-row以及grid-column的再次簡寫，它的語法結構如下：

　　行線開始/列線開始/行線結束/列線結束

　　grid-area: 2/1/span 1/span 3;

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template-rows: repeat(3, 100px);
                        grid-template-columns: repeat(3, 100px);

                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;


                        grid-area: 2/1/span 1/span 3;

                }
        </style>
</head>

<body>

        <main>
                <section>中間三格</section>
        </main>

</body>

</html>

極簡模式

bootstrap柵格系統原理

　　bootstrap中的柵格系統將整個柵格容器分為了12個塊，其實它的原理非常簡單。

　　我們用目前所學的知識也能開發類似的組件，如下圖

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                .row {
                        padding: 10px;
                        width: 600px;
                        border: solid 5px silver;
                        display: grid;
                        grid-template-columns: repeat(12, 1fr);
                        gap: 10px 10px;
                }

                .col-1 {
                        grid-column-end: span 1;
                }

                .col-2 {
                        grid-column-end: span 2;
                }

                .col-3 {
                        grid-column-end: span 3;
                }

                .col-4 {
                        grid-column-end: span 4;
                }

                .col-5 {
                        grid-column-end: span 5;
                }

                .col-6 {
                        grid-column-end: span 6;
                }

                .col-7 {
                        grid-column-end: span 7;
                }

                .col-8 {
                        grid-column-end: span 8;
                }

                .col-9 {
                        grid-column-end: span 9;
                }

                .col-10 {
                        grid-column-end: span 10;
                }

                .col-11 {
                        grid-column-end: span 11;
                }

                .col-12 {
                        grid-column-end: span 12;
                }


                [class^="col-"] {
                        background-color: blueviolet;
                        background-clip: content-box;
                        height: 30px;
                        text-align: center;
                        color: #fff;



                }
        </style>
</head>

<body>

        <main>
                <div class="row">
                        <section class="col-8">col-8</section>
                        <section class="col-4">col-4</section>
                        <section class="col-4">col-4</section>
                        <section class="col-4">col-4</section>
                        <section class="col-4">col-4</section>
                        <section class="col-6">col-6</section>
                        <section class="col-6">col-6</section>
                </div>

        </main>

</body>

</html>

bootstrap柵格系統原理

柵格容器之柵格區域

　　柵格區域說白了就是一堆柵格的單元格組成的區域，一個單元格也是一個區域。我們可以使用柵格區域更方便的放置元素而不用再慢慢的數線放置，柵格區域放置元素通常用在大布局上。

　　使用 grid-template-areas聲明柵格區域時需要注意一點，柵格區域放置元素必須是矩形的。

　　你不能這樣放置這樣的一個元素：

柵格區域命名

　　來看一個簡單的案例，如何使用 grid-template-areas對柵格區域進行命名並填充元素。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template-rows: repeat(3, 100px);
                        grid-template-columns: repeat(3, 100px);

                        grid-template-areas: 
                        "top top top"
                        "mid mid mid" 
                        "bottom bottom bottom";

                        /* 由於繪制了9*9的單元格，我們必須給每個單元格進行了命名 ，而且一定要是這種格式*/

                }

                main *{
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;
                }

                main header{
                        /* 完整的寫法，推薦使用下面的簡寫方式*/
                        /* grid-area: top-start/top-start//top-start/top-end/top-end/top-end; */
                        grid-area: top;
                        background-color: blueviolet;
                }

                main article{
                        grid-area: mid;
                        background-color: violet;
                }

                main footer{
                        grid-area: bottom;
                        background-color: yellowgreen;
                }

        </style>
</head>

<body>

        <main>
               <header></header>
               <article></article>
               <footer></footer>
        </main>

</body>

</html>

柵格區域命名與定位

柵格區域邊界線自動命名

　　柵格區域邊界自動命名是什么意思呢？來看一下下面這張圖：

　　我們就按圖中這種命名來實驗一下。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template-rows: repeat(3, 100px);
                        grid-template-columns: repeat(3, 100px);

                        grid-template-areas: 
                        "top-left top-center top-right"
                        "mid-left mid-center mid-right" 
                        "bottom-left bottom-center bottom-right";

                        /* 由於繪制了9*9的單元格，我們必須給每個單元格進行了命名 ，而且一定要是這種格式*/

                }

                main *{
                         background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;
                }

                main div:first-of-type{
                        grid-area: top-left-start/top-left-start/mid-center-end/mid-center-end;
                        background-color: blueviolet;
                }

                main div:last-of-type{
                        grid-area: bottom-left-start/bottom-left-start/bottom-right-end/bottom-right-end;
                        background-color: violet;
                }



        </style>
</head>

<body>

        <main>
                <div></div>
                <div></div>
        </main>

</body>

</html>

柵格區域邊界線自動命名與定位

柵格區域命名占位

　　柵格區域命名占位就是說有的區域不想給他取名，那么就直接.就行。

　　為什么要這么做呢？看下圖以及代碼就能理解，我們在進行區域划分的時候就想好了這一塊區域是來干什么的，應該有多大，那么多余的地方直接.占位即可。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        /* height: 300px; */

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template-rows: repeat(3, 100px);
                        grid-template-columns: repeat(3, 100px);

                        grid-template-areas: 
                        "top top top"
                        "mid mid ." 
                        "bottom . .";

                        /* 由於繪制了9*9的單元格，我們給每個單元格進行了命名 ，一定要是這種格式*/

                }

                main *{
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;
                }

                main header{
                        /* 完整的寫法，推薦使用下面的簡寫方式*/
                        /* grid-area: top-start/top-start//top-start/top-end/top-end/top-end; */
                        grid-area: top;
                        background-color: blueviolet;
                }

                main article{
                        grid-area: mid;
                        background-color: violet;
                }

                main footer{
                        grid-area: bottom;
                        background-color: yellowgreen;
                }

        </style>
</head>

<body>

        <main>
               <header></header>
               <article></article>
               <footer></footer>
        </main>

</body>

</html>

柵格區域命名占位

柵格容器之元素排序

排序方式

　　默認情況下，整個柵格元素都是以行（水平）進行填充排序，我們可以在容器中設置grid-auto-flow 屬性可以改變元素排序的方式。

選項	說明
column	按列排序
row	按行排列

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        height: 300px;

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template: repeat(3,100px)/repeat(3,100px);
                        /* 排序方式：垂直 */
                        grid-auto-flow: column;
                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>
        </main>

</body>

</html>

元素排序

空間填充

　　當元素在柵格中放不下時，將會發生換行產生留白，使用grid-auto-flow: row dense; 可以執行填充空白區域操作。

　　如下圖，產生了兩個空間。

　　當設置之后可以發現，1和2的位置都沒變，3和4填充了上來：

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        height: 300px;

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template: repeat(3,100px)/repeat(3,100px);
                        /* 排序方式：水平  是否填充空間：填充 */
                        grid-auto-flow: row dense;

                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }
                main section:nth-of-type(1){
                        /* 列線 第1根開始往后數2根的區域 */
                        grid-column:1/span 2;
                }

                main section:nth-of-type(2){
                        /* 列線 第2根開始往后數2根的區域 */
                        grid-column:2/span 2;
                }


        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
        </main>

</body>

</html>

空間填充

對齊方式

選項	說明	對象
align-items	柵格內所有元素的垂直排列方式	柵格容器
justify-items	柵格內所有元素的橫向排列方式	柵格容器
justify-content	所有柵格在容器中的水平對齊方式，容器有額外空間時	柵格容器
align-content	所有柵格在容器中的垂直對齊方式，容器有額外空間時	柵格容器
align-self	元素在柵格中垂直對齊方式	柵格元素
justify-self	元素在柵格中水平對齊方式	柵格元素

選項	說明
start	元素按排序方式順序排列
end	元素按排序方式倒序排列
center	元素在容器中
space-between	第一個元素靠起點，最后一個元素靠終點，余下元素平均分配空間
space-around	每個元素兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍
space-evenly	元素間距離平均分配

所有區域對齊方式

　　其實這些和彈性布局中的用法都差不多，可以看一下前一章寫的彈性布局，那么這里就舉例一個平均分配吧。

　　平均分布指的是，柵格容器中的柵格區域（即單元格），在柵格容器中的對齊方式。

　　注意：柵格容器一定要有多余空間。

　　指定所有區域對齊方式使用justify-content與align-content

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 600px;
                        /* 寬度和高度要足夠大 */
                        height: 600px;

                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template: repeat(3,100px)/repeat(3,100px);
                        /* 水平平均 */
                        justify-content: space-evenly;
                        /* 垂直平均 */
                        justify-content: space-evenly;
                        align-content: space-evenly;

                }

                section {
                        
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;
                   
                        text-align: center;
                        line-height: 78px;
                        color: #fff;
                }



        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>
        </main>

</body>

</html>

所有區域對齊方式

所有元素對齊方式

　　指的是柵格區域中具體的柵格元素的對齊方式，比如說一個單元格太大了，那么里面內容又太小了該怎么做。

　　指定所有柵格區域中的具體元素使用：justify-items與align-items

　　注意：柵格區域一定要有多余空間。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        height: 300px;
                        
                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template: repeat(3,100px)/repeat(3,100px);

                        /* 控制具體元素在單元格中的位置 */
                        justify-items: center;
                        align-items: center;

                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        color: #fff;

                        width: 30px;
                        height: 30px;
                        line-height: 30px;
                     
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>
        </main>

</body>

</html>

所有元素對齊方式

單個元素對齊方式

　　如果想控制單個元素對齊方式，使用justify-self與align-self即可。

　　注意：盛放該元素的柵格區域一定要有多余空間。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                body {
                        padding: 100px;
                }

                main {
                        width: 300px;
                        height: 300px;
                        
                        border: solid 5px silver;
                        display: grid;

                        /* 行數，列數 */
                        grid-template: repeat(3,100px)/repeat(3,100px);

                        /* 控制具體元素在單元格中的位置 */
                        justify-items: center;
                        align-items: center;

                }

                section {
                        background-color: blueviolet;
                        background-clip: content-box;
                        padding: 10px;
                        border: dashed 1px black;

                        text-align: center;
                        color: #fff;

                        width: 30px;
                        height: 30px;
                        line-height: 30px;
                     
                }

                main section:nth-of-type(1){
                        justify-self: end;
                        align-self: end;
                }

                main section:nth-of-type(2){
                        justify-self: start;
                        align-self: end;
                }

                main section:nth-of-type(4){
                        justify-self: end;
                        align-self: start;
                }

                main section:nth-of-type(5){
                        justify-self: start;
                        align-self: start;
                }
        </style>
</head>

<body>

        <main>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
                <section>5</section>
                <section>6</section>
                <section>7</section>
                <section>8</section>
                <section>9</section>
        </main>

</body>

</html>

單個元素對齊方式

簡寫模式

　　place-content

　　用於控制柵格中所有區域的對齊方式，語法如下：

　　place-content: <align-content> <justify-content>

　　place-items

　　控制所有區域中所有元素的對齊方式，語法結構如下：

　　place-items: <align-items> <justify-items>

　　place-self

　　控制區域中單個元素的對齊方式，語法結構如下：

　　place-self: <align-self> <justify-self>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS布局之柵格布局 elementUI的柵格布局 BootStrap柵格布局 Bootstrap 柵格系統（布局）柵格布局的理解 grid柵格布局 element ui 柵格布局 BootStrap3柵格系統與布局聖杯布局以及雙飛燕布局（柵格） Qt 布局之三：柵格布局的使用詳解