轴线与网格

任何容器，我们均可以将它指定为flex布局方式或grid布局方式。
我们通过display: flex;或display: grid;，将容器声明为弹性盒子布局或网格布局方式。

行内元素同样可以使用flex布局方式或grid布局方式。

我们通过或display: inline-grid;声明行内元素的弹性盒子布局或网格布局方式。

采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。

类似于flex布局方式，grid布局中最基本的单位就是网格线与网格了。

采用grid布局的元素，称为grid容器（grid container）。它的所有子元素自动成为容器成员，称为grid项目（grid item）。

分隔的线组成了网格的结构。它们可以是垂直的（“列网格线”）或者水平的（“行网格线”），也可以在行或列的任一边。下面的例子中黄色的线是一个列网格线的例子。

每条网格线具有默认的编号，从左到右和从上到下分别为1,2,3……

网格轨迹是指两根毗邻线中间的位置，你可以认为是网格的行或者列，下面例子的中网格轨迹是第二和第三行网格线中间的位置。

网格区域是指 4 根网格线包围的空间，一个网格空间可能由任意数量的网格单元构成。下面的例子中网格区域是指在第 1 和 3 的行网格线和第 1 和 3 列网格线中间的位置。

参考资料：