示例
在下面的示例中，有一個包含三個列軌道和兩個行軌道的網格。這為我們提供了 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;
}