Grid網格佈局學習整理

Grid網格佈局

Grid佈局是一個二維佈局方法，縱橫兩個方向總是同時存在。

作用在grid容器上	作用在grid子項上
grid-template-columns	grid-column-start
grid-template-rows	grid-column-end
grid-template-areas	grid-rows-start
grid-template	grid-row-end
grid-column-gap	grid-column
grid-row-gap	grid-row
grid-gap	grid-area
justify-items	justify-self
align-items	align-self
place-items	place-self
justify-content
align-content
place-content

grid-template-columns和grid-template-rows

對網格進行橫縱劃分，形成二維佈局。單位可以是像素，百分比，自適應以及fr單位（網格剩餘空間比例單位）。

有時候，我們網格的劃分是很規律的，如果需要添加多個橫縱網格時，可以利用repeat()語法進行簡化操作。

eg:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid</title>
    <style>
        .box {
            display: grid;
            width: 300px;
            height: 300px;
            border: 1px dashed gray;
            /* 三行四列 */
            /* grid-template-rows: 100px auto 25%; */
            /* grid-template-columns: 100px 100px 200px 100px; */
            /* grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr; */
            /* 另外的寫法 */
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
        }
        

        .box div {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="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-template-areas和grid-template

area是區域的意思，grid-template-areas就是給我們的網格劃分區域的。此時geid的子項只要使用grid-area屬性指定其隸屬於那個區。

grid-template就是grid-template-rows,grid-template-columns和grid-template-area屬性的縮寫

eg:

<!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>
        .box {
            display: grid;
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            /* grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
            grid-template-areas:
                "a1 a1 a1"
                "a2 a2 a3"
                "a2 a2 a3";
                 */
            /* 複合寫法 */
            grid-template:
                "a1 a1 a1"1fr "a2 a2 a3"1fr "a2 a2 a3"1fr /1fr 1fr 1fr;
        }

        .box div:nth-child(1) {
            grid-area: a1;
        }

        .box div:nth-child(2) {
            grid-area: a2;
        }

        .box div:nth-child(3) {
            grid-area: a3;
        }

        .box div {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>

    </div>
</body>

</html>

grid-column-gap和grid-row-gap

grid-column-gap和grid-row-gap屬性用來定義網格間隙的尺寸。

CSS grid-grap屬性是grid-column-gap和grid-row-gap屬性的縮寫

eg:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>網格間隙</title>
    <style>
        .box {
            display: grid;
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            /* grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
            grid-template-areas:
                "a1 a1 a1"
                "a2 a2 a3"
                "a2 a2 a3";
                 */
            /* 複合寫法 */
            grid-template:
                "a1 a1 a1"1fr "a2 a2 a3"1fr "a2 a2 a3"1fr /1fr 1fr 1fr;

            /* grid-column-gap: 10px;
            grid-row-gap: 20px; */
            /* 複合寫法 */
            grid-gap: 20px 10px;
        }

        .box div:nth-child(1) {
            grid-area: a1;
        }

        .box div:nth-child(2) {
            grid-area: a2;
        }

        .box div:nth-child(3) {
            grid-area: a3;
        }

        .box div {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>

    </div>
</body>

</html>

justify-items和align-items

justify-items指定了網格元素的水平呈現方式，是水平拉伸顯示，還是左中右對齊。align-items指定了網格元素的垂直呈現方式，是垂直拉伸顯示，還是上中下對齊

取值	含義
stretch	默認值，拉伸。表現爲水平或垂直填充。
start	表現爲容器左側對齊或頂部對齊。
end	表現爲容器右側或底部對齊。
center	表現爲水平或垂直居中對齊。

ps:綜合寫法先寫縱再寫橫
eg:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呈現方式</title>
    <style>
        .box {
            display: grid;
            width: 300px;
            height: 300px;
            border: 1px dashed gray;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
            /* 水平方向的拉伸 默認爲拉伸 不拉伸情況下內容撐開*/
            justify-items: start;
            /* 垂直方向的拉伸 默認爲拉伸 */
            align-items: start;
            /* 簡寫 縱向 橫向*/
            place-items: start start;
        }

        .box div {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="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>

ps:子項沒給高度所以內容撐開。

justify-content 和align-content

justify-content指定了網格元素的水平分佈方式。align-content指定了網格元素的垂直分佈方式。place-content可以讓align-content和justify-content屬性寫在一個CSS聲明中。

取值	含義
stretch	默認值，拉伸。
start	表現爲容器左側或頂部對齊。
end	表現爲容器右側或底部對齊。
center	表現爲水平或垂直居中對齊。
space-between	表現爲兩端對齊。
space-around	享有獨立不重疊的空白空間。
space-evenly	平均分配空白空間。

ps:綜合寫法：先縱再橫
eg:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分佈方式</title>
    <style>
        .box {
            display: grid;
            width: 500px;
            height: 500px;
            border: 1px dashed gray;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
            /* 水平分佈 */
            /* justify-content: start; */
            /* justify-content: space-between; */
            /* 垂直分佈 */
            /* align-content: space-between; */
            /* 簡寫  縱 橫*/
            /* place-content: space-between center; */
            /* place-content: space-around space-around; */
            place-content: space-evenly space-evenly;
        }

        .box div {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="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子項上的css屬性

取值	含義
grid-colunb-start	水平方向上佔據的起始位置。
grid-column-end	水平方向上佔據的結束位置。（span屬性）
grid-row-start	垂直方向上佔據的起始位置。
grid-row-end	垂直方向上佔據的結束位置。(span屬性)
grid-column	grid-column-start+grid-end的縮寫。
grid-row	grid-row-start+grid-row-end的縮寫。
grid-area	表示當前網格所佔的區域，名字和位置兩種表示方法。
justify-self	單個網格元素的水平對齊方式
align-self	單個網格的垂直對齊方式
place-self	align-self和justify-self的縮寫。

骰子點數案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骰子的點數</title>
    <style>
        .box,
        .box2,
        .box3,
        .box4,
        .box5,
        .box6 {


            /* 網格佈局 */
            display: grid;
            /* 佈局爲三行三列 */
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            /* 讓網格元素居中 */
            place-items: center center;
            /* 給網格區域取個名稱 */
            grid-template-areas:
                "a1 a2 a3"
                "a4 a5 a6"
                "a7 a8 a9"
            ;

            width: 100px;
            height: 100px;
            border: 1px solid black;
            border-radius: 5px;
            float: left;
            margin-left: 5px;
        }

        .box div,
        .box2 div,
        .box3 div,
        .box4 div,
        .box5 div,
        .box6 div {
            width: 20px;
            height: 20px;
            background-color: black;
            border-radius: 50%;
        }

        .box div:nth-child(1),
        .box3 div:nth-child(2) {
            grid-area: 2/2/3/3;
        }

        .box2 div:nth-child(2),
        .box3 div:nth-child(3) {
            grid-area: 3/3/4/4;
        }

        .box4 div:nth-child(2) {
            grid-area: a3;
        }

        .box4 div:nth-child(3) {
            grid-area: a9;
        }

        .box4 div:nth-child(4) {
            grid-area: a7;
        }

        .box5 div:nth-child(2) {
            grid-area: a3;
        }

        .box5 div:nth-child(3) {
            grid-area: a9;
        }

        .box5 div:nth-child(4) {
            grid-area: a7;
        }

        .box5 div:nth-child(5) {
            grid-area: a5;
        }

        .box6 div:nth-child(2) {
            grid-area: a3;
        }

        .box6 div:nth-child(3) {
            grid-area: a9;
        }

        .box6 div:nth-child(4) {
            grid-area: a7;
        }

        .box6 div:nth-child(5) {
            grid-area: a4;
        }

        .box6 div:nth-child(6) {
            grid-area: a6;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
    </div>
    <div class="box2">
        <div></div>
        <div></div>
    </div>
    <div class="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box6">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>

百度搜索風雲榜

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度搜索風雲榜</title>
    <style>
        .box {
            /* 網格佈局 */
            display: grid;
            width: 280px;
            height: 352px;
            margin: 100px auto;
            /* 四行三列 */
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr);
            grid-template-areas:
                "a1 a2 a2 "
                "a3 a2 a2 "
                "a4 a4 a5 "
                "a6 a7 a7"
            ;
            /* 間距 */
            grid-gap: 6px 6px;
        }

        .box div {

            border: 1px solid red;
        }

        .box div:nth-child(1) {
            grid-area: a1;
        }

        .box div:nth-child(2) {
            grid-area: a2
        }

        .box div:nth-child(3) {
            grid-area: a3;
        }

        .box div:nth-child(4) {
            grid-area: a4;
        }

        .box div:nth-child(5) {
            grid-area: a5;
        }

        .box div:nth-child(6) {
            grid-area: a6;
        }

        .box div:nth-child(7) {
            grid-area: a7;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>

Grid網格佈局學習整理

Grid網格佈局

grid-template-columns和grid-template-rows

grid-template-areas和grid-template

grid-column-gap和grid-row-gap

justify-items和align-items

justify-content 和align-content

作用在grid子項上的css屬性

移動web開發學習整理

博學谷案例練習

小米首頁案例練習

蘇寧易購首頁局部案例練習

簡書首頁案例練習

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

linux以太網驅動總結