博客 / 詳情

返回

CSS:網格佈局(grid)

grid容器

通過將屬性display的值設為grid，使 HTML 元素變為網格容器，該容器就可以使用與 CSS 網格（CSS Grid）相關的屬性。
例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
</div>

<style>
    .container{
        display:grid;
    }
</style>

grid屬性

1.grid-template-columns屬性值的個數表示網格的列數，而每個值表示對應列的寬度。

例如：

<style>
    .container{
        display:grid;
        grid-template-columns:100px 100px 100px;
    }
</style>

上面的代碼中在網格容器裏該屬性將元素佈局成三列網格，每列對應的寬度是100px。

2.grid-template-rows屬性值的個數表示網格的行數，而每個值表示對應列的高度。
例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>
    .container{
        display:grid;
        grid-template-columns:100px 100px 100px 100px 100px;
        grid-template-rows:50px 50px;
    }
</style>

上面的代碼中在網格容器裏該屬性將五個網格佈局兩行，第一行三列，第二行兩列，每行對應的高度是50px，寬度是100px；

3.網格單位

fr：設置列或行佔剩餘空間的一個比例；

auto：設置列寬或行高自動等於它的內容的寬度或高度；

%： 將列或行調整為它的容器寬度或高度的百分比；

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>

    .item1{background:LightSkyBlue;}
    .item2{background:LightSalmon;}
    .item3{background:PaleTurquoise;}
    .item4{background:LightPink;}
    .item5{background:PaleGreen;}

    .container{
        display:grid;
        grid-template-columns: auto 50px 10% 2fr 1fr;
    }
</style>

grid-template-columns: auto 50px 10% 2fr 1fr將容器裏的5個網格佈局成五列。第一列的寬與它的內容寬度相等；第二列寬 50px；第三列寬是網格容器的 10%；最後兩列，將網格容器剩餘的寬度平均分成三份，第四列佔兩份，第五列佔一份。
WechatIMG75133333.jpeg

4.grid-column-gap可以在列與列之間添加間距
例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>
    .container{
        display:grid;
        grid-template-columns:100px 100px 100px 100px 100px;
        grid-template-rows:50px 50px;
        grid-column-gap:20px;
    }
</style>

上面的代碼中將列與列之間的間距設為20px

5.grid-row-gap可以在行與行之間添加間距
例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>
    .container{
        display:grid;
        grid-template-columns:100px 100px 100px 100px 100px;
        grid-template-rows:50px 50px;
        grid-row-gap:10px;
    }
</style>

上面的代碼中將行與行之間的間距值設為10px

6.grid-gap是grid-row-gap和grid-column-gap的簡寫，如果grid-gap有一個值，行與行之間和列與列之的間距將等於該值。但是，如果有兩個值，第一個值將作為行與行的間距值，第二個值是列與列的間距值。
例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>

    .container{
        display:grid;
        grid-template-columns:100px 100px 100px 100px 100px;
        grid-gap:15x 25x;
    }
</style>

上面的代碼中行與行的間距為15px，列與列的間距為25px

7.grid-column控制的是網格本身，定義網格寬度開始和結束的位置，進而控制每個網格項佔用的列數。

WechatIMG7521111111.jpeg
例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>
 
    .container{
        display:grid;
    }
    .item5{
        grid-column: 1 / 3;
    }
</style>

結合上面的網格圖片上面的代碼中類名為item5的網格從左側第一條線開始到第三條線結束，佔用兩列。

WechatIMG75322222.jpeg

8.grid-row控制的是網格本身，定義網格高度開始和結束的位置，進而控制每個網格項佔用的行數。
例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>

    .container{
        display:grid;
    }
    .item5{
        grid-column: 1 / 3;
        grid-row: 2 / 4;
    }
</style>

WechatIMG754333333.jpeg
上面的代碼中類名為item5的網格從上面的第二條線開始到底部的第四條條線結束佔用兩行

9.justify-self屬性設置的是網格的內容在網格內沿着行軸對齊的方式。
start：網格的內容在網格里的左側對齊；

center：網格的內容在網格里的居中對齊；

end：網格的內容在網格里的右側對齊；

stretch：默認值，填滿網格區域的寬度；

例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>
    
    .container{
        display:grid;
    }
    .item5{
        justify-self:center;
    }
</style>

11.align-self屬性設置的是網格的內容在網格內沿着列軸對齊的方式。

start：網格的內容在網格內沿着列軸的頂部對齊；

center：網格的內容在網格內沿着列軸的中心對齊；

end：網格的內容在網格內沿着沿着列軸的底部對齊；

stretch：默認值，填滿網格區域的寬度；

12.justify-items對網格容器使用該屬性可以給網格中所有的網格項設置沿行軸對齊的方式。

start：網格的內容在網格里的左側對齊；

center：網格的內容在網格里的居中對齊；

end：網格的內容在網格里的右側對齊；

stretch：默認值，填滿網格區域的高度；

13.align-items對網格容器使用該屬性可以給網格中所有的網格項設置沿列軸對齊的方式。

start：網格沿着列軸的頂部對齊；

center：網格沿着列軸的中心對齊；

end：網格沿着列軸的底部對齊；

stretch：默認值，填滿網格區域的高度；

14.grid-template-areas屬性可以將網格中的一些網格單元格組合成一個區域（area），併為該區域指定一個自定義名稱。
例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>
    
    .container{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 10px;
        grid-template-areas:  
            "header header header"  
            "advert content content"  
            "footer footer footer";
    }
   
</style>

上面的代碼將頂部三個單元格合併成一個名為header的區域，將底部三個單元格合併為一個名為footer的區域，並在中間行生成兩個區域————advert和content。

15.grid-area以通過添加你定義的名稱將網格項放入自定義區域。

例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>
    
    .container{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 10px;
        grid-template-areas:  
            "header header header"  
            "advert content content"  
            "footer footer footer";
    }
    
    .item1{
        grid-area:header;
    }
    .item5{
        grid-area:footer;
    }
</style>

在上面的代碼中通過grid-area屬性將類名為item1的網格放入到了header區域裏，類名為item5的網格放入到了footer區域裏。

grid方法

1.repeat方法指定行或列的重複次數，後面加上逗號以及需要重複的值。

當使用grid-template-columns和grid-template-rows定義網格結構時，需要為添加的每一行和每一列都輸入一個值。如果要添加帶 100 行高度相同的網格，單獨放入 100 個值不太實際。這種情況下用repeat函數就有效的解決了這個問題。

例如添加100行網格的例子，使每行高度均為 50px，還可以用 repeat 方法重複多個值，並在定義網格結構時與其他值一起使用

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>
    
    .container{
        display:grid;
        grid-template-columns: repeat(2, 1fr 50px) 20px;
        grid-template-rows: repeat(100, 50px);
        
    }
</style>

注意：
1fr 50px重複了兩次，後面跟着 20px。

2.minmax可用於設置grid-template-columns和grid-template-rows的值。它的作用是在網格容器改變大小時限制網格項的大小。為此，需要指定網格項允許的尺寸範圍。

例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>
    
    .container{
        display:grid;
        grid-template-columns: 100px minmax(50px, 200px);
       
    }
</style>

在上面的代碼中，grid-template-columns被設置為添加兩列，第一列 100px 寬，第二列寬度最小值是 50px，最大值是 200px。

3.auto-fill根據容器的大小，儘可能多地放入指定大小的行或列。是repeat的方法內的功能。可以通過結合auto-fill和minmax來更靈活地佈局。

例如：

<div class="container">
    <div class="item1">網格1</div>
    <div class="item2">網格2</div>
    <div class="item3">網格3</div>
    <div class="item4">網格4</div>
    <div class="item5">網格5</div>
</div>

<style>
    
    .container{
        display:grid;
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
       
    }
</style>

在上面的代碼中列的寬度會隨容器大小改變，在可以插入一個 60px 寬的列之前，當前行的所有列會一直拉伸

4.auto-fit效果幾乎和auto-fill一樣。不同點僅在於，當容器的大小大於各網格項之和時，auto-fill將會持續地在一端放入空行或空列，這樣就會使所有網格項擠到另一邊；而auto-fit則不會在一端放入空行或空列，而是會將所有網格項拉伸至合適的大小。

注意：
如果容器無法使所有網格項放在同一行，餘下的網格項將移至新的一行。

grid , Css
user avatar xiangjiaochihuanggua 頭像 chongdianqishi 頭像 codepencil 頭像 _raymond 頭像
4 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.