示例1：
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>Document</
title>
<
style>
.grid-1 {
display:
grid;
grid-template-columns:
150
px
20
px
150
px
20
px
150
px;
grid-template-rows:
40
px
20
px
auto
20
px
auto;
}
.grid-1
div {
background:
pink;
}
.item1 {
grid-row:
1;
grid-column:
1;
}
.item2 {
grid-row:
1;
grid-column:
3;
}
.item3 {
grid-row:
1;
grid-column:
5;
}
.item4 {
grid-row:
3;
grid-column:
1;
}
.item5 {
grid-row:
3;
grid-column:
3;
}
.item6 {
grid-row:
3;
grid-column:
5;
}
.item7{
grid-row:
5;
grid-column:
1;
}
.item8 {
grid-row:
5;
grid-column:
3;
}
.item9 {
grid-row:
5;
grid-column:
5;
}
</
style>
</
head>
<
body>
<
section
class=
"grid-1">
<
div
class=
"item1">1</
div>
<
div
class=
"item2">2</
div>
<
div
class=
"item3">3</
div>
<
div
class=
"item4">4</
div>
<
div
class=
"item5">5</
div>
<
div
class=
"item6">6</
div>
<
div
class=
"item7">7</
div>
<
div
class=
"item8">8</
div>
<
div
class=
"item9">9</
div>
</
section>
</
body>
</
html>
grid-tmplate-rows :定义表格 子元素 每一列的高度，说的专业点叫做，声明网格轨道的 行。（设置为 auto 的话 根据内容设置高度）
grid-tmplate-columns: 定义网格 子元素 每一行的 高度，说的专业店 叫做 声明 网格轨道 的列。
grid-row 和 grid-column 设置 每个子元素 在网格中的位置，就是指定 网格 的行和列。