### 起步所需的知识储备：
~~~
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>
~~~
