HTML栅格化示例

如果需要将一个DIV平均分割成几个小方格, 栅格化是比较好的解决方案, 本文演示一下

CSS代码:

<style>
.features .feat_list{
width: 60%;
margin: 20px auto;
outline: 1px solid blue;
}
.features .feat_list::before,
.features .feat_list::after{
content: ”;
display: table;
clear: both;
}
.features .feat_list .gird{
height: 300px;
background-color:#FFDCDC;
box-sizing: border-box; /* CSS属性 */
float: left;
margin: 0 1%; /* 如果这里margin是0, 则表格没有间隙, 下面width应该使用精准的数字, 例如33.33%, 66.66%等 */
outline: 1px solid red;
/* padding: 12px; */ /* 如果这里margin是0, 一般是需要设置padding */
}
.features .feat_list .gird-1{width: 31.33%;} /* 三栏表格宽度, 用33.33%减去margin的1%, 得到31.33% */
.features .feat_list .gird-2{width: 64.66%;} /* 三栏表格占2栏, 用33.33%减去margin的1%, 得到31.33% */
.features .feat_list .gird-5{width: 18%;} /* 三栏表格占2栏, 用33.33%减去margin的1%, 得到31.33% */
.features .feat_list .gird-4{width: 23%;}
</style>

HTML代码:

<div class="feat_list">
<div class="gird gird-1">222</div>
<div class="gird gird-2">222</div>
</div>
<div class="feat_list">
<div class="gird gird-5">222</div>
<div class="gird gird-5">222</div>
<div class="gird gird-5">222</div>
<div class="gird gird-5">222</div>
<div class="gird gird-5">222</div>
</div>
<div class="feat_list">
<div class="gird gird-4">222</div>
<div class="gird gird-4">222</div>
<div class="gird gird-4">222</div>
<div class="gird gird-4">222</div>
</div>

效果: