CSS柵格佈局

阿新 • • 發佈：2020-07-18

CSS柵格佈局

認識柵格佈局

　　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-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-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-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-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-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-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>

CSS柵格佈局

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

使用React程式碼動態生成柵格佈局的方法

作為 TerminalMACS 的一個子程序模組 - React Web管理端，使用Ant Design Pro作為框架。

CSS經典佈局——聖盃佈局

花了點力氣，找到了聖盃佈局的來源： https://alistapart.com/article/holygrail/ 1.程式碼

CSS浮動佈局

CSS浮動佈局浮動佈局　　浮動是CSS佈局中經常使用的一種手段，其實說白了就是使元素進行漂浮脫離正常的文件流排列機制，實現一堆原本的block狀態的標籤可以並排顯示，當然這也可以使用display:inline-block進行實

CSS定位佈局

CSS定位佈局基礎知識　　在CSS佈局中，定位佈局也是一種非常常見的技術手段，我們以京東為例：

CSS彈性佈局

CSS彈性佈局認識彈性佈局　　彈性佈局就是使用Flex來進行佈局，這是CSS3的一種新的佈局方式，相較於浮動佈局以及定位佈局，彈性佈局在開發效率以及維護性上都遠勝與前兩者。

CSS Flex 佈局

一、Flex佈局是什麼？　　Flex Box，意思是彈性佈局，用來為盒狀模型提供最大的靈活性。（盒狀模型，是由margin、border、padding、content幾個屬性組合形成的。）

css經典佈局

經典佈局方案聖盃佈局雙飛翼佈局（左右固定，中間自適應）聖盃佈局： <!DOCTYPE html>

css網頁佈局基礎

一、認識佈局以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置佈局模式有多種,不同的製作者會有不同的佈局設計

CSS——flex佈局最後一行列表左對齊的N種方法

一、flex佈局最後一行列表左對齊的N種方法效果展示：如果每一行列數是固定的

css網頁佈局

一、網頁佈局方式 #1、什麼是網頁佈局方式佈局可以理解為排版，我們所熟知的文字編輯類工具都有自己的排版方式，比如word，nodpad++等等

前端之css網頁佈局及JavaScript引入等相關內容-55

CSS網頁佈局及JavaScript引入 1.定位流 1、相對定位就是相對於自己以前在標準流中的位置來移動

輕輕鬆鬆學CSS:Flex佈局

　　 Flex佈局就是“彈性佈局”，它可以簡便、完整、響應式地實現各種頁面佈局。引入彈性佈局的目的，當頁面需要適應不同的螢幕大小確保元素擁有恰當的佈局方式，對一個容器中的子元素進行排列、對齊和分配空間。

只要一行程式碼，實現五種 CSS 經典佈局

頁面佈局是樣式開發的第一步，也是 CSS 最重要的功能之一。常用的頁面佈局，其實就那麼幾個。下面我會介紹5個經典佈局，只要掌握了它們，就能應對絕大多數常規頁面。

CSS浮動佈局帶來的高度塌陷以及其解決辦法

1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 <head> 4<meta charset=\"UTF-8\"> 5<title></title>

css-flex佈局語法篇

快速搞懂flex佈局(沒有案例，純語法，方便記憶) 什麼是flex佈局？ Flex 是 Flexible Box 的縮寫，意為\"彈性佈局\"，用來為盒狀模型提供最大的靈活性。

css--flex佈局

原文地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、什麼是Flex佈局？ Flex是Flexible Box的縮寫，顧名思義為“彈性佈局”，用來為盒裝模型提供最大的靈活性。

css--table佈局

display：table佈局單元格有一些比較特別的屬性，例如元素的垂直居中對齊，關聯伸縮等.

CSS常見佈局技巧——margin負值運用、文字圍繞浮動元素、三角強化

技術標籤：css 一、margin負值運用 1. 消除兩個盒子外邊框重合1+1=2的效果。解決方法：讓每個盒子margin往左側移動-1px，正好壓住相鄰盒子邊框。

CSS:flex佈局瀏覽器相容處理 ie8, ie9

瀏覽器相容性關於flex的W3C規範：http://dev.w3.org/csswg/css-flexbox-1/ 瀏覽器相容性可以參考CanIUse：http://caniuse.com/#feat=flexbox

CSS柵格佈局

CSS柵格佈局

認識柵格佈局

柵格容器

宣告柵格容器

柵格容器之劃分行列

固定寬高

百分比寬高

重複劃分

自動劃分

比例劃分

grid-template 簡寫

minmax劃分

柵格容器之間距定義

行間距

列間距

gap 簡寫

柵格容器之柵格線命名

獨立命名

自動命名

柵格元素之元素定位

柵格線位置定位

柵格線自定義名稱定位

柵格線自動名稱定位

偏移量定位

簡寫模式

grid-area 極簡模式

bootstrap柵格系統原理

柵格容器之柵格區域

柵格區域命名

柵格區域邊界線自動命名

柵格區域命名佔位

柵格容器之元素排序

排序方式

空間填充

對齊方式

所有區域對齊方式

所有元素對齊方式

單個元素對齊方式

簡寫模式

相關推薦