<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高仿栅格系统</title>
<!--栅格系统-->
<link rel="stylesheet" href="css/small-grid.css">
<!---->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="main small-container">
<!--一列12个-->
<div class="small-row">
<div class="col-1 have-border">A</div>
<div class="col-1 have-border">A</div>
<div class="col-1 have-border">A</div>
<div class="col-1 have-border">A</div>
<div class="col-1 have-border">A</div>
<div class="col-1 have-border">A</div>
<div class="col-1 have-border">A</div>
<div class="col-1 have-border">A</div>
<div class="col-1 have-border">A</div>
<div class="col-1 have-border">A</div>
<div class="col-1 have-border">A</div>
<div class="col-1 have-border">A</div>
</div>
<div class="small-row">
<div class="col-1 have-border">A</div>
<div class="col-11 have-border">B</div>
</div>
<!--一列6个-->
<div class="small-row">
<div class="col-2 have-border">A</div>
<div class="col-2 have-border">A</div>
<div class="col-2 have-border">A</div>
<div class="col-2 have-border">A</div>
<div class="col-2 have-border">A</div>
<div class="col-2 have-border">A</div>
</div>
<div class="small-row">
<div class="col-2 have-border">A</div>
<div class="col-10 have-border">B</div>
</div>
<!--4个-->
<div class="small-row">
<div class="col-3 have-border">A</div>
<div class="col-3 have-border">A</div>
<div class="col-3 have-border">A</div>
<div class="col-3 have-border">A</div>
</div>
<div class="small-row">
<div class="col-3 have-border">A</div>
<div class="col-9 have-border">B</div>
</div>
<!--3个-->
<div class="small-row">
<div class="col-4 have-border">A</div>
<div class="col-4 have-border">A</div>
<div class="col-4 have-border">A</div>
</div>
<div class="small-row">
<div class="col-4 have-border">A</div>
<div class="col-8 have-border">B</div>
</div>
<div class="small-row">
<div class="col-5 have-border">A</div>
<div class="col-7 have-border">B</div>
</div>
<div class="small-row">
<div class="col-6 have-border">A</div>
<div class="col-6 have-border">B</div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
border: 0;
list-style: none;
box-sizing: border-box;
}
.small-container{
100%;
}
.small-container,.small-row{
box-sizing: border-box;
}
.small-row::before,
.small-row::after{
content: '';
display: block;
visibility: hidden;
clear: both;
zoom: 1;
}
[class*='col-']{
float: left;
padding: 1%;
}
.col-1{
8.33%;
}
.col-2{
16.66%;
}
.col-3{
25%;
}
.col-4{
33.33%;
}
.col-5{
41.66%;
}
.col-6{
50%;
}
.col-7{
58.33%;
}
.col-8{
66.66%;
}
.col-9{
75%;
}
.col-10{
83.33%;
}
.col-11{
91.66%;
}
.col-12{
100%;
}