search

博客列表 >css中grid常用的属性和值

css中grid常用的属性和值

，多思曩惜，
，多思曩惜，原创
2020年04月22日 15:35:15453浏览

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很容易理解了，虽然属性有些多，但是意思很是直白，要多练习和记忆。
上一条：PHP：函数的类型、返回值、参数下一条：php 函数知识点概论
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多