css CSS：简单的响应式网格

Posted 2021-05-13

<div class="grid-row">
	<div class="colspan-1">
		1
	</div>
	<div class="colspan-1">
		1
	</div>
	<div class="colspan-1">
		1
	</div>
	<div class="colspan-1">
		1
	</div>
	<div class="colspan-1">
		1
	</div>
	<div class="colspan-1">
		1
	</div>
	<div class="colspan-1">
		1
	</div>
	<div class="colspan-1">
		1
	</div>
	<div class="colspan-1">
		1
	</div>
	<div class="colspan-1">
		1
	</div>
	<div class="colspan-1">
		1
	</div>
	<div class="colspan-1">
		1
	</div>
</div>
<div class="grid-row">
	<div class="colspan-2">
		2
	</div>
	<div class="colspan-2">
		2
	</div>
	<div class="colspan-2">
		2
	</div>
	<div class="colspan-2">
		2
	</div>
	<div class="colspan-2">
		2
	</div>
	<div class="colspan-2">
		2
	</div>
</div>
<div class="grid-row">
	<div class="colspan-3">
		3
	</div>
	<div class="colspan-3">
		3
	</div>
	<div class="colspan-3">
		3
	</div>
	<div class="colspan-3">
		3
	</div>
</div>
<div class="grid-row">
	<div class="colspan-4">
		4
	</div>
	<div class="colspan-4">
		4
	</div>
	<div class="colspan-4">
		4
	</div>
</div>
<div class="grid-row">
	<div class="colspan-5">
		5
	</div>
	<div class="colspan-7">
		7
	</div>
</div>
<div class="grid-row">
	<div class="colspan-6">
		6
	</div>
	<div class="colspan-6">
		6
	</div>
</div>
<div class="grid-row">
	<div class="colspan-7">
		7
	</div>
	<div class="colspan-5">
		5
	</div>
</div>
<div class="grid-row">
	<div class="colspan-8">
		8
	</div>
	<div class="colspan-2">
		2
	</div>
	<div class="colspan-2">
		2
	</div>
</div>
<div class="grid-row">
	<div class="colspan-9">
		9
	</div>
	<div class="colspan-2">
		2
	</div>
	<div class="colspan-1">
		1
	</div>
</div>
<div class="grid-row">
	<div class="colspan-10">
		10
	</div>
	<div class="colspan-2">
		2
	</div>
</div>
<div class="grid-row">
	<div class="colspan-11">
		11
	</div>
	<div class="colspan-1">
		1
	</div>
</div>
<div class="grid-row">
	<div class="colspan-12">
		12
	</div>
</div>

[class*='colspan-'] {
	position:relative;
 	 float: left;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	margin-bottom:0;
	border:1px solid white;
	background:#D1D1D1;
  text-align:center;
}
[class*='colspan-']:last-of-type {
	margin-right:0;
}
.colspan-1{
	width: 08.333333333%;
}
.colspan-2{
	width: 16.6666666667%;
}
.colspan-3{
	width: 25%;
}
.colspan-4{
	width: 33.3333333333%;
}
.colspan-5{
	width: 41.6666666667%;
}
.colspan-6{
	width: 50%;
}
.colspan-7{
	width: 58.3333333333%;
}
.colspan-8{
	width: 66.6666666667%;
}
.colspan-9{
	width: 75%;
}
.colspan-10{
	width: 83.3333333333%;
}
.colspan-11{
	width: 91.6666666667%;
}
.colspan-12{
	width: 100%;
}
.grid-row:after{
	content: "";
  	display: table;
  	clear: both;
}