1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Grid网格布局</title>
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <!-- div.item${item$}*9 -->
  12.         <div class="item1">item1</div>
  13.         <!-- <div class="item2">item2</div>
  14.         <div class="item3">item3</div>
  15.         <div class="item4">item4</div>
  16.         <div class="item5">item5</div>
  17.         <div class="item6">item6</div>
  18.         <div class="item7">item7</div>
  19.         <div class="item8">item8</div>
  20.         <div class="item9">item9</div> -->
  22.     </div>
  25.     <style>
  27.         /* grid容器 */
  28.         .container{
  29.             width: 24em;
  30.             height: 24em;
  31.             background-color: lightcyan;
  32.             display: grid;
  34.             grid-template-columns: 8em 8em 8em;
  35.             grid-template-rows:  8em 8em 8em;
  36.         }
  38.         /* grid容器的子元素：.item 叫 grid项目 */
  40.         .container > .item1{
  41.             background-color: violet;
  43.              /* 默认位置 */
  44.         /* grid-row:起始行 、结束行 */
  45.             grid-row:1/2;
  46.             grid-column: 1/2;
  48.             /* 默认占用一行，可以省略后面的 */
  49.             grid-row:2;
  50.             grid-column: 2;
  52.             /* 网格区域 */
  53.             grid-row:2/4;
  54.             grid-column: 2/4;
  56.             /* 跨越行列表示 */
  57.             grid-row:1/ span 3;
  58.             grid-column: 2/span 2;
  61.             /* 将上面的创建网格区域的属性进行简化 */
  62.             /* grid-area: 行开始/列开始/行结束/列结束; */
  63.             grid-area: 2/2/3/4;
  65.         }
  69.     </style>
  70. </body>
  71. </html>