作业4

.wrapper {
  display: grid;/* 使wrapper为网格容器 */
  grid-template-columns: repeat(3, 1fr);/* 画出3个轨道大小为1fr */
  grid-gap: 10px;/* 设置网格线大小为10px */
  grid-auto-rows: minmax(100px, auto);/* 自动划分行大小 最小100px */
}
.one {
  grid-column: 1 / 3;/* 竖排距离从第1到第3个轨道 */
  grid-row: 1;/* 横排距离占第1个轨道 */
}
.two { 
  grid-column: 2 / 4;/* 竖排距离从第2到第4个轨道 */
  grid-row: 1 / 3;/* 横排距离从第1到第3个轨道 */
}
.three {
  grid-column: 1;/* 竖排距离占第1个轨道 */
  grid-row: 2 / 5;/* 横排距离从第2到第5个轨道 */
}
.four {
  grid-column: 3;/* 竖排距离占第3个轨道 */
  grid-row: 3;/* 横排距离占第3个轨道 */
}
.five {
  grid-column: 2;/* 竖排距离占第2个轨道 */
  grid-row: 4;/* 横排距离占第4个轨道 */
}
.six {
  grid-column: 3; /* 竖排距离占第3个轨道 */
  grid-row: 4;/* 横排距离占第4个轨道 */
}

html部分
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>box</title>
	<link rel="stylesheet" href="three.css">
</head>
<body>
 <div class="wrapper">
   <div class="one">One</div>
   <div class="two">Two</div>
   <div class="three">Three</div>
   <div class="four">Four</div>
   <div class="five">Five</div>
   <div class="six">Six</div>
 </div>

</html>