第11天：grid布局对齐属性

前面的课程 第8天：布局翘楚 - Grid 布局概述，第10天：买一块地盖一处院子介绍了 grid 布局，还剩下一些关于 grid 布局中的对齐属性，今天一起学习一下。

在学习 flexbox 布局中，有 4 个属性可以控制对齐方式，可以参考 第2天：图解 FlexBox 布局（上），第4天：图解 FlexBox 布局（下）这两节课程。FlexBox 与 grid 布局中对齐属性有惊人的相似之处。

在掌握对齐属性之前你要明确 grid 布局的轴线。grid 布局是二维的，可以通过横轴和交叉轴来对齐 grid item。它有一条轴叫 inline axis，它与文字的书写模式（水平书写、竖直书写）有关，由于我们通常不会涉及到文字的书写模式，暂且把 inline axis 看做是横轴，把 block axis 看做是与横轴交叉的轴。

说到对齐就需要找到它的参照物，相对谁来进行对齐。比如在看阮老师关于 justify-items 的对齐方式的描述。

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

其实上面这样描述的不太妥当，“justify-items属性设置单元格内容的水平位置（左中右）”，而 MDN 上的描述是这样的：