@import "../default-skin.less";
@import "../../global/mixin.less";

// 栅格
.l_grid {
	> ul { margin-top:1px; margin-left:1px;}
	> ul > li { margin-top:-1px; margin-left:-1px;}
}



// 分列
.l_grid-inline,
.l_grid-col-2,
.l_grid-col-3,
.l_grid-col-4,
.l_grid-col-5,
.l_grid-col-6,
.l_grid-col-7,
.l_grid-col-8,
.l_grid-col-9,
.l_grid-col-10 {
	> ul { font-family:simsun, Consolas, 'Courier New', monospace;}
	> ul > li { display:inline-block; margin-right:-0.5em; vertical-align:top;}
	> ul > li > * { font-family:"microsoft yahei", simhei, verdana;}
}
.l_grid-col-2 > ul > li { width:50%;}
.l_grid-col-3 > ul > li { width:33.333333333333%;}
.l_grid-col-3 > ul > li.merge-2 { width:66.66666666666%;}
.l_grid-col-4 > ul > li { width:25%;}
.l_grid-col-4 > ul > li.merge-2 { width:50%;}
.l_grid-col-4 > ul > li.merge-3 { width:75%;}
.l_grid-col-5 > ul > li { width:20%;}
.l_grid-col-5 > ul > li.merge-2 { width:40%;}
.l_grid-col-5 > ul > li.merge-3 { width:60%;}
.l_grid-col-5 > ul > li.merge-4 { width:80%;}
.l_grid-col-6 > ul > li { width:16.66%;}
.l_grid-col-6 > ul > li.merge-2 { width:33.333333333333%;}
.l_grid-col-6 > ul > li.merge-3 { width:50%;}
.l_grid-col-6 > ul > li.merge-4 { width:66.666666666667%;}
.l_grid-col-6 > ul > li.merge-5 { width:83.333333333333%;}
.l_grid-col-7 > ul > li { width:14.29%;}
.l_grid-col-7 > ul > li.merge-2 { width:28.57%;}
.l_grid-col-7 > ul > li.merge-3 { width:42.86%;}
.l_grid-col-7 > ul > li.merge-4 { width:57.14%;}
.l_grid-col-7 > ul > li.merge-5 { width:71.43%;}
.l_grid-col-7 > ul > li.merge-6 { width:85.71%;}
.l_grid-col-8 > ul > li { width:12.5%;}
.l_grid-col-8 > ul > li.merge-2 { width:25%;}
.l_grid-col-8 > ul > li.merge-3 { width:37.5%;}
.l_grid-col-8 > ul > li.merge-4 { width:50%;}
.l_grid-col-8 > ul > li.merge-5 { width:62.5%;}
.l_grid-col-8 > ul > li.merge-6 { width:75%;}
.l_grid-col-8 > ul > li.merge-7 { width:87.5%;}
.l_grid-col-9 > ul > li { width:11.11%;}
.l_grid-col-9 > ul > li.merge-2 { width:22.22%;}
.l_grid-col-9 > ul > li.merge-3 { width:33.33%;}
.l_grid-col-9 > ul > li.merge-4 { width:44.44%;}
.l_grid-col-9 > ul > li.merge-5 { width:55.56%;}
.l_grid-col-9 > ul > li.merge-6 { width:66.67%;}
.l_grid-col-9 > ul > li.merge-7 { width:77.78%;}
.l_grid-col-9 > ul > li.merge-8 { width:88.89%;}
.l_grid-col-10 > ul > li { width:10%;}
.l_grid-col-10 > ul > li.merge-2 { width:20%;}
.l_grid-col-10 > ul > li.merge-3 { width:30%;}
.l_grid-col-10 > ul > li.merge-4 { width:40%;}
.l_grid-col-10 > ul > li.merge-5 { width:50%;}
.l_grid-col-10 > ul > li.merge-6 { width:60%;}
.l_grid-col-10 > ul > li.merge-7 { width:70%;}
.l_grid-col-10 > ul > li.merge-8 { width:80%;}
.l_grid-col-10 > ul > li.merge-9 { width:90%;}
.l_grid-col-10 > ul > li.merge-10,
.l_grid-col-9 > ul > li.merge-9,
.l_grid-col-8 > ul > li.merge-8,
.l_grid-col-7 > ul > li.merge-7,
.l_grid-col-6 > ul > li.merge-6,
.l_grid-col-5 > ul > li.merge-5,
.l_grid-col-4 > ul > li.merge-4,
.l_grid-col-3 > ul > li.merge-3,
.l_grid-col-2 > ul > li.merge-2 { width:100%;}



// 均分
.l_grid-avg {
	> ul { display:flex;}
	> ul > li { flex:1;}
}



// 间距
.l_grid-space,
.l_grid-space-1 {
	> ul { margin-top:-0.5*@gap; margin-left:-0.5*@gap;}
	> ul > li { padding-top:0.5*@gap; padding-left:0.5*@gap; box-sizing:border-box;}
	> ul > li > * { margin:0;}
}
.l_grid-space-2 {
	> ul { margin-top:-1*@gap; margin-left:-1*@gap;}
	> ul > li { padding-top:1*@gap; padding-left:1*@gap; box-sizing:border-box;}
	> ul > li > * { margin:0;}
}



// 解决 space 问题
.l_grid-fixSpace > ul > li { margin-right:0;}



// 支持在 li 之间插入 div
// .l_grid { overflow:hidden; border:1px solid #ddd;}
// .l_gridContent { display:block; overflow:hidden; margin-right:-1px; margin-bottom:-1px;}
// .l_gridContent > div { display:inline;}
// .l_gridItem { float:left; width:33.33%; border-right:1px solid #ddd; border-bottom:1px solid #ddd; box-sizing:border-box;}
// <div class="l_grid">
// 	<div class="l_gridContent">
// 		<div>
// 			<div class="l_gridItem">
// 				...
// 			</div>
// 			<div class="l_gridItem">
// 				...
// 			</div>
// 		</div>
// 		<div>
// 			<div class="l_gridItem">
// 				...
// 			</div>
// 			<div class="l_gridItem">
// 				...
// 			</div>
// 			<div class="l_gridItem">
// 				...
// 			</div>
// 		</div>
// 	</div>
// </div>