* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			ul {
				width: 280px;
				height: 280px;
				position: relative;
			}
			
			ul li {
				width: 38px;
				height: 38px;
				background: #ccc;
				margin: 1px;
				float: left;
			}
			ul li:nth-child(n+8){
				position: absolute;
			}
			ul li:nth-child(8){
				
				top:40px;
				right:0;
			}
			ul li:nth-child(9){
				top:80px;
				right:0;
			}
			ul li:nth-child(10){
				top:120px;
				right:0
			}
			ul li:nth-child(11){
				top:160px;
				right:0;
			}
			ul li:nth-child(12){
				top:200px;
				right:0;
			}
			ul li:nth-child(13){
				top:240px;
				right:0;
			}
			ul li:nth-child(14){
				top:240px;
				right:40px;
			}
			ul li:nth-child(15){
				top:240px;
				right:80px;
			}
			ul li:nth-child(16){
				top:240px;
				right:120px;
			}
			ul li:nth-child(17){
				top:240px;
				right:160px;
			}
			ul li:nth-child(18){
				top:240px;
				right:200px;
			}
			ul li:nth-child(19){
				top:240px;
				right:240px;
			}
			ul li:nth-child(20){
				top:200px;
				left:0;
			}
			ul li:nth-child(21){
				top:160px;
				left:0;
			}
			ul li:nth-child(22){
				top:120px;
				left:0;
			}
			ul li:nth-child(23){
				top:80px;
				left:0;
			}
			ul li:nth-child(24){
				top:40px;
				left:0;
			}
			ul li.on {
				background: red;
			}