从别人网站CSS里面提取出来的layout栅格代码

/* layout */
	
.row {
	width: 100%;
	box-sizing: border-box;
 }
.row:before,
.row:after,
.rowPatch:before,
.rowPatch:after {
	display: table;
	content: "";
	line-height: 0;
	}
.row:after,
.rowPatch:after {
	clear: both;
	}
.row >div >div {
	display: block;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
   	}

.row .span24 {
	width: 20%;
	}
.row .span12:first-child {
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	float:none ;
 	}
.row .span11 {
	width: 91.666666666666666%;
	}
.row .span10 {
	width: 83.333333333333333%;
	}
.row .span9 {
	width: 75%;
	}
.row .span8 {
	width: 66.666666666666666%;
	}
.row .span7 {
	width: 58.333333333333333%;
	}
.row .span6 {
	width: 50%;
	}
.row .span5 {
	width: 41.666666666666666%;
	}
.row .span4 {
	width: 33.333333333333333%;
	}
.row .span3 {
	width: 25%;
	}
.row .span2 {
	width: 16.666666666666666%;
	}
.row .span1 {
	width: 8.333333333333333%;
	}
@media (min-width: 1200px) {	
	.row[column_min1200="2"] >div >div:nth-child(2n+1),
	.row[column_min1200="3"] >div >div:nth-child(3n+1),
	.row[column_min1200="4"] >div >div:nth-child(4n+1),
	.row[column_min1200="5"] >div >div:nth-child(5n+1),
	.row[column_min1200="6"] >div >div:nth-child(6n+1){
		clear:both;
		}
	}
@media (min-width: 961px) and (max-width: 1199px) {
	.row[column_961_1199="2"] >div >div:nth-child(2n+1),
	.row[column_961_1199="3"] >div >div:nth-child(3n+1),
	.row[column_961_1199="4"] >div >div:nth-child(4n+1),
	.row[column_961_1199="5"] >div >div:nth-child(5n+1),
	.row[column_961_1199="6"] >div >div:nth-child(6n+1){
		clear:both;
		}
	}
	
@media (min-width: 768px) and (max-width: 960px) {
	.row[column_768_960="2"] >div >div:nth-child(2n+1),
	.row[column_768_960="3"] >div >div:nth-child(3n+1),
	.row[column_768_960="4"] >div >div:nth-child(4n+1),
	.row[column_768_960="5"] >div >div:nth-child(5n+1),
	.row[column_768_960="6"] >div >div:nth-child(6n+1){
		clear:both;
		}
	}
@media (min-width: 480px) and (max-width: 767px) {
	.row[column_480_767="2"] >div >div:nth-child(2n+1),
	.row[column_480_767="3"] >div >div:nth-child(3n+1),
	.row[column_480_767="4"] >div >div:nth-child(4n+1),
	.row[column_480_767="5"] >div >div:nth-child(5n+1),
	.row[column_480_767="6"] >div >div:nth-child(6n+1){
		clear:both;
		}
	}
@media (max-width: 479px) {
	.row[column_max479="2"] >div >div:nth-child(2n+1),
	.row[column_max479="3"] >div >div:nth-child(3n+1),
	.row[column_max479="4"] >div >div:nth-child(4n+1),
	.row[column_max479="5"] >div >div:nth-child(5n+1),
	.row[column_max479="6"] >div >div:nth-child(6n+1){
		clear:both;
		}
	}
/* pc */
@media (min-width: 1200px) {
	
	.row[column_min1200="1"] >div >div{
		width: 100%;
		margin-left:auto;
		margin-right:auto;
		float:none ;
		}	
		
	.row[column_min1200="2"] >div >div{
		width:50% !important;
		float:left;
 	}
	.row[column_min1200="3"] >div >div{
		width:33.333333333333333% !important;
		float:left;
 	}
	.row[column_min1200="4"] >div >div{
		width:25% !important;
		float:left;
 	}
	.row[column_min1200="5"] >div >div{
		width:20% !important;
		float:left;
 		}
	
	.row[column_min1200="6"] >div >div{
		width:16.666666666666666% !important;
		float:left;
 	}
}
	
/* pad妯増 */ 
@media (min-width: 961px) and (max-width: 1199px) {
	.row[column_961_1199="1"] >div >div{
		width: 100%;
		margin-left:auto;
		margin-right:auto;
		float:none ;
		}
		
	.row[column_961_1199="2"] >div >div{
		width:50% !important;
		float:left;
 	}
	.row[column_961_1199="3"] >div >div{
		width:33.333333333333333% !important;
		float:left;
 	}
	.row[column_961_1199="4"] >div >div{
		width:25% !important;
		float:left;
 	}
	.row[column_961_1199="5"] >div >div{
		width:20% !important;
		float:left;
 		}
	.row[column_961_1199="6"] >div >div{
		width:16.666666666666666% !important;
		float:left;
 	}
}
/* pad绔栫増 */
@media (min-width: 768px) and (max-width: 960px) {
	.row[column_768_960="1"] >div >div{
		width: 100%;
		margin-left:auto;
		margin-right:auto;
		float:none ;
		}
		
	
	.row[column_768_960="2"] >div >div{
		width:50% !important;
		float:left;
 	}
	.row[column_768_960="3"] >div >div{
		width:33.333333333333333% !important;
		float:left;
 	}
	.row[column_768_960="4"] >div >div{
		width:25% !important;
		float:left;
 	}
	.row[column_768_960="5"] >div >div{
		width:20% !important;
		float:left;
 		}
	.row[column_768_960="6"] >div >div{
		width:16.666666666666666% !important;
		float:left;
 	}
}
/* 鎵嬫満妯増 */
@media (min-width: 480px) and (max-width: 767px){
	.row:not([column_480_767="no"])  >div >div{
		display: block;
		width: 100%;		
		float: none;
	}
	.row[column_480_767="1"] >div >div{
		width: 100%;
		margin-left:auto;
		margin-right:auto;
		float:none ;
		}
		
	.row[column_480_767="2"] >div >div{
		width:50% !important;
		float:left !important;
 	}
	.row[column_480_767="3"] >div >div{
		width:33.333333333333333% !important;
		float:left !important;
 	}
	.row[column_480_767="4"] >div >div{
		width:25% !important;
		float:left !important;
 	}
	.row[column_480_767="5"] >div >div{
		width:20% !important;
		float:left !important;
 	}	
	.row[column_480_767="6"] >div >div{
		width:16.666666666666666% !important;
		float:left !important;
 	}
	
}
/* 鎵嬫満绔栫増 */
@media (max-width: 479px) {
	.row:not([column_max479="no"]) >div >div{
		display: block;
		width: 100%;		
		float: none;
	}
	.row[column_max479="1"] >div >div{
		width: 100%;
		margin-left:auto;
		margin-right:auto;
		float:none;
		}
	
	.row[column_max479="2"] >div >div{
 		width:50% !important;
		float:left !important;
  	}
	.row[column_max479="3"] >div >div{
		width:33.333333333333333% !important;
		float:left !important;
   	}
	.row[column_max479="4"] >div >div{
  		width:25% !important;
		float:left !important;
 	}
	.row[column_max479="5"] >div >div{
  		width:20% !important;
		float:left !important;
 	}
	.row[column_max479="6"] >div >div{
		width:16.666666666666666% !important;
		float:left !important;
 	}
	
}