Blogger Information
Blog 7
fans 0
comment 1
visits 4285
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1028作业 1. grid布局的基本术语解释: 网格容器, 网格项目,网格单元,网格区域, 网格轨道,轨道间隙 2. 实例演示今晚学到的全部grid新属性, 必须有图
Vic
Original
540 people have browsed it

grid布局的基本术语解释: 网格容器, 网格项目,网格单元,网格区域, 网格轨道,轨道间隙


网格容器

  • 它是其所有网格项目的父元素

网格项目

  • 是网格容器的子元素

网格单元

  • 两个相邻的列网格线和两个相邻的行网格线组成的是网格单元

网格区域

  • 四个网格线包围的总空间

网格轨道

  • 两个相邻的网格线之间为网格轨道

轨道间隙

  • 两个相邻的网格轨道之间的间隙

展示图如下:


实例演示今晚学到的全部grid新属性

  1. 代码如下:
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. *{
  10. box-sizing: border-box;
  11. }
  12. .container{
  13. display: grid;
  14. grid-template-columns: 15em 15em 15em;
  15. grid-template-rows: 8em 8em 8em;
  16. gap: 1em;
  17. justify-items: center;
  18. align-items: center;
  19. grid-auto-flow: column;
  20. grid-auto-columns: auto;
  21. }
  22. .box{
  23. width: 4em;
  24. height: 4em;
  25. border: dashed;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div class="container">
  31. <div class="box">box1</div>
  32. <div class="box">box2</div>
  33. <div class="box">box3</div>
  34. <div class="box">box4</div>
  35. <div class="box">box5</div>
  36. <div class="box">box6</div>
  37. <div class="box">box7</div>
  38. <div class="box">box8</div>
  39. <div class="box">box9</div>
  40. <div class="box">box10</div>
  41. </div>
  42. </body>
  43. </html>

效果如下:

Correcting teacher:天蓬老师天蓬老师

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