柵格系統布局主要被綁定在Bootstrap之類的框架上 ，那么我們如果不需要接入整個框架，做一個自己的柵格化的布局該怎么做呢？
1.容器container ，設置box-sizing：border-box；設置整個布局的寬度通常為100%為例；
2.行row，防止溢出行 需要清楚浮動clear：both;
3.列column,常用pc端12列，移動端6列。列數越多內容就會更加的稠密，當所有的列都為空值的話，他們就會堆疊起來，為避免這一問題，a：給列設置float屬性設置最小高度為1px，float：left；min-height：1px；
b：列的寬度為容器的寬度（container）/列的總數（12/6）=列的寬度，列寬16.6%=100%/6
源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
list-style: none;
}
.container-wrap{
width: 100%;
box-sizing: border-box;
min-width: 1200px;
}
.row:before,row:after{
content: '';
display: table;
clear: both;
}
[class*='col-']{
float: left;
min-height: 1px;
width: 16.6%;
padding: 10px;
}
.col-1{
width: 48%;
}
.col-2{
width: 31%;
}
.col-3{
width: 48%;
}
.outline *{
/*outline: 1px solid blue;*/
border: 1px solid #000000;
}
</style>
<body>
<div class="container-wrap outline">
<ul class="row">
<li class="col-1">1-1</li>
<li class="col-1">1-1</li>
</ul>
<ul class="row">
<li class="col-2">2-1</li>
<li class="col-2">2-1</li>
<li class="col-2">2-1</li>
</ul>
<ul class="row">
<li class="col-3">3-1</li>
<li class="col-3">3-1</li>
</ul>
</div>
</body>
</html>
運行結果
