task-01.html

<!DOCTYPE HTML>
<html>
<head lang="en">
    <meta charset="UTF-8">
	<title>九宫格</title> 
	<style type="text/css">
	*{
		margin:0;
		padding: 0;
	}
	.col-4{
		margin-top:20px;
		width: calc(33% - 20px);
		background: red;
		display: inline-block;
		padding-bottom: calc(33% - 20px);
		border-radius: 25px;		 /*假定最低高度是200px*/
	}
	.wifi{
		background: url(../images/1.png) no-repeat;
	}
	</style> 
</head>
<body>
	<div class="col-4"><i class="wifi"></i></div>
	<div class="col-4"></div>
	<div class="col-4"></div>
	<div class="col-4"></div>
	<div class="col-4"></div>
	<div class="col-4"></div>
	<div class="col-4"></div>
	<div class="col-4"></div>
	<div class="col-4"></div>
</body>
</html>