search

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

grid容器布局 display:grid

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

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>
上一条：移动端布局原理 三大视口之间的换算关系与rem+vw布局的原理与流程下一条：使用grid网格布局仿PHP中文网首页部分
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多