示例
在下面的示例中，有一个包含三个列轨道和两个行轨道的网格。这为我们提供了 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;
}