网格布局中的概念有哪些?详解网格线、网格单元等概念。

3 min read

在网格布局中,主要有以下概念:

  1. 网格容器(grid container):应用了网格布局的父元素。

  2. 网格行(grid row):网格容器中沿着行向的划分单位,可以通过设定行高来控制。

  3. 网格列(grid column):网格容器中沿着列向的划分单位,可以通过设定列宽来控制。

  4. 网格线(grid line):网格行或网格列中间的分隔线,可以是垂直线或水平线。

  5. 网格单元格(grid cell):网格容器中每个交叉点的小方格,即网格单元格,是网格布局中最小的单位。

  6. 网格轨道(grid track):网格容器中,跨越一个或多个网格单元格的列或行称为网格轨道,是由两个相邻的网格线组成的。

  7. 网格区域(gird area):由四条边缘网格线所包围的矩形区域,可以包含一个或多个网格单元格。

  8. 网格项(grid item):即网格容器中任何直接子元素,它们可以跨越一个或多个网格单元格,对应一个或多个网格区域。