必须理解的概念
- 容器和项目:
- 行和列:
- 单元格:
- 网格线: 划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。正常情况下,
n行有n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线。 - fr: grid布局新增的专属布局单位
重要属性
- grid-template-columns: 定义列宽
- grid-row-gap: 行间距
- grid-column-gap: 列间距
- grid-column-start: 单元格左边框所在的垂直网格线。注意上面的
网格线定义 - grid-column-end: 单元格右边框所在的垂直网格线。注意上面的
网格线定义