栅格系统(支持嵌套)


父级核心class属性为 grid- ,根据子级的div个数,在其后添加比例即可
如果你需要间距,父级追加 spacing- 属性即可,其后填写间距的数值。行、列都会产生间距

如果比例无法完美分割,请直接设置错误的比例,然后为部分div设定 min-width 或者 max-width
无缝代码
<!--栅格系统 无缝演示-->
<!--grid-属性会为其子级div按比例分配宽度-->
<div class="grid-1-3">
	<div style="height:50px;background-color:#00d1b2;">1/4</div>
	<div style="height:50px;background-color:#ffdd57;">3/4</div>
</div>
<!--grid-属性会为其子级div按比例分配宽度-->
<div class="grid-1-1-1">
	<div style="height:50px;background-color:#209cee;">1/3</div>
	<div style="height:50px;background-color:#ff3860;">1/3</div>
	<div style="height:50px;background-color:#23d160;">1/3</div>
</div>
指定间距代码
<!--栅格系统-->
<!--grid-属性会为其子级div按比例分配宽度-->
<!--spacing-属性会为其本身添加下外边距,也会为其子级div俩俩间添加间距-->
<div class="grid-1-3 spacing-10">
	<div style="height:50px;background-color:#00d1b2;">1/4</div>
	<div style="height:50px;background-color:#ffdd57;">3/4</div>
</div>
<!--grid-属性会为其子级div按比例分配宽度-->
<!--spacing-属性会为其本身添加下外边距,也会为其子级div俩俩间添加间距-->
<div class="grid-1-1-1 spacing-10">
	<div style="height:50px;background-color:#209cee;">1/3</div>
	<div style="height:50px;background-color:#ff3860;">1/3</div>
	<div style="height:50px;background-color:#23d160;">1/3</div>
</div>
演示