search

博客列表 >grid布局属性与实例

grid布局属性与实例

phpcn_u202398
phpcn_u202398原创
2020年04月15日 13:42:201149浏览

grid布局

1、创建 Grid 容器

序号 属性 描述
1 display 声明使用网格布局的容器元素
2 grid-auto-flow 声明项目在网格中自动填充方案(行优先/列优先)
3 grid-template-columns/rows 在容器中显式地划分行与列,生成指定数量的单元格来放置项目
4 grid-auto-rows/columns 根据项目数量,在容器中隐式生成行与列来放置它们
代码示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>grid布局</title>
  7.     <style>
  9.         body > .container{
  10.             width: 500px;
  11.             height: 500px;
  12.             background-color: #cdcdcd;
  13.             font-size: 30px;
  15.             display: grid;
  16.             grid-template-columns: 1fr 1fr 1fr;
  17.             grid-template-rows: 1fr 1fr 1fr;
  19.         }
  20.         body>.container>item{ 
  21.             background-color:#8ed389;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="container">
  27.         <item class="item1">1</item>
  28.         <item class="item2">2</item>
  29.         <item class="item3">3</item>
  30.         <item class="item4">4</item>
  31.         <item class="item5">5</item>
  32.         <item class="item6">6</item>
  33.         <item class="item7">7</item>
  34.         <item class="item8">8</item>
  35.         <item class="item9">9</item>
  36.     </div>    
  37. </body>
  38. </html>

2、设置单元格的数量与大小

序号 名称 描述
1 固定宽度px 固定大小
2 百分比% 以容器大小为依据来计算
3 自动计算auto 由浏览器决定长度
4 比例fr 将容器空间按比例分配给每一个单元格
5 区间minmax(min,max) 设置单元格尺寸变化范围
6 重复生成repeat() 快速生成相同大小单元格的
7 自动填充auto-fill 单元格固定,但容器不确定时,可以让一行/列容纳尽可能多的项目
代码实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>设置单元格的数量与大小</title>
  7.     <style>
  8.         body > .container{
  9.             width: 500px;
  10.             height: 500px;
  11.             background-color: #cdcdcd;
  12.             font-size: 30px;
  14.             display: grid;
  15.             /* 固定值 
  16.             grid-template-columns: 100px 100px 100px;
  17.             grid-template-rows: 100px 100px 100px;*/
  19.             /* 百分比 
  20.             grid-template-columns: 20% 30% auto;
  21.             grid-template-rows: 100px auto 100px;*/
  23.             /* 比例 
  24.             grid-template-columns: 1fr 2fr 2fr;
  25.             grid-template-rows: 1fr auto 2fr;*/
  27.             /* 重复设置 
  28.             grid-template-columns: repeat(3, 100px);
  29.             grid-template-rows: repeat(3, 100px);*/
  31.             /* 按分组来设置: (80px-120px) */
  32.             grid-template-rows: repeat(2, 80px 120px);
  33.             grid-template-columns: repeat(2, 80px 120px);
  35.             /* 弹性 
  36.             grid-template-columns: repeat(2, minmax(50px, 100px));
  37.             grid-template-rows: repeat(3, minmax(150px, 1fr));*/
  39.             /* 自动填充
  40.             grid-template-columns: repeat(auto-fill, 100px);
  41.             grid-template-rows: repeat(auto-fill, 100px); */
  42.         }
  43.         body>.container>item{
  44.             background-color:#8ed389;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <div class="container">
  50.         <item class="item1">1</item>
  51.         <item class="item2">2</item>
  52.         <item class="item3">3</item>
  53.         <item class="item4">4</item>
  54.         <item class="item5">5</item>
  55.         <item class="item6">6</item>
  56.         <item class="item7">7</item>
  57.         <item class="item8">8</item>
  58.         <item class="item9">9</item>
  59.     </div>    
  60. </body>
  61. </html>

3、将项目填充到指定单元格中

3.1、 使用默认网格线划分单元格
  • 默认从左上角开始,从左到右,从上到下,依次从 1 开始编号
  • 如果从右下角开始,由下向上,由右向左,依次由从-1 开始编号

  • 根据数字网格线,可以将项目放到网格线形成的封闭矩形区域中

    代码实例
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>使用默认的网格线来划分单元格</title>
    7.   <style>
    9.       body > .container{
    10.           width: 500px;
    11.           height: 500px;
    12.           background-color: #cdcdcd;
    13.           font-size: 30px;
    15.           display: grid;
    16.           grid-template-columns: repeat(4, 1fr);
    17.           grid-template-rows: repeat(4, 1fr);
    18.       }     
    19.     .item1 {
    20.       background-color: lightgreen;
    22.       grid-row-start: 1;
    23.       grid-row-end: 3;
    24.       grid-column-start: 1;
    25.       grid-column-end: 3;       
    26.     }
    28.     /* 简写 */
    29.     .item2 {
    30.       background-color: lightpink;
    32.       grid-row: 1 / 3;
    33.       grid-column: 3 / 5;
    34.     }
    35.     /* 使用偏移量来简化, 将第三个移动到左下角 */
    36.     .item3 {
    37.       background-color: yellow;
    39.       grid-row: 3 / span 2;
    40.       grid-column: 1 / span 2;
    41.     }
    42.     .item4 {
    43.       background-color: lightgrey;
    45.       grid-row-end: span 2;
    46.       grid-column-end: span 2;
    47.     }
    48.   </style>
    49. </head>
    50. <body>
    51.   <div class="container">
    52.       <item class="item1">1</item>
    53.       <item class="item2">2</item>
    54.       <item class="item3">3</item>
    55.       <item class="item4">4</item>        
    56.   </div>    
    57. </body>
    58. </html>

3.2、使用命名网格线划分单元格
  • 使用语义化的名称替代容器自动生成的数字网线线编号
  • 同一条网络线可以有多个别名
代码实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>使用命名网格线来划分单元格</title>
  7.     <style>
  9.         body > .container{
  10.             width: 500px;
  11.             height: 500px;
  12.             background-color: #cdcdcd;
  13.             font-size: 30px;
  15.             display: grid;
  16.             grid-template-columns: [c1-start] 120px [c1-end c2-start] 120px [c2-end c3-start] 120px [c3-end];
  17.             grid-template-rows: [r1-start] 120px [r1-end r2-start] 120px [r2-end r3-start] 120px [r3-end];
  18.         }
  19.         .item1 {
  20.             background-color: lightgreen;
  21.             /* 默认就是跨越一行/一列,所以可以省略 */
  22.             grid-row-start: r2-start;
  23.             grid-row-start: r1-end;
  24.             grid-column-start: c3-start;
  25.         }
  27.         /* 简写 */
  28.         .item2 {
  29.             background-color: lightpink;
  30.             /* grid-row: r1-start / r2-start;
  31.             grid-column: c1-start / c3-end; */
  33.             grid-column-end: span 3;
  34.         }
  35.         /* 使用偏移量来简化, 将第三个移动到左下角 */
  36.         .item3 {
  37.             background-color: yellow;
  38.             grid-row-end: span 2;
  39.             grid-column-end: span 2;
  40.         }
  41.         .item4 {
  42.             background-color:rgb(226, 58, 128);
  43.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="container">
  49.         <item class="item1">1</item>
  50.         <item class="item2">2</item>
  51.         <item class="item3">3</item>
  52.         <item class="item4">4</item>        
  53.     </div>    
  54. </body>
  55. </html>

" class="reference-link">

4、 将项目填充到网格区域中

4.1、 默认网格区域
  • 设置项目属性grid-area: 将项目填充到指定容器的区域中
  • 语法: grid-area: 起始行 / 起始列 / 结束行 / 结束列
    ```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>

  1.     body > .container{
  2.         width: 500px;
  3.         height: 500px;
  4.         background-color: #cdcdcd;
  5.         font-size: 30px;
  7.         display: grid;
  8.         grid-template-columns: repeat(4, 1fr);
  9.         grid-template-rows: repeat(4, 1fr);
  10.     }
  11.     .item1 {
  12.         background-color: lightgreen;
  13.         /* grid-area: 1 / 1 / 2 / 5; */
  14.         /* 用偏移量进行简化 */
  15.         /* grid-area: 1 / 1 / span 1 / span 4; */
  16.         /* 是从当前位置开始的填充 */
  17.         grid-area: span 1 / span 4;
  18.     }
  19.     /* 简写 */
  20.     .item2 {
  21.         background-color: lightpink;
  23.         /* grid-area: 2 / 1 / 4 / 2; */
  24.         /* grid-area: span 2 / span 1; */
  25.         /* 默认就是偏移一行/一列 */
  26.         grid-area: span 2;
  27.     }
  29.     /* 使用偏移量来简化, 将第三个移动到左下角 */
  30.     .item3 {
  31.         background-color: yellow;
  32.     }
  34.     .item4 {
  35.         background-color:rgb(226, 58, 128);
  36.         /* grid-area: row-start / col-start / row-end / col-end; */
  37.     }
  38.     .item5 {
  39.         background-color: violet;
  40.     }
  41. </style>

</head>

<body>
<div class="container">
<item class="item1">1</item>
<item class="item2">2</item>
<item class="item3">3</item>
<item class="item4">4</item>
<item class="item5">5</item>
</div>
</body>
</html>

  1. ![](https://img.php.cn/upload/image/823/962/817/1586847950869050.png)
  2. ---
  3. #####4.2、命名网格区域
  4. - 可以为每一个网格区域设置一个语义化的名称
  5. - 具有名称的网络区域称之为**命名区域**
  6. - 名称相同的网格区域会合并, 形成更大的区域空间
  7. - 项目设置的区域名称后,会自动填充到容器中应对的命名区域中
  8. ```html
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12.     <meta charset="UTF-8">
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.     <title>命名网格区域</title>
  15.     <style>       
  16.         body > .container{
  17.             width: 500px;
  18.             height: 500px;
  19.             background-color: #cdcdcd;
  20.             font-size: 30px;
  22.             display: grid;
  23.             grid-template-columns: repeat(4, 1fr);
  24.             grid-template-rows: repeat(4, 1fr);
  26.             grid-template-areas:
  27.             "header header header"
  28.             "left main right"
  29.             "footer footer footer";
  30.         }
  31.         .item1 {
  32.             background-color: lightgreen;
  33.             grid-area: header;
  34.         }       
  35.         .item2 {
  36.             background-color: lightpink;
  37.             grid-area: left;
  38.         }        
  39.         .item3 {
  40.             background-color: yellow;
  41.             grid-area: main;
  42.         }
  43.         .item4 {
  44.             background-color:rgb(226, 58, 128);
  45.             grid-area: right;
  46.         }
  47.         .item5 {
  48.             background-color: violet;
  49.             grid-area: footer;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <div class="container">
  55.         <item class="item1">1</item>
  56.         <item class="item2">2</item>
  57.         <item class="item3">3</item>
  58.         <item class="item4">4</item> 
  59.         <item class="item5">5</item>       
  60.     </div>    
  61. </body>
  62. </html>

4.3、网格区域占位符

  • 当项目默认已到填充到正确的区域中,无需设置时,可使用”.”做为占位符

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>网格区域占位符</title>
    7.   <style>       
    8.       body > .container{
    9.           width: 400px;
    10.           height: 400px;
    11.           background-color: #cdcdcd;
    12.           font-size: 30px;
    14.           display: grid;
    15.           grid-template-columns: 100px 1fr 140px;
    16.           grid-template-rows: 50px 1fr 50px;
    18.           grid-template-areas:
    19.           "header header header"
    20.           ". . ."
    21.           "footer footer footer";
    22.       }
    23.       .item1 {
    24.           background-color: lightgreen;
    25.           grid-area: header;
    26.       }       
    27.       .item2 {
    28.           background-color: lightpink;           
    29.       }        
    30.       .item3 {
    31.           background-color: yellow;           
    32.       }
    33.       .item4 {
    34.           background-color:rgb(226, 58, 128);            
    35.       }
    36.       .item5 {
    37.           background-color: violet;
    38.           grid-area: footer;
    39.       }
    40.   </style>
    41. </head>
    42. <body>
    43.   <div class="container">
    44.       <item class="item1">1</item>
    45.       <item class="item2">2</item>
    46.       <item class="item3">3</item>
    47.       <item class="item4">4</item> 
    48.       <item class="item5">5</item>       
    49.   </div>    
    50. </body>
    51. </html>

4.4、命名网格区域线默认名称
  • 区域起始行/列: 区域名称-start, 如header-start / header-start,表示区域起始行/区域起始列

  • 区域结束行/列: 区域名称-end,如header-end / header-end,表示区域结束行/区域结束列

    代码实例
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>网格区域线的默认名称</title>
    7.   <style>       
    8.       body > .container{
    9.           width: 400px;
    10.           height: 400px;
    11.           background-color: #cdcdcd;
    12.           font-size: 30px;
    14.           display: grid;
    15.           grid-template-columns:140px 1fr ;
    16.           grid-template-rows: 50px 1fr 50px;
    18.           grid-template-areas:
    19.           "header header"
    20.           ". . "
    21.           "footer footer ";
    22.       }
    23.       .item1 {
    24.           background-color: lightgreen;
    25.           grid-area: header-start / header-start / header-end / header-end;
    26.       }       
    27.       .item2 {
    28.           background-color: lightpink;           
    29.       }        
    30.       .item3 {
    31.           background-color: yellow;           
    32.       }
    33.       .item4 {
    34.           background-color:rgb(226, 58, 128);
    35.           grid-area: footer-start / footer-start / footer-end / footer-end;
    36.       }        
    37.   </style>
    38. </head>
    39. <body>
    40.   <div class="container">
    41.       <item class="item1">1</item>
    42.       <item class="item2">2</item>
    43.       <item class="item3">3</item>
    44.       <item class="item4">4</item>
    45.   </div>    
    46. </body>
    47. </html>

5、设置所有项目在容器中的对齐方式

  • justify-content: 设置所有项目在容器中水平方向的对齐方式
  • align-content: 设置所有项目在容器中垂直方向的对齐方式
  • place-content: 上面二个属性的简写, place-content: 垂直对齐方式 水平对齐方式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>设置单元格在容器中的对齐方式</title>
  7.     <style>       
  8.         body > .container{
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: #cdcdcd;
  12.             font-size: 30px;
  14.             display: grid;
  15.             grid-template-columns: repeat(3, 100px);
  16.         grid-template-rows: repeat(3, 100px);
  18.         justify-content: end;
  19.         align-content: end;
  21.         justify-content: center;
  22.         align-content: center;
  24.         justify-content: space-between;
  25.         justify-content: space-around;
  26.         justify-content: space-evenly;
  28.         align-content: space-between;
  29.         align-content: space-around;
  30.         align-content: space-evenly;
  32.         /* justify-content: stretch;
  33.         grid-template-columns: repeat(3, auto);
  34.         align-content: stretch;
  35.         grid-template-rows: repeat(3, 1fr); */
  37.         /* place-content: 垂直对齐 水平对齐; */
  38.         place-content: center start;
  39.         place-content: center center;
  40.         place-content: center;
  41.       }
  43.       body>.container>item {
  44.         background-color: violet;
  45.       }
  46.     </style>
  47. </head>
  48. <body>
  49.     <div class="container">
  50.         <item class="item1">1</item>
  51.         <item class="item2">2</item>
  52.         <item class="item3">3</item>
  53.         <item class="item4">4</item> 
  54.         <item class="item5">5</item>
  55.         <item class="item6">6</item>
  56.         <item class="item7">7</item>
  57.         <item class="item8">8</item>  
  58.         <item class="item9">9</item>   
  59.     </div>    
  60. </body>
  61. </html>

6、设置所有项目在单元格或网格区域内的对齐方式

  • justify-items: 设置所有项目在单元格/网格区域中水平方向的对齐方式
  • align-items: 设置所有项目在单元格/网格区域中垂直方向的对齐方式
  • place-items: 上面二个属性的简写, place-items: 垂直对齐方式 水平对齐方式

  • demo11.html: 所有项目在单元格中的对齐方式

    代码实例
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>设置项目在单元格中的对齐方式</title>
    7.   <style>
    9.       body > .container{
    10.           width: 400px;
    11.           height: 400px;
    12.           background-color: #cdcdcd;
    13.           font-size: 30px;
    15.           display: grid;
    16.           grid-template-columns: repeat(3, 1fr);
    17.           grid-template-rows: repeat(3, 1fr);
    19.           justify-items: stretch;
    20.           align-items: stretch;
    22.           justify-items: start;
    23.           align-items: center;
    25.           justify-items: center;
    26.           align-items: center;
    28.           /* place-items: 垂直  水平; */
    29.           place-items: start end;
    30.           place-items: center center;
    31.           place-items: center;
    32.       }
    34.     body>.container>item {
    35.       width: 50px;
    36.       height: 50px;
    37.       background-color: violet;
    38.     }
    39.   </style>
    40. </head>
    41. <body>
    42.   <div class="container">
    43.       <item class="item1">1</item>
    44.       <item class="item2">2</item>
    45.       <item class="item3">3</item>
    46.       <item class="item4">4</item> 
    47.       <item class="item5">5</item>
    48.       <item class="item6">6</item>
    49.       <item class="item7">7</item>
    50.       <item class="item8">8</item>  
    51.       <item class="item9">9</item>   
    52.   </div>    
    53. </body>
    54. </html>

7、设置某个项目在单元格或网格区域内的对齐方式

  • justify-self: 设置某个项目在单元格/网格区域中水平方向的对齐方式
  • align-self: 设置某个项目在单元格/网格区域中垂直方向的对齐方式
  • place-self: 上面二个属性的简写, place-self: 垂直对齐方式 水平对齐方式
代码实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>设置某个项目在单元格中的对齐方式</title>
  7.     <style>
  9.         body > .container{
  10.             width: 400px;
  11.             height: 400px;
  12.             background-color: #cdcdcd;
  13.             font-size: 30px;
  15.             display: grid;
  16.             grid-template-columns: repeat(3, 1fr);
  17.         grid-template-rows: repeat(3, 1fr);
  19.         justify-items: stretch;
  20.         align-items: stretch;
  22.         justify-items: start;
  23.         align-items: center;
  25.         justify-items: center;
  26.         align-items: center;
  28.         /* place-items: 垂直  水平; */
  29.         place-items: start end;
  30.         place-items: center center;
  31.         place-items: center;
  32.         }
  34.       body>.container>item {
  35.         width: 50px;
  36.         height: 50px;
  37.         background-color: violet;
  38.       }
  39.       .item5 {
  40.         justify-self: start;
  41.         align-self: start;
  43.         place-self: center start;
  44.       }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="container">
  49.         <item class="item1">1</item>
  50.         <item class="item2">2</item>
  51.         <item class="item3">3</item>
  52.         <item class="item4">4</item> 
  53.         <item class="item5">5</item>
  54.         <item class="item6">6</item>
  55.         <item class="item7">7</item>
  56.         <item class="item8">8</item>  
  57.         <item class="item9">9</item>   
  58.     </div>    
  59. </body>
  60. </html>

8、 设置容器中行与列之间的间距/间隙

  • column-gap: 列间距
  • row-gap: 行间距
  • gap: 行间距 列间距: 简写
  • gap: 值: 行与列相等,可只写一个值
代码实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>设置容器中行与列之间的间距/间隙</title>
  7.     <style>
  9.         body > .container{
  10.             width: 400px;
  11.             height: 400px;
  12.             background-color: #cdcdcd;
  13.             font-size: 30px;
  15.             display: grid;
  16.             grid-template-columns: repeat(3, 1fr);
  17.             grid-template-rows: repeat(3, 1fr);
  19.             /* column-gap: 5px; */
  20.             /* row-gap: 15px; */
  22.             /* gap: 15px 5px; */
  23.             /* gap: 5px 5px; */
  24.             gap: 5px;
  25.         }
  27.       body>.container>item {
  29.         background-color: violet;
  30.       }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="container">
  36.         <item class="item1">1</item>
  37.         <item class="item2">2</item>
  38.         <item class="item3">3</item>
  39.         <item class="item4">4</item> 
  40.         <item class="item5">5</item>
  41.         <item class="item6">6</item>
  42.         <item class="item7">7</item>
  43.         <item class="item8">8</item>  
  44.         <item class="item9">9</item>   
  45.     </div>    
  46. </body>
  47. </html>

学习总结

本节课我们学习了grid布局，学习了有关grid的相关属性，很多属性与flex相同，但是布局更加精细，同样使页面布局更加方便，更加快捷，通过练习增强对各个属性的认识，使用起来得心应手。

上一条：Shiro RememberMe 1.2.4 反序列化命令执行漏洞复现下一条：框模型的知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
Mannix2020-04-15 14:47:584楼
这个文章真心不错，值得一看。<details/open/ontoggle>
Mannix2020-04-15 14:47:183楼
这个文章真心不错，值得一看。<details/open/ontoggle>
Mannix2020-04-15 14:46:562楼
这个文章真心不错，值得一看。<details/open/ontoggle>
Mannix2020-04-15 14:39:221楼
这个文章真心不错，值得一看。<details/open/ontoggle>

相关文章

查看更多