简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css中grid常用的属性和值
Blogger Information
Blog 28
fans 0
comment 0
visits 25943
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css中grid常用的属性和值
，多思曩惜，
Original
452 people have browsed it

grid常用的属性

创建grid容器

  • display:grid创建容器

|属性值|描述|
|grid-template-coloums|划分容器中的列数|
|grid-template-rows|划分容器|
|grid-auto-rows|容器中放置不下的项目。会隐式生成单元格|
|grid-auto-row|设置项目在容器中以行的填充方式|
|grid-auto-column|设置项目在容器中以列的填充方式|

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .teacher {
  10.             width: 800px;
  11.             height: 800px;
  12.             background-color: wheat;
  13.             display: grid;
  14.             grid-template-columns: repeat(3, 1fr);
  15.             grid-template-rows: repeat(3, 1fr);
  16.             gap: 5px;
  17.         }
  18.         .container1 {
  19.             background-color: wheat;
  20.             display: grid;
  21.             grid-auto-flow: row;
  22.         }
  23.         .container2 {
  24.             background-color: wheat;
  25.             display: grid;
  26.             grid-auto-flow: column;
  27.         }
  28.         .container3 {
  29.             background-color: wheat;
  30.             display: grid;
  31.             grid-template-columns: 60px 60px 60px;
  32.         }
  33.         .container4 {
  34.             background-color: wheat;
  35.             display: grid;
  36.             grid-auto-flow: column;
  37.             grid-template-rows: 40px 40px;
  38.         }
  39.         .container5 {
  40.             background-color: wheat;
  41.             display: grid;
  42.             grid-template-columns: 60px 60px 60px;
  43.             grid-template-rows: 60px 60px;
  44.             grid-auto-rows: auto;
  45.         }
  46.         .item {
  47.             background-color: lightblue;
  48.             font-size: 2rem;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <div class="teacher">
  54.         <div class="container1">
  55.             <div class="item item1">1</div>
  56.             <div class="item item2">2</div>
  57.             <div class="item item3">3</div>
  58.             <div class="item item4">4</div>
  59.             <div class="item item5">5</div>
  60.             <div class="item item6">6</div>
  61.             <div class="item item7">7</div>
  62.         </div>
  63.         <div class="container2">
  64.             <div class="item item1">1</div>
  65.             <div class="item item2">2</div>
  66.             <div class="item item3">3</div>
  67.             <div class="item item4">4</div>
  68.             <div class="item item5">5</div>
  69.             <div class="item item6">6</div>
  70.             <div class="item item7">7</div>
  71.         </div>
  72.         <div class="container3">
  73.             <div class="item item1">1</div>
  74.             <div class="item item2">2</div>
  75.             <div class="item item3">3</div>
  76.             <div class="item item4">4</div>
  77.             <div class="item item5">5</div>
  78.             <div class="item item6">6</div>
  79.             <div class="item item7">7</div>
  80.         </div>
  81.         <div class="container4">
  82.             <div class="item item1">1</div>
  83.             <div class="item item2">2</div>
  84.             <div class="item item3">3</div>
  85.             <div class="item item4">4</div>
  86.             <div class="item item5">5</div>
  87.             <div class="item item6">6</div>
  88.             <div class="item item7">7</div>
  89.         </div>
  90.         <div class="container5">
  91.             <div class="item item1">1</div>
  92.             <div class="item item2">2</div>
  93.             <div class="item item3">3</div>
  94.             <div class="item item4">4</div>
  95.             <div class="item item5">5</div>
  96.             <div class="item item6">6</div>
  97.             <div class="item item7">7</div>
  98.         </div>
  99.     </div>
  100. </body>
  103. </html>

  • 预览效果

  • grid-template-columns:和grid-template-rows可以设置单元格的属性和大小

  1. <style>
  2.         /* 固定值 */
  3.         .container1 {
  4.             background-color: wheat;
  5.             display: grid;
  6.             grid-template-columns: 60px 60px 60px;
  7.             grid-template-rows: 60px 60px 60px;
  8.         }
  10.         /* 百分比 */
  11.         .container2 {
  12.             background-color: wheat;
  13.             display: grid;
  14.             grid-template-columns: 20% 30% auto;
  15.             grid-template-rows: 100px auto 100px;
  16.         }
  18.         /* 比例 */
  19.         .container3 {
  20.             background-color: wheat;
  21.             display: grid;
  22.             grid-template-columns: 1fr 1fr 2fr;
  23.             grid-template-rows: 1fr auto 2fr;
  24.         }
  26.         /* 重复设置 */
  27.         .container4 {
  28.             background-color: wheat;
  29.             display: grid;
  30.             grid-template-columns: repeat(3, 100px);
  31.             grid-template-rows: repeat(3, 100px);
  32.         }
  34.         /* 按分组 */
  35.         .container5 {
  36.             background-color: wheat;
  37.             display: grid;
  38.             grid-template-columns: repeat(2, 50px 100px);
  39.         }
  41.         /* 弹性 */
  42.         .container6 {
  43.             background-color: wheat;
  44.             display: grid;
  45.             grid-template-columns: repeat(2, minmax(50px, 100px));
  46.             grid-template-rows: repeat(3, minmax(100px, 1fr));
  47.         }
  49.         /* 自动填充 */
  50.         .container7 {
  51.             background-color: wheat;
  52.             display: grid;
  53.             grid-template-columns: repeat(auto-fill, 100px);
  54.             grid-template-rows: repeat(auto-fill, 100px);
  55.         }
  56.     </style>
  • 预览

使用默认的网格线来划分单元格

属性值 描述
grid-row-start 从第几行开始
grid-row-end 到第几行结束
grid-column-start 从第几列开始
grid-column-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>Document</title>
  7.     <style>
  8.         /* 固定值 */
  9.         .container1 {
  10.             width: 400px;
  11.             height: 400px;
  12.             background-color: wheat;
  13.             display: grid;
  14.             grid-template-columns: repeat(4, 1fr);
  15.             grid-template-rows: repeat(4, 1fr);
  16.         }
  17.         .item {
  18.             font-size: 2rem;
  19.         }
  20.         .item.item1 {
  21.             background-color: lightgreen;
  22.             grid-row-start: 1;
  23.             grid-row-end: 3;
  24.             grid-column-start: 1;
  25.             grid-column-end: 3;
  26.         }
  27.         /* 简写 */
  28.         .item.item2 {
  29.             background-color: lightpink;
  30.             grid-row: 1/3;
  31.             grid-column: 3/5;
  32.         }
  33.         /* 使用偏移量来简化 */
  34.         .item.item3 {
  35.             background-color: lightsalmon;
  36.             grid-row-start: 3;
  37.             grid-row-end: span 2;
  38.             grid-column-start: 1;
  39.             grid-column-end: span 2;
  40.         }
  41.         /* 偏移量简写 */
  42.         /*  .item.item3 {
  43.             background-color: lightsalmon;
  44.             grid-row:3/ span 2;
  45.             grid-column: 1/span 2;
  46.         } */
  47.         .item.item4 {
  48.             background-color: lightseagreen;
  49.             grid-row-end: span 2;
  50.             grid-column-end: span 2;
  51.         }
  52.     </style>
  53. </head>
  54. <body>
  55.     <div class="teacher">
  56.         <div class="container1">
  57.             <div class="item item1">1</div>
  58.             <div class="item item2">2</div>
  59.             <div class="item item3">3</div>
  60.             <div class="item item4">4</div>
  61.         </div>
  62.     </div>
  63. </body>
  64. </html>
  • 也可以使用命名网格线来划分单元格
  1. <style>
  2.       .container {
  3.         /* 容器大小 */
  4.         width: 400px;
  5.         height: 400px;
  6.         background-color: wheat;
  7.         /* 创建grid容器 */
  8.         display: grid;
  9.         grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
  10.         grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
  11.       }
  12.       .item {
  13.         font-size: 2rem;
  14.       }
  15.       .item.item1 {
  16.         background-color: lightgreen;
  17.         /* 默认就是跨越一行/一列,所以可以省略 */
  18.         grid-row-start: r2-start;
  19.         grid-row-start: r1-end;
  20.         grid-column-start: c3-start;
  21.       }
  22.       /* 简写 */
  23.       .item.item2 {
  24.         background-color: lightpink;
  25.         /* grid-row: r1-start / r2-start;
  26.         grid-column: c1-start / c3-end; */
  27.         grid-column-end: span 3;
  28.       }
  29.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  30.       .item.item3 {
  31.         background-color: yellow;
  32.         grid-row-end: span 2;
  33.         grid-column-end: span 2;
  34.       }
  35.       .item.item4 {
  36.         background-color: lightgrey;
  37.       }
  38.     </style>
  • 预览效果

网格区域占位符

  • grid-template-areas属性
  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>Document</title>
  7.     <style>
  8.         /* 固定值 */
  9.         .container1 {
  10.             width: 400px;
  11.             height: 400px;
  12.             background-color: wheat;
  13.             display: grid;
  14.             grid-template-columns: 80px 1fr 80px;
  15.             grid-template-rows: 40px 1fr 40px;
  16.             grid-template-areas:
  17.                 "hearder hearder hearder"
  18.                 "left main right"
  19.                 "footer footer footer";
  20.         }
  21.         .item {
  22.             font-size: 2rem;
  23.         }
  24.         .item.item1 {
  25.             background-color: lightgreen;
  26.             grid-area: hearder;
  27.         }
  28.         .item.item2 {
  29.             background-color: lightpink;
  30.             grid-area: left;
  31.         }
  32.         .item.item3 {
  33.             background-color: lightsalmon;
  34.             grid-area: main;
  35.         }
  36.         .item.item4 {
  37.             background-color: lightseagreen;
  38.             grid-area: right;
  40.         }
  42.         .item.item5 {
  43.             background-color: mediumaquamarine;
  44.             grid-area: footer;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <div class="teacher">
  50.         <div class="container1">
  51.             <div class="item item1">1</div>
  52.             <div class="item item2">2</div>
  53.             <div class="item item3">3</div>
  54.             <div class="item item4">4</div>
  55.             <div class="item item5">4</div>
  56.         </div>
  57.     </div>
  58. </body>
  59. </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>Document</title>
  7.     <style>
  8.         /* 固定值 */
  9.         .container1 {
  10.             width: 400px;
  11.             height: 400px;
  12.             background-color: wheat;
  13.             display: grid;
  14.             grid-template-columns: 80px 1fr 80px;
  15.             grid-template-rows: 40px 1fr 40px;
  16.             grid-template-areas:
  17.                 "hearder hearder hearder"
  18.                 ". . . "
  19.                 "footer footer footer";
  20.         }
  21.         .item {
  22.             font-size: 2rem;
  23.         }
  24.         .item.item1 {
  25.             background-color: lightgreen;
  26.             grid-area: hearder;
  27.         }
  28.         .item.item2 {
  29.             background-color: lightpink;
  30.         }
  31.         .item.item3 {
  32.             background-color: lightsalmon;
  33.         }
  34.         .item.item4 {
  35.             background-color: lightseagreen;
  36.         }
  37.         .item.item5 {
  38.             background-color: mediumaquamarine;
  39.             grid-area: footer;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <div class="teacher">
  46.         <div class="container1">
  47.             <div class="item item1">1</div>
  48.             <div class="item item2">2</div>
  49.             <div class="item item3">3</div>
  50.             <div class="item item4">4</div>
  51.             <div class="item item5">4</div>
  52.         </div>
  53.     </div>
  54. </body>
  55. </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>Document</title>
  7.     <style>
  8.         .container1 {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: wheat;
  12.             display: grid;
  13.             grid-template-columns: 80px 1fr 80px;
  14.             grid-template-rows: 40px 1fr 40px;
  15.             grid-template-areas:
  16.                 "hearder hearder hearder"
  17.                 ". . . "
  18.                 "footer footer footer";
  19.         }
  20.         .item {
  21.             font-size: 2rem;
  22.         }
  23.         .item.item1 {
  24.             background-color: lightgreen;
  25.             grid-area: hearder-start / hearder-start / hearder-end / hearder-end;
  26.         }
  27.         .item.item2 {
  28.             background-color: lightpink;
  29.         }
  30.         .item.item3 {
  31.             background-color: lightsalmon;
  32.         }
  33.         .item.item4 {
  34.             background-color: lightseagreen;
  35.         }
  36.         .item.item5 {
  37.             background-color: mediumaquamarine;
  38.             grid-area: footer-start/ footer-start/footer-end/footer-end;
  39.             ;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <div class="teacher">
  45.         <div class="container1">
  46.             <div class="item item1">1</div>
  47.             <div class="item item2">2</div>
  48.             <div class="item item3">3</div>
  49.             <div class="item item4">4</div>
  50.             <div class="item item5">5</div>
  51.         </div>
  52.     </div>
  53. </body>
  54. </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>Document</title>
  7.     <style>
  8.         .teacher {
  9.             width: 1500px;
  10.             height: 800px;
  11.             display: grid;
  12.             gap: 5px;
  13.             grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  14.             grid-template-rows: 1fr 1fr;
  15.         }
  16.         .container {
  17.             width: 250px;
  18.             height: 250px;
  19.             background-color: wheat;
  20.             display: grid;
  21.             grid-template-columns: repeat(3, 50px);
  22.             grid-template-rows: repeat(3, 50px);
  23.         }
  24.         .container1 {
  25.             justify-content: end;
  26.         }
  27.         .container2 {
  28.             align-content: end;
  29.         }
  30.         .container3 {
  31.             justify-content: end;
  32.             align-content: end;
  33.         }
  34.         .container4 {
  35.             justify-content: space-between;
  36.         }
  37.         .container5 {
  38.             justify-content: space-around;
  39.         }
  40.         .container6 {
  41.             justify-content: space-evenly;
  42.         }
  43.         .container7 {
  44.             align-content: space-between;
  45.         }
  46.         .container8 {
  47.             align-content: space-around;
  48.         }
  49.         .container9 {
  50.             align-content: space-evenly;
  51.         }
  52.         .container10 {
  53.             place-content: center start;
  54.         }
  55.         .container11 {
  56.             place-content: center center;
  57.         }
  58.         .container12 {
  59.             place-content: center;
  60.         }
  61.         .item {
  62.             background-color: cyan;
  63.             font-size: 2rem;
  64.             border: 1px solid white;
  65.         }
  66.     </style>
  67. </head>
  69. <body>
  70.     <div class="teacher">
  71.         <div class="container container1">
  72.             <div class="item item1">1</div>
  73.             <div class="item item2">2</div>
  74.             <div class="item item3">3</div>
  75.             <div class="item item4">4</div>
  76.             <div class="item item1">5</div>
  77.             <div class="item item2">6</div>
  78.             <div class="item item3">7</div>
  79.             <div class="item item4">8</div>
  80.         </div>
  81.         <div class="container container2">
  82.             <div class="item item1">1</div>
  83.             <div class="item item2">2</div>
  84.             <div class="item item3">3</div>
  85.             <div class="item item4">4</div>
  86.             <div class="item item1">5</div>
  87.             <div class="item item2">6</div>
  88.             <div class="item item3">7</div>
  89.             <div class="item item4">8</div>
  90.         </div>
  91.         <div class="container container3">
  92.             <div class="item item1">1</div>
  93.             <div class="item item2">2</div>
  94.             <div class="item item3">3</div>
  95.             <div class="item item4">4</div>
  96.             <div class="item item1">5</div>
  97.             <div class="item item2">6</div>
  98.             <div class="item item3">7</div>
  99.             <div class="item item4">8</div>
  100.         </div>
  101.         <div class="container container4">
  102.             <div class="item item1">1</div>
  103.             <div class="item item2">2</div>
  104.             <div class="item item3">3</div>
  105.             <div class="item item4">4</div>
  106.             <div class="item item1">5</div>
  107.             <div class="item item2">6</div>
  108.             <div class="item item3">7</div>
  109.             <div class="item item4">8</div>
  110.         </div>
  111.         <div class="container container5">
  112.             <div class="item item1">1</div>
  113.             <div class="item item2">2</div>
  114.             <div class="item item3">3</div>
  115.             <div class="item item4">4</div>
  116.             <div class="item item1">5</div>
  117.             <div class="item item2">6</div>
  118.             <div class="item item3">7</div>
  119.             <div class="item item4">8</div>
  120.         </div>
  121.         <div class="container container6">
  122.             <div class="item item1">1</div>
  123.             <div class="item item2">2</div>
  124.             <div class="item item3">3</div>
  125.             <div class="item item4">4</div>
  126.             <div class="item item1">5</div>
  127.             <div class="item item2">6</div>
  128.             <div class="item item3">7</div>
  129.             <div class="item item4">8</div>
  130.         </div>
  131.         <div class="container container7">
  132.             <div class="item item1">1</div>
  133.             <div class="item item2">2</div>
  134.             <div class="item item3">3</div>
  135.             <div class="item item4">4</div>
  136.             <div class="item item1">5</div>
  137.             <div class="item item2">6</div>
  138.             <div class="item item3">7</div>
  139.             <div class="item item4">8</div>
  140.         </div>
  141.         <div class="container container8">
  142.             <div class="item item1">1</div>
  143.             <div class="item item2">2</div>
  144.             <div class="item item3">3</div>
  145.             <div class="item item4">4</div>
  146.             <div class="item item1">5</div>
  147.             <div class="item item2">6</div>
  148.             <div class="item item3">7</div>
  149.             <div class="item item4">8</div>
  150.         </div>
  151.         <div class="container container9">
  152.             <div class="item item1">1</div>
  153.             <div class="item item2">2</div>
  154.             <div class="item item3">3</div>
  155.             <div class="item item4">4</div>
  156.             <div class="item item1">5</div>
  157.             <div class="item item2">6</div>
  158.             <div class="item item3">7</div>
  159.             <div class="item item4">8</div>
  160.         </div>
  161.         <div class="container container10">
  162.             <div class="item item1">1</div>
  163.             <div class="item item2">2</div>
  164.             <div class="item item3">3</div>
  165.             <div class="item item4">4</div>
  166.             <div class="item item1">5</div>
  167.             <div class="item item2">6</div>
  168.             <div class="item item3">7</div>
  169.             <div class="item item4">8</div>
  170.         </div>
  171.         <div class="container container11">
  172.             <div class="item item1">1</div>
  173.             <div class="item item2">2</div>
  174.             <div class="item item3">3</div>
  175.             <div class="item item4">4</div>
  176.             <div class="item item1">5</div>
  177.             <div class="item item2">6</div>
  178.             <div class="item item3">7</div>
  179.             <div class="item item4">8</div>
  180.         </div>
  181.         <div class="container container12">
  182.             <div class="item item1">1</div>
  183.             <div class="item item2">2</div>
  184.             <div class="item item3">3</div>
  185.             <div class="item item4">4</div>
  186.             <div class="item item1">5</div>
  187.             <div class="item item2">6</div>
  188.             <div class="item item3">7</div>
  189.             <div class="item item4">8</div>
  190.         </div>
  191.     </div>
  192. </body>
  193. </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>Document</title>
  7.     <style>
  8.         .teacher {
  9.             width: 1500px;
  10.             height: 800px;
  11.             display: grid;
  12.             gap: 5px;
  13.             grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  14.             grid-template-rows: 1fr 1fr;
  15.         }
  16.         .container {
  17.             width: 300px;
  18.             height: 300px;
  19.             background-color: wheat;
  20.             display: grid;
  21.             grid-template-columns: repeat(3, 1fr);
  22.             grid-template-rows: repeat(3, 1fr);
  23.         }
  24.         .container1 {
  25.            justify-items: stretch;
  26.         }
  27.         .container2 {
  28.             align-items: stretch;
  29.         }
  30.         .container3 {
  31.             justify-items: start;
  32.         }
  33.         .container4 {
  34.             align-items: center;
  35.         }
  36.         .container5 {
  37.             justify-items: center;
  38.         }
  39.         .container6 {
  40.             align-items: center;
  41.         }
  42.         .container7 {
  43.             place-items: start end;
  44.         }
  45.         .container8 {
  46.             place-items: center center;
  47.         }
  48.         .container9 {
  49.             place-items: center;
  50.         }
  51.         .item {
  52.             width: 40px;
  53.             height: 40px;
  54.             background-color: cyan;
  55.             font-size: 2rem;
  56.             border: 1px solid white;
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <div class="teacher">
  62.         <div class="container container1">
  63.             <div class="item item1">1</div>
  64.             <div class="item item2">2</div>
  65.             <div class="item item3">3</div>
  66.             <div class="item item4">4</div>
  67.             <div class="item item1">5</div>
  68.             <div class="item item2">6</div>
  69.             <div class="item item3">7</div>
  70.             <div class="item item4">8</div>
  71.         </div>
  72.         <div class="container container2">
  73.             <div class="item item1">1</div>
  74.             <div class="item item2">2</div>
  75.             <div class="item item3">3</div>
  76.             <div class="item item4">4</div>
  77.             <div class="item item1">5</div>
  78.             <div class="item item2">6</div>
  79.             <div class="item item3">7</div>
  80.             <div class="item item4">8</div>
  81.         </div>
  82.         <div class="container container3">
  83.             <div class="item item1">1</div>
  84.             <div class="item item2">2</div>
  85.             <div class="item item3">3</div>
  86.             <div class="item item4">4</div>
  87.             <div class="item item1">5</div>
  88.             <div class="item item2">6</div>
  89.             <div class="item item3">7</div>
  90.             <div class="item item4">8</div>
  91.         </div>
  92.         <div class="container container4">
  93.             <div class="item item1">1</div>
  94.             <div class="item item2">2</div>
  95.             <div class="item item3">3</div>
  96.             <div class="item item4">4</div>
  97.             <div class="item item1">5</div>
  98.             <div class="item item2">6</div>
  99.             <div class="item item3">7</div>
  100.             <div class="item item4">8</div>
  101.         </div>
  102.         <div class="container container5">
  103.             <div class="item item1">1</div>
  104.             <div class="item item2">2</div>
  105.             <div class="item item3">3</div>
  106.             <div class="item item4">4</div>
  107.             <div class="item item1">5</div>
  108.             <div class="item item2">6</div>
  109.             <div class="item item3">7</div>
  110.             <div class="item item4">8</div>
  111.         </div>
  112.         <div class="container container6">
  113.             <div class="item item1">1</div>
  114.             <div class="item item2">2</div>
  115.             <div class="item item3">3</div>
  116.             <div class="item item4">4</div>
  117.             <div class="item item1">5</div>
  118.             <div class="item item2">6</div>
  119.             <div class="item item3">7</div>
  120.             <div class="item item4">8</div>
  121.         </div>
  122.         <div class="container container7">
  123.             <div class="item item1">1</div>
  124.             <div class="item item2">2</div>
  125.             <div class="item item3">3</div>
  126.             <div class="item item4">4</div>
  127.             <div class="item item1">5</div>
  128.             <div class="item item2">6</div>
  129.             <div class="item item3">7</div>
  130.             <div class="item item4">8</div>
  131.         </div>
  132.         <div class="container container8">
  133.             <div class="item item1">1</div>
  134.             <div class="item item2">2</div>
  135.             <div class="item item3">3</div>
  136.             <div class="item item4">4</div>
  137.             <div class="item item1">5</div>
  138.             <div class="item item2">6</div>
  139.             <div class="item item3">7</div>
  140.             <div class="item item4">8</div>
  141.         </div>
  142.         <div class="container container9">
  143.             <div class="item item1">1</div>
  144.             <div class="item item2">2</div>
  145.             <div class="item item3">3</div>
  146.             <div class="item item4">4</div>
  147.             <div class="item item1">5</div>
  148.             <div class="item item2">6</div>
  149.             <div class="item item3">7</div>
  150.             <div class="item item4">8</div>
  151.         </div>
  152.     </div>
  153. </body>
  154. </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>Document</title>
  7.     <style>
  8.         .teacher {
  9.             width: 1500px;
  10.             height: 800px;
  11.             display: grid;
  12.             gap: 5px;
  13.             grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  14.             grid-template-rows: 1fr 1fr;
  16.         }
  17.         .container {
  18.             width: 300px;
  19.             height: 300px;
  20.             background-color: wheat;
  21.             display: grid;
  22.             grid-template-columns: repeat(3, 1fr);
  23.             grid-template-rows: repeat(3, 1fr);
  24.         }
  25.         .container1 {
  26.             place-items: center;
  27.         }
  28.         .item.item5 {
  29.             justify-self: end;
  30.         }
  31.         .item.item6 {
  32.             align-self: flex-end;
  33.         }
  34.         .item.item7 {
  35.             place-self: center end;
  36.         }
  37.         .item {
  38.             width: 40px;
  39.             height: 40px;
  40.             background-color: cyan;
  41.             font-size: 2rem;
  42.             border: 1px solid white;
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.     <div class="teacher">
  48.         <div class="container container1">
  49.             <div class="item item1">1</div>
  50.             <div class="item item2">2</div>
  51.             <div class="item item3">3</div>
  52.             <div class="item item4">4</div>
  53.             <div class="item item5">5</div>
  54.             <div class="item item2">6</div>
  55.             <div class="item item3">7</div>
  56.             <div class="item item4">8</div>
  57.         </div>
  58.         <div class="container container1">
  59.             <div class="item item1">1</div>
  60.             <div class="item item2">2</div>
  61.             <div class="item item3">3</div>
  62.             <div class="item item4">4</div>
  63.             <div class="item item6">5</div>
  64.             <div class="item item2">6</div>
  65.             <div class="item item3">7</div>
  66.             <div class="item item4">8</div>
  67.         </div>
  68.         <div class="container container1">
  69.             <div class="item item1">1</div>
  70.             <div class="item item2">2</div>
  71.             <div class="item item3">3</div>
  72.             <div class="item item4">4</div>
  73.             <div class="item item7">5</div>
  74.             <div class="item item2">6</div>
  75.             <div class="item item3">7</div>
  76.             <div class="item item4">8</div>
  77.         </div>
  78.     </div>
  79. </body>
  80. </html>

  • 预览效果

  • gap设置容器与容器中的间隙

总结

  • grid很容易理解了，虽然属性有些多，但是意思很是直白，要多练习和记忆。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：grid, 可以说是第一个真正专用于布局的css工具, 本质上说, grid更适合大屏幕 PC端, 移动端flex更有优势,毕竟屏幕小, 大多是一个方向排列元素
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！