博客列表 >实例演示Grid常用的容器与项目属性

实例演示Grid常用的容器与项目属性

P粉019280626
P粉019280626原创
2023年02月17日 03:30:28506浏览
  1. <!-- 实例演示Grid常用的容器与项目属性 -->
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <div class="container">
  12. <div class="kcb">kcb1</div>
  13. </div>
  14. <style>
  15. .container {
  16. width:900px;
  17. height:600px;
  18. display:grid;
  19. grid-template-columns: repeat(5,1fr);
  20. grid-template-rows: repeat(5,1fr);
  21. }
  22. .container > .kcb {
  23. background-color:blueviolet;
  24. }
  25. .container > .kcb:first-child {
  26. display:grid;
  27. grid-area:1 /2 /3 /4 ;
  28. gap:2px;
  29. color:blue;
  30. }
  31. </style>
  32. </body>
  33. </html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议