两种方法实现响应式九宫格布局

html布局以及基础样式代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式九宫格</title>
	<style type="text/css">    
		html, body { color:#222; margin:0; padding: 0; text-decoration: none; }    
		ul { list-style: none outside none; margin:0; padding: 0; }    
		body { background-color:#eee; }     
		ul li:nth-child(8n+1) {background-color:#36A1DB}    
		ul li:nth-child(8n+2) {background-color:#678ce1}    
		ul li:nth-child(8n+3) {background-color:#8c67df}    
		ul li:nth-child(8n+4) {background-color:#84d018}    
		ul li:nth-child(8n+5) {background-color:#14c760}    
		ul li:nth-child(8n+6) {background-color:#f3b613}    
		ul li:nth-child(8n+7) {background-color:#ff8a4a}    
		ul li:nth-child(8n+8) {background-color:#fc5366}
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>	
	</ul>
</body>
</html>

方法一：浮动+宽度百分比

关键代码：

body ul:after { clear: both; content: " "; display: block; }    
ul li{ float:left;    30%;  height:30%; margin-top: 2.5%;  margin-left: 2.5%;    }

方法二：flex布局+宽度百分比

关键代码：

ul{ display: flex;justify-content: space-between;flex-wrap: wrap;}    
ul li{ 30%; margin-top: 2.5%;  }