SOURCE

<div id="ruler"></div>
<div id="grid-container">
	<div class="cell-1"></div>
  <div class="cell-2"></div>
</div>

*{margin:0; padding:0;}
body{ margin:40px;}

/* 说明grid系统本质上是坐标系统 */

#ruler{
  position: absolute;
  top: 0;
  left: 0;
  width:580px;
  height:580px;
  background-image: url(https://codingstartup.com/assets/grid/grid-ruler.png);
  background-size: 580px 580px;
}
#grid-container{
  display:grid;
  width: 500px;
  height: 500px;
  background: #eee;
}

#grid-container{
  /* 在水平和垂直方向定义出 5个100px的格子 */
  grid-template-rows: 100px 100px 100px 100px 100px;
  grid-template-columns: 100px 100px 100px 100px 100px;
}

.cell-1{ background: yellow;}
.cell-2{ background: blue;}

/* 让cell-1扩展 1/3 代表row1-row3, 起始为1，而不是0. */

.cell-1{
  grid-row: 1/2;     /* 矩形grid的横边起点和终点的x轴坐标值 */
  grid-column: 1/4;  /* 矩形grid的竖边起点和终点的x轴坐标值
  
  /* 简写方法：grid-area: row1,col1, row2, col2)
     注意是交替的， 其实就是一个矩形的对角线两个点坐标*/
  grid-area: 2/2/4/4;
  
  /* 第3种写法 
     span 在这里代表延伸， 1 / span 3  从1延伸3格，注意是3格 */
  grid-row: 1 / span 2;
  grid-column: 2 / span 3;
}
.cell-2{
  grid-row: 4/6;
  grid-column: 1/3;
}