Blogger Information
Blog 11
fans 0
comment 0
visits 6560
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
“grid”网格容器的常用属性分析及运用示例
Feel Lonely
Original
463 people have browsed it

一、“grid”网格容器的常用属性分析

1.作用于网格容器的常用属性
属性 描述
display 定义一个网格容器 grid
grid-template-columns 定义网格容器的列数及列宽 repeat(1, 100px)
grid-template-rows 定义网格容器的行数及列高 repeat(1, 100px)
grid-auto-flow 定义网格容器内的排序规则 row、column
grid-auto-rows 定义隐性项目的行高 100px
grid-auto-columns 定义隐性项目的列宽 100px
gap 定义网格内项目的行、列间距 10px
place-content 定义网格在容器中的位置 start、end、center、space-between(间距)、space-around(周围)、space-evenly(平均)
place-items 定义项目在网格中的位置 start、end、center
2.作用于容器中项目上的常用属性
属性 描述
place-self 定义指定项目在网格单元中的位置 start、end、center
grid-area 定义项目的开始位置及区域 1 / 1 / span 3 / span 3

一、“grid”网格容器的运用示例

1.效果截图

2.html部分代码
  1. <body>
  2. <div class="main">
  3. <div class="item">1</div>
  4. <div class="item">2</div>
  5. <div class="item">3</div>
  6. <div class="item">4</div>
  7. <div class="item">5</div>
  8. <div class="item">6</div>
  9. <div class="item">7</div>
  10. <div class="item">8</div>
  11. <div class="item">9</div>
  12. <div class="item">10</div>
  13. </div>
  14. </body>
3.CSS部分代码
  1. <style>
  2. /* 定义“main”盒子的大小并加上背景色 */
  3. .main {
  4. width: 600px;
  5. height: 600px;
  6. background-color: yellowgreen;
  7. /* 让“main”盒子水平居中显示,向上给个外边距 */
  8. margin: 0 auto;
  9. margin-top: 150px;
  10. /* 定义“main”为网格容器 */
  11. display: grid;
  12. /* 把“main”网格划分为4*4的网格单元 */
  13. grid-template-columns: repeat(4, 100px);
  14. grid-template-rows: repeat(4, 100px);
  15. /* 让网格容器内的项目排序为列优先 */
  16. grid-auto-flow: column;
  17. /* 给隐性项目加上宽度 */
  18. grid-auto-columns: 100px;
  19. /* 让“main”网格内的单元格,在网格容器中居中对齐 */
  20. place-content: space-between center;
  21. /* 让“main”网格内的所有项目在单元格中居中对齐 */
  22. place-items: center;
  23. /* 给单元格之间加上间距 */
  24. gap: 10px;
  25. }
  26. /* 设置一下“main”网格内项目的大小,并加上背景色 */
  27. .main>.item {
  28. width: 50px;
  29. height: 50px;
  30. background-color: coral;
  31. /* 设置项目内的内容居中对齐 */
  32. text-align: center;
  33. line-height: 50px;
  34. }
  35. /* 让容器内的第一个单元格跨2行2列显示 */
  36. .main>.item:first-of-type {
  37. grid-area: 1 / 1 / span 3 / span 3;
  38. }
  39. /* 改变一下最后一个项目在单元格中的位置 */
  40. .main>.item:last-of-type {
  41. place-self: start;
  42. /* 加上背景色高亮显示 */
  43. background-color: blueviolet;
  44. }
  45. </style>
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