Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > grid容器布局 display:grid
Blogger Information
Blog 21
fans 0
comment 0
visits 9408
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容器布局 display:grid
P粉116103988
Original
350 people have browsed it

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>
  12. </style>
  13. <body>
  14.     <div class="text">
  15.         <div class="item">
  16.             <div class="img">
  17.                 <a href=""><img src="./static/images/phpkjkf.png" alt=""></a>
  18.             </div>
  19.             <div class="title">
  20.                 <a href="">商品名称</a>
  21.             </div>
  22.             <div class="price">
  23.                 <a href="">RMB:68.00元</a>
  24.             </div>
  26.         </div>
  27.         <div class="item">
  28.             <div class="img">
  29.                 <a href=""><img src="./static/images/phpksrm.png" alt=""></a>
  30.             </div>
  31.             <div class="title">
  32.                 <a href="">商品名称</a>
  33.             </div>
  34.             <div class="price">
  35.                 <a href="">RMB:68.00元</a>
  36.             </div>
  38.         </div>
  39.         <div class="item">
  40.             <div class="img">
  41.                 <a href=""><img src="./static/images/tlbb.png" alt=""></a>
  42.             </div>
  43.             <div class="title">
  44.                 <a href="">商品名称</a>
  45.             </div>
  46.             <div class="price">
  47.                 <a href="">RMB:68.00元</a>
  48.             </div>
  50.         </div>
  51.         <div class="item">
  52.             <div class="img">
  53.                 <a href=""><img src="./static/images/dgjj.png" alt=""></a>
  54.             </div>
  55.             <div class="title">
  56.                 <a href="">商品名称</a>
  57.             </div>
  58.             <div class="price">
  59.                 <a href="">RMB:68.00元</a>
  60.             </div>
  62.         </div>
  63.         <div class="item">
  64.             <div class="img">
  65.                 <a href=""><img src="./static/images/phpkjkf.png" alt=""></a>
  66.             </div>
  67.             <div class="title">
  68.                 <a href="">商品名称</a>
  69.             </div>
  70.             <div class="price">
  71.                 <a href="">RMB:68.00元</a>
  72.             </div>
  74.         </div>
  75.         <div class="item">
  76.             <div class="img">
  77.                 <a href=""><img src="./static/images/phpksrm.png" alt=""></a>
  78.             </div>
  79.             <div class="title">
  80.                 <a href="">商品名称</a>
  81.             </div>
  82.             <div class="price">
  83.                 <a href="">RMB:68.00元</a>
  84.             </div>
  86.         </div>
  87.     </div>
  88.     <style>
  89.         .text{
  90.             width: 45em;
  91.             height: 50em;
  92.             /* 创建grid容器 */
  93.             display: grid;
  94.             /* 创建网格的行和列 */
  95.             /* 创建3列，每列15em */
  96.             grid-template-columns: repeat(3,15em);
  97.             /* 创建3行，每行高15em */
  98.             grid-template-rows: repeat(3,15em);
  99.             /* 容器格子域 ：1-6个 参数为：行开始/行结束/列开始/列结束*/
  100.             grid-area: 1/1/sapn 2 /span 2;
  101.             /* 网格间距设置 */
  102.             gap: 5px;
  103.             /* 项目在容器的对齐方式：平均分配剩余空间 */
  104.             place-content: space-between;
  105.             /* 设置项目在网格中的对齐方式：居中 */
  106.             place-items: center;
  108.         }
  109.         .text .item{
  110.             width: 10em;
  111.             height: 14em;
  112.         }
  113.         .text .item img{
  114.             width: 10em;
  115.             height: 10em;
  116.         }
  117.         .text >.item:nth-of-type(4){
  118.             /* 单独设置网格对齐方式 :左上角对齐*/
  119.             place-self: start;
  120.         }
  121.     </style>
  122. </body>
  123. </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