ASCII码 ASCII码

CSS:Grid网格布局2

发布于：2022-05-28 16:36:05  栏目：技术文档
  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网格布局2</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: 32em;
  31.             background-color: lightcyan;
  32.             display: grid;
  34.             /* grid-template-columns: 8em 8em 8em;
  35.             grid-template-rows:  8em 8em 8em; */
  37.             /* 等比例划分可以简化 */
  38.             grid-template-columns:repeat(3,8em);
  39.             grid-template-rows:repeat(4,8em);
  42.             /* fr比例,直接等比例划分 */
  43.             grid-template-columns:repeat(3,1fr);
  44.             grid-template-rows:repeat(5,1fr);
  47.         }
  49.         /* grid容器的子元素：.item 叫 grid项目 */
  51.         .container > .item1{
  52.             background-color: violet;
  54.              /* 默认位置 */
  55.         /* grid-row:起始行 、结束行 */
  56.             /* grid-row:1/2;
  57.             grid-column: 1/2;
  59.             /* 默认占用一行，可以省略后面的 */
  60.             /* grid-row:2;
  61.             grid-column: 2; */
  63.             /* 网格区域 */
  64.             /* grid-row:2/4;
  65.             grid-column: 2/4; */
  67.             /* 跨越行列表示 */
  68.             /* grid-row:1/ span 3;
  69.             grid-column: 2/span 2; */ 
  72.             /* 将上面的创建网格区域的属性进行简化 */
  73.             /* grid-area: 行开始/列开始/行结束/列结束; */
  74.             grid-area: 2/2/3/4;
  77.         }
  81.     </style>
  82. </body>
  83. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行