ASCII码 ASCII码

CSS:Grid网格布局2(解决了多年的困惑)

发布于：2022-05-28 16:21:25  栏目：技术文档

  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="item">item1</div>
  13.         <div class="item">item2</div>
  14.         <div class="item">item3</div>
  15.         <div class="item">item4</div>
  16.         <div class="item">item5</div>
  17.         <div class="item">item6</div>
  18.         <div class="item">item7</div>
  19.         <div class="item">item8</div>
  20.         <div class="item">item9</div>
  21.         <div class="item">item10</div>
  22.         <div class="item">item11</div>
  25.         <!-- div.item{item$@16}*2 -->
  28.     </div>
  31.     <style>
  33.         /* grid容器 */
  34.         .container{
  35.             width: 30em;
  36.             height: 30em;
  37.             background-color: lightcyan;
  38.             display: grid;
  41.             /* fr比例,直接等比例划分 */
  42.             grid-template-columns:repeat(3,10em);
  43.             grid-template-rows:repeat(3,10em);
  45.             /* gap:行间距，列间距 */
  46.             gap:10px;
  47.             /* gap:3px 3px; */
  49.             width: 40em;
  50.             height: 50em;
  52.             /* 隐式网格：容纳超出显式网格的项目 */
  53.             /* 当前的排列规则是行优先，现在一行排列，再换行显示 */
  54.             /* grid-auto-flow: column; */
  55.             grid-auto-rows: 10em;
  56.             grid-auto-columns: 10em;
  58.             /* 对齐的前提是要有剩余空间分配 */
  59.             /* 对齐的第二个前提：要有参照物，跟谁对齐
  60.             grid项目对齐有两个参照物：容器？项目中的单元格？ */
  62.             /* 1.所有项目在容器中的对齐方式 */
  63.             /* place-content: 垂直方向对齐方式，水平方向对齐方式; */
  64.             place-content: start start;
  65.             place-content: center center;
  67.             /* 容器中的空间，还可以把剩余空间在所有项目中分配 */
  68.             place-content: space-between space-around;
  69.             place-content: space-between;
  71.             /* 2.所有项目在所在单元格中的对齐方式 */
  72.             /* 对齐也是要有空间才可以对齐 */
  73.             place-items: center;
  76.         }
  79.         /* grid容器的子元素：.item 叫 grid项目 */
  81.         .container > .item{
  82.             background-color: violet;
  83.             /* margin: .1rem; 不可行的，要用gap */
  84.             width: 6em;
  85.             height: 6em;
  86.         }
  88.         .container > .item:nth-of-type(6){
  89.             background-color: yellow;
  90.             place-self: start end;
  91.         }
  95.     </style>
  96. </body>
  97. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行