Web前端筆記（10）Grid佈局

Grid網格佈局：

Grid佈局是一個二維佈局方法，橫縱兩個方向總是同時存在。與flex佈局的語法類似，Grid佈局涉及到的語法也分爲兩類，一類是作用在Grid容器上的，另一類是作用在grid子項上的：

a. 作用在Grid容器上的語法：

1. grid-template-column:

2. grid-template-row:

1.2主要是對網格進行劃分，形成二維佈局，單位可以是像素，百分比，自適應以及fr單位（網格剩餘空間比例單位），網格的劃分是很規律的，如果需要添加多個橫縱網格時，可以利用repeat()語法進行簡化操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: grid;
            /*grid-template-rows: 50% 50%;*/
            /*grid-template-columns: 25% 25% 25% auto;    !*某一列自適應*!*/
            /*也可以用fr作爲單位*/
            grid-template-rows: 1fr 1fr;
            grid-template-columns: repeat(4, 1fr);  /*也可以使用repeat簡寫*/
        }
        #box div{
            background: red;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>
</html>

效果如下所示：

3. grid-template-area: 給網格劃分區域，此時grid子項只要使用grid-area屬性指定其隸屬於那個區

4. grid-template: 是rid-template-row，grid-template-column，grid-template-area屬性的縮寫：

例如要對上面的九宮格區域進行劃分，使得某幾個子項成爲一個區域：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);  /*也可以使用repeat簡寫*/
            grid-template-areas:                    /*分區*/
                    "A1 A1 A1"
                    "A2 A2 A3"
                    "A2 A2 A3";
        }
        #box div{
            background: red;
            border: 1px solid black;
        }

        #box div:nth-child(1){
            grid-area: A1;
        }
        #box div:nth-child(2){
            grid-area: A2;
        }
        #box div:nth-child(3){
            grid-area: A3;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

劃分效果如下所示：

5. grid-column-gap:

6. grid-row-gap:

7. grid-gap:

grid-column-gap， grid-row-gap用來定義網格中網格間隙的尺寸，grid-gap:是他們的縮寫：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);  /*也可以使用repeat簡寫*/
            grid-template-areas:                    /*分區*/
                    "A1 A1 A1"
                    "A2 A2 A3"
                    "A2 A2 A3";
            grid-column-gap: 10px;
            grid-row-gap: 5px;
        }
        #box div{
            background: red;
            border: 1px solid black;
        }

        #box div:nth-child(1){
            grid-area: A1;
        }
        #box div:nth-child(2){
            grid-area: A2;
        }
        #box div:nth-child(3){
            grid-area: A3;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

效果如下所示：

8. justify-items: 指定網格元素的水平呈現方式，是水平拉昇顯示還是左中右對齊顯示：（stretch, start,end center）

9. align-items: 指定網格元素的垂直呈現方式，是垂直拉昇顯示還是上中下對齊顯示：

10. place-items：可以讓justify-items，align-items屬性寫在單個聲明中，上述兩個的簡寫（縱橫方向）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);  /*也可以使用repeat簡寫*/
            justify-items: center;
            align-items: center;
        }
        #box div{
            background: red;
            border: 1px solid black;
            width: 50%;
            height: 50%;
        }

    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

效果如下所示：

11. justify-content：指定網格元素的水平分佈方式

12. align-content：指定網格元素的垂直分佈方式

13. place-content：上述兩個元素的簡寫

這個是隻有在容器偏大的時候纔會有作用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);  /*也可以使用repeat簡寫*/
            justify-content: space-around;
            align-content: space-evenly;
        }
        #box div{
            background: red;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

效果如下所示：

items與content中的區別是：

items是針對300x300的九宮格，每個大小是100x100, 在每個100x100的格子裏，控制裏面元素的呈現位置：

content針對的500x500的九宮格，每個大小是100x100, 控制9個100x100的格子在500x500的大容器中的表現方式：

b. 作用在Grid子項上的語法：

1. grid-column-start: 水平方向上所佔據的起始位置

2. grid-column-end: 水平方向上所佔據的結束位置

3. grid-row-start：垂直方向上所佔據的起始位置

4. grid-row-end：垂直方向上所佔據的結束位置

5. grid-column：grid-column-start，grid-column-end的複合寫法

6. grid-row: grid-row-start， grid-row-end的複合寫法

7. grid-area：表示當前網格所佔用的區域，名字和位置兩種表示方法，相當於上述的複合寫法：（值用/隔開）

表示子項所佔的區域的大小，行列的起始位置，例如，行的第一條線依次向下編號，列的第一條線從左到右依次編號

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);  /*也可以使用repeat簡寫*/
            border: 1px black solid;
        }
        #box div{
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 4;
            background: red;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
    </div>
</body>
</html>

效果如下所示：

8. justify-self：單個網格元素水平對齊方式

9. align-self：單個網格元素垂直對齊方式

10. place-self：justify-self， align-self的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);  /*也可以使用repeat簡寫*/
            border: 1px black solid;
        }
        #box div{
            background: red;
            border: 1px solid black;
        }

        #box div:nth-child(5){
            justify-self: left;
            align-self: flex-end;
        }

    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

效果如下所示：

Grid佈局案例：

利用grid佈局實現骰子效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 800px;
            display: grid;
            grid-template-rows: repeat(1, 1fr);
            grid-template-columns: repeat(6, 1fr);
            border: 1px solid gray;
            justify-items: center;
        }

        #box1{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: repeat(1, 1fr);
            justify-items: center;
            align-items: center;
        }
        #box1 div{
            width: 40%;
            height: 40%;
            border-radius: 50%;
            background: black;
        }

        #box2{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            justify-items: center;
            align-items: center;
        }

        #box2 div{
            width: 60%;
            height: 60%;
            background: black;
            border-radius: 50%;
        }

        #box2 div:last-child{
            width: 60%;
            height: 60%;
            background: black;
            border-radius: 50%;
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        #box3{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            justify-items: center;
            align-items: center;
        }

        #box3 div{
            width: 80%;
            height: 80%;
            background: black;
            border-radius: 50%;
        }

        #box3 div:nth-child(2)
        {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        #box3 div:nth-child(3)
        {
            grid-column: 3 / 4;
            grid-row: 3 / 4;
        }

        #box4{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            justify-items: center;
            align-items: center;
        }

        #box4 div{
            width: 55%;
            height: 55%;
            background: black;
            border-radius: 50%;
        }

        #box5{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            justify-items: center;
            align-items: center;
        }

        #box5 div{
            width: 75%;
            height: 75%;
            background: black;
            border-radius: 50%;
        }

        /*注： 在方格中，如果中間的點被移到其它地方去，空出來的位置後面的點會自動填補上來*/
        #box5 div:nth-child(5)     
        {
            /*background: red;*/
            grid-column: 3 / 4;
            grid-row: 3 / 4;
        }

        #box5 div:nth-child(4)
        {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
        }

        #box5 div:nth-child(3)
        {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        #box5 div:nth-child(2)
        {
            grid-column: 3 / 4;
            grid-row: 1 / 2;
        }

        #box6{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            justify-items: center;
            align-items: center;
        }

        #box6 div{
            width: 75%;
            height: 55%;
            background: black;
            border-radius: 50%;
        }

    </style>
</head>
<body>
    <div class="container">
        <div id="box1">
            <div></div>
        </div>

        <div id="box2">
            <div></div>
            <div></div>
        </div>

        <div id="box3">
            <div></div>
            <div></div>
            <div></div>
        </div>

        <div id="box4">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

        <div id="box5">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

        <div id="box6">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

    </div>
</body>
</html>

效果如下所示：

Web前端筆記（10）Grid佈局

Grid網格佈局：

linux安裝cuda和cudnn

模擬手機設備：使用 Playwright 實現移動端自動化測試

Mellanox網卡開啓SR-IOV

測試人員都是畫畫大神，讓我看看誰還不會用代碼圖？

Object.values()對象遍歷

我拍了拍Redis，被移出了羣聊···

網絡現代化通向雲原生應用的高速公路

面試官：說說你對序列化的理解

我宣佈，這是我找到的史上AI最全論文體系！

Web前端筆記（3）

Web前端筆記（7）

Web前端 Javascript筆記（1）數組

Web前端JavaScript筆記（7）ECMA6新增數組方法

Web前端筆記（5）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結