Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid属性
Blogger Information
Blog 46
fans 2
comment 0
visits 19512
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
grid属性
P粉314265155
Original
363 people have browsed it

创建grid容器，进行行；列及跨行跨列排列

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>
  9.     <style>
  10.     .box{
  11.         display: grid;
  12.         border: 2px solid rebeccapurple;
  13.         border-color: aqua; 
  14.         background-color: blue;
  15.         width: 30em;
  16.         height: 30em;
  17.          grid-template-columns:  10em   10em  10em   ;
  18.          grid-template-rows:  10em  10em    10em; 
  19.          /* grid-template-columns: repeat(3, 10em);
  20.         grid-template-rows: repeat(3, 10em); */
  21.     }
  24. .box > .box1{
  26.     /* 注意跨行列时，将项目宽度高度去掉，不然不生效 */
  27.  /* width: 5em;
  28.  height: 5em; */
  29. background-color: black;
  30.  color: brown;
  31. /* grid-row-start: 2 ;
  32. grid-row-end: 3;
  33. grid-column-start: 3;
  34. grid-column-end: 3;
  35. grid-row: 2 ;
  36. grid-column: 3;
  37. grid-row: 1 / 2;
  38. grid-column: 2/3; */
  40. grid-row: 2 / span2;
  41. grid-column: 2 /  span 4;
  42. grid-row: 2 / span 2; 
  43. grid-row: 3 / span1;
  44. grid-row: 2 / span2;
  45. grid-column: 2 /  span2;
  47. grid-row: 3 / span1;
  48. /* 简化   grid-row: 3       span1是默认的 */
  49. grid-column: 1 /  span3;
  51. /*grid-area: ; 直接定义网格区域 
  52.                行开始、列开始、航结束、列结束
  54. */
  55. grid-area:   2   / 2    /  span2  /  span2 ; 
  57. }
  59.     </style>
  60. </head>
  61. <body>
  62.     <div class="box">
  64.         <div class="box1">123456789</div>
  65.     </div>
  66. </body>
  67. </html>

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  10.   .box  {
  11. display: grid;
  12. background-color: aliceblue;
  13. width: 30em;
  14. height: 30em;
  16. /* 注意repeat 括弧里面加逗号 */
  17. grid-template-columns: repeat(3 10em);
  18. /* grid-template-rows: repeat(2 100px); */
  19. grid-template-rows: repeat(3, 10em);
  21. grid-template-columns: 10em  10em  10em ;
  22.        /* 行的意思  创建3行 每行 宽度10个em */
  23. grid-template-rows: 10em  10em  10em ;
  25.         grid-template-columns: repeat(3, 10em);
  26.         grid-template-rows: repeat(3, 10em);
  28.         /* 默认行排列 */
  29.        grid-auto-flow: row;
  30.        /* 可以列排列 */
  31.        grid-auto-flow: column;
  32.            /* 默认自动排列填充 */
  33.       /* grid-auto-rows: auto;  */
  35.       /* 容器中的列宽   只有两个值上下   左右 */
  36.     gap: 1em 1em ; 
  37. /* place-content剩余空间  容器剩余空间的对齐    
  38. 两个值第一个垂直第二个水平
  39. */
  41.         place-content: center end;
  42.         place-content: center center;
  43.         place-content: center;
  44.         place-content: center start;
  45.     /* 所有剩余空间还可以在项目之间进行分配   也是两个值  */
  46.     place-content: space-between space-around;
  47.         place-content: space-between space-between;
  48.         place-content: space-between;
  51. /* place-items项目在网格单元中的对齐方式   也是两个值 */
  52. place-items: center;
  53. place-items:  start end;
  55.   }
  57. .box > .box1{
  58.     background-color: blue;
  59.     width: 5em;
  60.     height: 5em;
  63. }
  65. </style>
  67. </head>
  68. <body>
  70.     <div class="box">
  71.         <div class="box1">item1</div>
  72.         <div class="box1">item2</div>
  73.         <div class="box1">item3</div>
  74.         <div class="box1">item4</div>
  75.         <div class="box1">item5</div>
  76.         <div class="box1">item6</div>
  77.         <div class="box1">item7</div>
  78.         <div class="box1">item8</div>
  79.         <div class="box1">item9</div>
  80.         <div class="box1">item10</div>
  81.         <div class="box1">item11</div>
  83.     </div>
  86. </body>
  87. </html>

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
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