### 起步所需的知識儲備：
~~~
1. 父元素 display: grid;
2. 父元素 grid-template-row -->行模板 參數任意 幾個參數代表幾行 第幾個參數的大小代表第幾列的寬度
3. 父元素 grid-template-column -->列模板 參數任意 幾個參數代表幾列 第幾個參數的大小代表第幾行的寬度
4. 子元素 grid-column: 1 / 4;等價于grid-column-start: 1;和grid-column-end: 4;
grid-column-start: 1; -->子元素開始位置
grid-column-end: 4; -->子元素結束位置
可以理解為：從第幾個網格線到第幾個網格線 數字代表網格線（如一個一行三列的網格域 ，那么它的豎直方向的網格線為4，水平方向上的網格線為2）
~~~
### demo1：實現兩行三列的布局
~~~
<style>
*{margin: 0;padding: 0}
.parent{
display: grid;
/* 列的參數只會改變寬度 */
grid-template-columns: 100px 100px 100px;
/* 行的參數只會改變高度 */
grid-template-rows: 50px 50px;
}
.parent div{
text-align: center;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
~~~
### demo2：實現子網格任意的排列布局
~~~
<style>
*{margin: 0;padding: 0}
.parent{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px 50px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}
.parent div{
text-align: center;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="parent">
<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>
</body>
~~~
