Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > CSS:Grid网格布局2(解决了多年的困惑)
Blogger Information
Blog 56
fans 0
comment 4
visits 38072
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网格布局2(解决了多年的困惑)
异乡客
Original
630 people have browsed it

  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>
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