html 简单的12 cols流体网格系统

Posted 2021-05-11

/* Simple fluid 12 Columns system - gte ie9 compatible */
#wrapper { overflow: hidden; }
.row { width: 100%; }
.row > div[class*="col"] {
		float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.row { margin-bottom: 20px; }
	.row div[class*="nm_col"] { padding: 0 10px; &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } }
}
@media screen and (min-width: 1280px) {
	.row { margin-bottom: 40px; }
	.row div[class*="col"] { padding: 0 20px; &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } }
}
.col1 { width: 8.33333333333%; }
.col2 { width: 16.6666666667%; }
.col3 { width: 25.0%; }
.col4 { width: 33.3333333333%; }
.col5 { width: 41.6666666667%; }
.col6 { width: 50.0%; }
.col7 { width: 58.3333333333%; }
.col8 { width: 66.6666666667%; }
.col9 { width: 75.0%; }
.col10 {  width: 83.3333333333%; }
.col11 { width: 91.6666666667%; }
.col12 { margin-left: 0; width: 100%; }

<div id="wrapper">
	<div class="row">
		<div class="col12"></div>
	</div>
	<div class="row">
		<div class="col6"></div>
		<div class="col6"></div>
	</div>
	<div class="row">
		<div class="col4"></div>
		<div class="col4"></div>
		<div class="col4"></div>
	</div>
	<div class="row">
		<div class="col3"></div>
		<div class="col3"></div>
		<div class="col3"></div>
		<div class="col3"></div>
	</div>
	<div class="row">
		<div class="col2"></div>
		<div class="col2"></div>
		<div class="col2"></div>
		<div class="col2"></div>
		<div class="col2"></div>
		<div class="col2"></div>
	</div>
</div>