网格线与区域

CSS Grid 中，网格线是定义网格单元边界的线，网格区域是由多条网格线围成的矩形区域。

1. 网格线编号

网格线从 1 开始编号，横向为列线，纵向为行线。

例如：

css

grid-column: 1 / 3; /* 从第1条列线开始，到第3条列线结束（不包括第3条线所在列） */
grid-row: 2 / 4;    /* 从第2条行线开始，到第4条行线结束 */

可以使用方括号为网格线命名，方便布局。

css

grid-template-columns: [start] 100px [line2] 1fr [end];
grid-template-rows: [top] 50px [bottom];

然后项目可以用命名定位：

css

grid-column: start / line2;
grid-row: top / bottom;

通过 grid-template-areas 定义命名区域，直观定义布局。

css

grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

给子元素赋值区域名：

css

grid-area: header;