gird常用的9个属性

2022年09月22日 16:56:51阅读数:133博客 / P粉854918706 / 前端基础

gird常用的9个属性

1.gird:定义grid容器

2.grid-template-rows/columns:显示生成网格单元,用repeat(数量,尺寸)

3.grid-area:用grid-area:开始行/开始列/span占据行/span占据列了。 将项目放入到具体的网格单元中,是grid-row-start/end或者grid-row/column的简写

4.grid-auto-flow:用来定义排列规则,默认row

5.grid-auto-rows/columns:自动生成的网格行或列的尺寸

6.gap:定义网格空隙大小,第一个值表示行,第二个值表示列

7.place-content:所有项目在容器中的对齐方式,

8.place-items:项目在单元格中的对齐方式

9.place-self:某个项目在单元格中的对齐方式

代码示例:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. </head>
  9. <body>
  10. <div class="box">
  11. <div class="item">item1</div>
  12. <div class="item">item2</div>
  13. <div class="item">item3</div>
  14. <div class="item">item4</div>
  15. <div class="item">item5</div>
  16. <div class="item">item6</div>
  17. <div class="item">item7</div>
  18. <div class="item">item8</div>
  19. <div class="item">item9</div>
  20. <div class="item">item10</div>
  21. </div>
  22. <style>
  23. .box{
  24. width:60em;
  25. height:60em;
  26. display: grid;
  27. background-color: beige;
  28. grid-template-columns: repeat(3,15em);
  29. grid-template-rows: repeat(3,15em);
  30. grid-auto-flow: row;
  31. grid-auto-rows: 12em;
  32. place-content: center;
  33. place-items: center;
  34. gap:10px;
  35. }
  36. .box .item{
  37. width:10em;
  38. height:10em;
  39. background-color: cyan;
  40. text-align: center;
  41. }
  42. .box .item:first-of-type{
  43. grid-area: 1 / 1 / span 1 / span 2;
  44. background-color: lightcoral;
  45. }
  46. .box .item:nth-of-type(4){
  47. background-color: blue;
  48. place-self: end;
  49. }
  50. </style>
  51. </body>
  52. </html>

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    P粉854918706
    博文
    10
    粉丝
    0
    评论
    0
    访问量
    1284
    积分:0
    P豆:20