网格容器(Grid Container)

应用 display: grid 的元素。这是所有网格项(Grid Items)的直接父级元素。

container 就是 网格容器(Grid Container)。

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

网格项(Grid Item)

网格容器(Grid Container)的子元素(直接子元素)。

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <span>这个不是</span>
  </div>
  <div class="item"></div>
</div>

网格线(Grid Line)

构成网格结构的分界线。它们既可以是垂直的(“列网格线(column grid lines)”),也可以是水平的(“行网格线(row grid lines)”),并位于行或列的任一侧。

网格轨道(Grid Track)

两条相邻网格线之间的空间。你可以把它们想象成网格的列或行。下图是第二条和第三条 行网格线 之间的 网格轨道(Grid Track)。

网格单元格(Grid Cell)

两个相邻的行和两个相邻的列网格线之间的空间。这是 Grid(网格) 系统的一个“单元”。

网格区域(Grid Area)

4条网格线包围的总空间。一个 网格区域(Grid Area) 可以由任意数量的 网格单元格(Grid Cell) 组成。

results matching ""

    No results matching ""