网格线
只要使用CSS网格布局，就会创建网格线。
示例
在下面的示例中，有一个网格包含三个列轨道和两个行轨道。这给了我们4条列线和3条行线。
html
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}
可以使用线号来引用线。在像英语这样的从左到右的语言中，第1列线将在网格的左侧，第1行线在顶部。线号遵循文档的书写模式，因此例如，在从右到左的语言中，第1列线将在网格的右侧。下图显示了网格的线号，假设语言是从左到右的。
当创建隐式轨道以容纳位于显式网格之外的内容时，也会在隐式网格中创建线，但是这些线不能通过数字来引用。
按行号将项目放置到网格中
创建网格后，可以通过线号将项目放置到网格上。在下面的示例中，项目从第1列线到第3列线定位，从第1行线到第3行线定位。
html
<div class="wrapper">
<div class="item">Item</div>
</div>
css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}
.item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
命名线条
显式网格中创建的线可以通过在轨道大小信息之前或之后添加方括号中的名称来命名。放置项目时，可以使用这些名称代替线号，如下所示。
html
<div class="wrapper">
<div class="item">Item</div>
</div>
css
.wrapper {
display: grid;
grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
grid-column-start: col1-start;
grid-column-end: col3-start;
grid-row-start: row1-start;
grid-row-end: rows-end;
}