博客列表 >grid容器布局 display:grid

grid容器布局 display:grid

P粉116103988
P粉116103988原创
2022年07月17日 22:19:17345浏览

grid容器相关属性介绍:

效果图如下:

代码如下:

  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>Document</title>
  8. <link rel="stylesheet" href="./static/css/reset.css">
  9. </head>
  10. <style>
  11. </style>
  12. <body>
  13. <div class="text">
  14. <div class="item">
  15. <div class="img">
  16. <a href=""><img src="./static/images/phpkjkf.png" alt=""></a>
  17. </div>
  18. <div class="title">
  19. <a href="">商品名称</a>
  20. </div>
  21. <div class="price">
  22. <a href="">RMB:68.00元</a>
  23. </div>
  24. </div>
  25. <div class="item">
  26. <div class="img">
  27. <a href=""><img src="./static/images/phpksrm.png" alt=""></a>
  28. </div>
  29. <div class="title">
  30. <a href="">商品名称</a>
  31. </div>
  32. <div class="price">
  33. <a href="">RMB:68.00元</a>
  34. </div>
  35. </div>
  36. <div class="item">
  37. <div class="img">
  38. <a href=""><img src="./static/images/tlbb.png" alt=""></a>
  39. </div>
  40. <div class="title">
  41. <a href="">商品名称</a>
  42. </div>
  43. <div class="price">
  44. <a href="">RMB:68.00元</a>
  45. </div>
  46. </div>
  47. <div class="item">
  48. <div class="img">
  49. <a href=""><img src="./static/images/dgjj.png" alt=""></a>
  50. </div>
  51. <div class="title">
  52. <a href="">商品名称</a>
  53. </div>
  54. <div class="price">
  55. <a href="">RMB:68.00元</a>
  56. </div>
  57. </div>
  58. <div class="item">
  59. <div class="img">
  60. <a href=""><img src="./static/images/phpkjkf.png" alt=""></a>
  61. </div>
  62. <div class="title">
  63. <a href="">商品名称</a>
  64. </div>
  65. <div class="price">
  66. <a href="">RMB:68.00元</a>
  67. </div>
  68. </div>
  69. <div class="item">
  70. <div class="img">
  71. <a href=""><img src="./static/images/phpksrm.png" alt=""></a>
  72. </div>
  73. <div class="title">
  74. <a href="">商品名称</a>
  75. </div>
  76. <div class="price">
  77. <a href="">RMB:68.00元</a>
  78. </div>
  79. </div>
  80. </div>
  81. <style>
  82. .text{
  83. width: 45em;
  84. height: 50em;
  85. /* 创建grid容器 */
  86. display: grid;
  87. /* 创建网格的行和列 */
  88. /* 创建3列,每列15em */
  89. grid-template-columns: repeat(3,15em);
  90. /* 创建3行,每行高15em */
  91. grid-template-rows: repeat(3,15em);
  92. /* 容器格子域 :1-6个 参数为:行开始/行结束/列开始/列结束*/
  93. grid-area: 1/1/sapn 2 /span 2;
  94. /* 网格间距设置 */
  95. gap: 5px;
  96. /* 项目在容器的对齐方式:平均分配剩余空间 */
  97. place-content: space-between;
  98. /* 设置项目在网格中的对齐方式:居中 */
  99. place-items: center;
  100. }
  101. .text .item{
  102. width: 10em;
  103. height: 14em;
  104. }
  105. .text .item img{
  106. width: 10em;
  107. height: 10em;
  108. }
  109. .text >.item:nth-of-type(4){
  110. /* 单独设置网格对齐方式 :左上角对齐*/
  111. place-self: start;
  112. }
  113. </style>
  114. </body>
  115. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议