亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 8
粉絲 1
評(píng)論 0
訪問量 14142
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
grid的建立與劃分形式、默認(rèn)和命名在網(wǎng)格線和網(wǎng)格區(qū)域的形式、項(xiàng)目與單元格的對(duì)齊方式以及項(xiàng)目之間的間距
雷斯提亞
原創(chuàng)
1677人瀏覽過

grid 容器

1. grid容器的行和列

1.1 創(chuàng)建grid容器

  • 文本：display: grid
序號(hào) 文本 描述
1 grid-template-columns 創(chuàng)建列，后面有幾位數(shù)表示有多少列
2 grid-template-rows 創(chuàng)建行，后面有幾位數(shù)表示有多少行
注：

對(duì)于放置不下的項(xiàng)目，會(huì)隱式生成單元格：

序號(hào) 文本 舉例
1 geid-auto-rows geid-auto-rows:auto
例：
  1. <head>
  2.  <style>
  3.         .container{
  4.             width: 400px;
  5.             height: 400px;
  6.             background-color:pink;
  7.             display: grid;
  8.             grid-template-columns: 100px 100px 100px;
  9.             grid-template-rows: 100px 100px 100px;
  11.         }
  12.         .item{
  13.             background-color: royalblue;
  14.             font-size: 2.5rem;
  15.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="container">
  21.         <div class="item document1">1</div>
  22.         <div class="item document2">2</div>
  23.         <div class="item document3">3</div>
  24.         <div class="item document4">4</div>
  25.         <div class="item document5">5</div>
  26.         <div class="item document6">6</div>
  27.         <div class="item document7">7</div>
  28.         <div class="item document8">8</div>
  29.         <div class="item document9">9</div>
  30.         <div class="item document10">10</div>
  31.         </div>

1.2 grid行和列的設(shè)置：

  • （1）固定值：
    1.     grid-template-columns: 100px 100px 100px;
    2.     grid-template-rows: 100px 100px 100px;

  • （2）百分比：

    1. grid-template-columns: 10% 30% auto;
    2. grid-template-rows: 20% 30% 20%;

  • （3）比例：

    1.   grid-template-columns: 1fr 3fr 2fr;
    2.   grid-template-rows: 2fr auto 3fr;

  • （4）重復(fù)設(shè)置：

  1.       grid-template-columns: repeat(3,100px);
  2.       grid-template-rows: repeat(3,50px);

  • （5）分組設(shè)置：

    1. grid-template-columns: repeat(2,100px 80px);
    2. grid-template-rows: repeat(2,60px 100px);

  • （6）彈性：

    1. grid-template-columns: repeat(2,minmax(80px,100px));
    2. grid-template-rows: repeat(2,minmax(50px,100px));

  • （7）自動(dòng)填充：

    1. grid-template-columns: repeat(auto-fill,100px);
    2. grid-template-rows: repeat(auto-fill,90px);
    3.       }

2. 用默認(rèn)的網(wǎng)格線來劃分單元格：

2.1 屬性：

序號(hào) 屬性 描述
1 grid-row-start 網(wǎng)格線水平開始位置
2 grid-row-end 網(wǎng)格線水平結(jié)束位置
3 grid-column-start 網(wǎng)格線垂直開始位置
4 grid-column-end 網(wǎng)格線垂直結(jié)束位置
例：
  1. <head>
  2.     <style>
  3.         .container{
  4.             width: 400px;
  5.             height: 400px;
  6.             background-color:pink;
  7.             display: grid;
  8.             grid-template-columns: repeat(4,1fr);
  9.             grid-template-rows: repeat(4,1fr);
  10.         }
  11.         .item{
  12.             background-color: royalblue;
  13.             font-size: 2.5rem;
  14.         }
  15.         .document1{
  16.             background-color: red;
  17.             grid-row-start: 1;
  18.             grid-row-end: 3;
  19.             grid-column-start: 1;
  20.             grid-column-end: 3;
  21.         }
  22.     </style>
  23. </head>

2.2 簡寫：

  • 格式：grid-row(grid-column):start/end
例：
  1.  .document1{
  2.             background-color: red;
  3.             grid-row: 1/3;
  4.             grid-column: 1/3;
  5.         }

3. 使用命名網(wǎng)格線來劃分單元格

3.1 屬性：

  • （1）格式：[r1-start]
  • （2）前面的字母可以隨意變換
  • （3）需要寫到grid-template-column/rows后面
    舉例：
    1. <style>
    2.       .container{
    3.           width: 400px;
    4.           height: 400px;
    5.           background-color:pink;
    6.           display: grid;
    7.           grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end c4-start] 100px [c4-end];
    8.           grid-template-rows:[r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end r4-start] 100px [r4-end];
    9.       }
    10.       .item{
    11.           background-color: royalblue;
    12.           font-size: 2.5rem;
    13.       }
    14.       .document1{
    15.           background-color: chartreuse;
    16.           grid-column-end: c2-end;
    17.           grid-row-end: r2-end;
    18.       }
    19.        .document3{
    20.           background-color: crimson;
    21.           grid-row-start: r3-start;
    22.           grid-column-start: c2-start;
    23.       }
    24.   </style>
    注：
  • 默認(rèn)就是跨越一行/一列,所以可以省略

3.2 簡寫：

  • 語法：``
    1. .document1{
    2.           background-color: chartreuse;
    3.           grid-column:c3-start/c4-start;
    4.           grid-row: r2-start/r2-end;
    5.       }
    6.       .document3{
    7.           background-color: crimson;
    8.           grid-column:c2-start/c3-start;
    9.           grid-row: r3-start/r3-end;
    10.       }

3.3 用偏移量來轉(zhuǎn)化：

  1.  .document1{
  2.             background-color: chartreuse;
  3.             grid-column-start: span 2;
  4.             grid-row-start: span 2;
  5.         }
  6.         .document3{
  7.             background-color: crimson;
  8.             grid-column-start: span 2;
  9.             grid-row-start: span 1;
  10.         }

4.默認(rèn)網(wǎng)格區(qū)域：

  • 格式：grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
例：
  1. .document1{
  2.             background-color: chartreuse;
  3.             grid-area: 1/1/3/3;
  4.         }
  5.         .document3{
  6.             background-color: crimson;
  7.             grid-area: 2/3/span 1/span 2;
  8.         }

5. 命名網(wǎng)格區(qū)域

  • 格式：grid-template-area: "-- -- --"
  • 注：設(shè)置網(wǎng)格命名區(qū)域，相同名稱的命名區(qū)域會(huì)合并
例：
  1. <head>
  2. <style>
  3.         .container{
  4.             width: 400px;
  5.             height: 400px;
  6.             background-color:pink;
  7.             display: grid;
  8.             grid-template-columns: 60px auto 100px;
  9.             grid-template-rows:50px auto 80px;
  10.             grid-template-areas: 
  11.             "heard heard heard"
  12.             "left main right"
  13.             "footer footer footer";
  14.         }
  15.         .item{
  16.             background-color: royalblue;
  17.             font-size: 2.5rem;
  18.         }
  19.         .document1{
  20.             background-color: chartreuse;
  21.             grid-area: heard;
  22.         }
  23.         .document2{
  24.             background-color: lightcoral;
  25.             grid-area: left;
  26.         }
  27.         .document3{
  28.             background-color: crimson;
  29.             grid-area: main;
  30.         }
  31.         .document4{
  32.             background-color: lightslategrey;
  33.             grid-area:right;
  34.         }
  35.         .document5{
  36.             grid-area: footer;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div class="container">
  42.         <div class="item document1">1</div>
  43.         <div class="item document2">2</div>
  44.         <div class="item document3">3</div>
  45.         <div class="item document4">4</div>
  46.         <div class="item document5">5</div>
  47.     </div>
  48. </body>

6. 網(wǎng)格區(qū)域占位符

例：
  1.  grid-template-areas:
  2.             "heard heard heard"
  3.             ". . ."
  4.             "footer footer footer";
  5.              .item{
  6.             background-color: royalblue;
  7.             font-size: 2.5rem;
  8.         }
  9.         .document1{
  10.             background-color: chartreuse;
  11.             grid-area: heard;
  12.         }
  13.         .document2{
  14.             background-color: lightcoral;
  15.         }
  16.         .document3{
  17.             background-color: crimson;
  18.         }
  19.         .document4{
  20.             background-color: lightslategrey;
  21.         }
  22.         .document5{
  23.             grid-area: footer;
  24.         }

7. 設(shè)置單元格在容器中的對(duì)齊方式

  • （1）justify-content:主軸對(duì)齊方式
  • （2）align-content：交叉軸對(duì)齊方式

    7.1 屬性設(shè)置：

    例：
    1. .container{
    2.           width: 400px;
    3.           height: 400px;
    4.           background-color:pink;
    5.           display: grid;
    6.           grid-template-columns: repeat(3,100px);
    7.           grid-template-rows:repeat(3,100px);
    8.           justify-content: space-evenly;
    9.           align-content: space-around;
    10.       }

    7.2 對(duì)齊方式簡寫：

  • 語法：place-content: 垂直對(duì)齊 水平對(duì)齊
    例：
    1. .container{
    2.           width: 400px;
    3.           height: 400px;
    4.           background-color:pink;
    5.           display: grid;
    6.           grid-template-columns: repeat(3,100px);
    7.           grid-template-rows:repeat(3,100px);
    8.           place-content: space-evenly space-around;
    9.       }

8. 設(shè)置項(xiàng)目在單元格中的對(duì)齊方式

  • （1）justify-items：網(wǎng)格中的內(nèi)容順著主軸對(duì)齊
  • （2）align-items：網(wǎng)格中的內(nèi)容順著交叉軸對(duì)齊

    8.1 屬性設(shè)置：

    例：
  1. justify-items: end;
  2. align-items:start

8.2 對(duì)齊方式簡寫：

  • 語法：place-items: 垂直 水平
    例：
    1. place-items: start end;

9. 設(shè)置某個(gè)項(xiàng)目在單元格的對(duì)齊方式

  • （1）justify-self單個(gè)網(wǎng)格中的內(nèi)容順著主軸對(duì)齊
  • （2）align-self單個(gè)網(wǎng)格中的內(nèi)容順著交叉軸對(duì)齊

    9.1 屬性設(shè)置：

    例：
    1.      .container{
    2.           width: 400px;
    3.           height: 400px;
    4.           background-color:pink;
    5.           display: grid;
    6.           grid-template-columns: repeat(3,1fr);
    7.           grid-template-rows:repeat(3,1fr);
    8.       }
    9.       .item{
    10.           background-color: royalblue;
    11.           font-size: 2.5rem;
    12.       }
    13.       .document1{
    14.           background-color: chartreuse;
    15.           justify-self: center;
    16.           align-self: center;
    17.       }
    18.       .document2{
    19.           background-color: lightcoral;
    20.           justify-self: end;
    21.           align-self:end
    22.       }

    9.2 對(duì)齊方式簡寫：

    1.       .document1{
    2.           background-color: chartreuse;
    3.           place-self: center center;
    4.       }
    5.       .document2{
    6.           background-color: lightcoral;
    7.           place-self: end end;

10. 設(shè)置項(xiàng)目之間的間距

  • 語法：gap:豎直方向 水平方向
    例：
    1. .container{
    2.           width: 400px;
    3.           height: 400px;
    4.           background-color:pink;
    5.           display: grid;
    6.           grid-template-columns: repeat(3,1fr);
    7.           grid-template-rows:repeat(3,1fr);
    8.           gap: 10px 20px;
    9.       }

課程總結(jié)：

  • （1）grid容器也需要display屬性創(chuàng)建
  • （2）grid可以顯式地劃分行與列：grid-template-row/column
  • （3）grid劃分行與列可以用不同形式劃分（例：固定值、百分比、比例等等）
  • （4）grid劃分單元格可以用默認(rèn)網(wǎng)格線和命名網(wǎng)格線來劃分
  • （5）默認(rèn)網(wǎng)格線：grid-row(column)-start(end)
  • （6）命名網(wǎng)格線：grid-row(column)-start(end)：r1-start/r3-end
  • （7）默認(rèn)網(wǎng)格區(qū)域：grid-area: row-start / column-start / row-end / column-end
  • （8）單元格在容器中的對(duì)齊方式：justify-content/align-content
  • （9）項(xiàng)目在單元格中的對(duì)齊方式(某個(gè)項(xiàng)目在單元格中的對(duì)齊方式)：justify-items/align-items
  • （10)項(xiàng)目之間的間距:gap:豎直方向 水平方向
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：grid布局的強(qiáng)大之處, 以后會(huì)體會(huì)到
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)