特别申明：本系列教程由小春撰写

本文我们来通过源码分析的方式，深度认识一下jQuery Mobile中grid组件的设计实现细节
还记得我们前面在《jQuery Mobile教程-基础篇-网格篇》里面提到的如何设置几列布局吗？

先看一下jquery.mobile-1.1.0.css的样式设计源码：

/*grid的class*/
.ui-grid-a,.ui-grid-b,.ui-grid-c,ui-grid-d{
	overflow:hidden;
}

/*block的class*/
.ui-block-a,.ui-block-b,.ui-block-c,.ui-block-d,.ui-block-e{
	margin:0;
	padding:0;
	border:0;
	float:left;		//采用float
	min-height:1px;
}


/*2列均摊*/
.ui-grid-a .ui-block-a,
.ui-grid-a .ui-block-b{
	width:50%;		//2列均摊
}
.ui-grid-a .ui-block-a{
	clear:left;
}
	
/*3列均摊*/
.ui-grid-b .ui-block-a,
.ui-grid-b .ui-block-b,
.ui-grid-b .ui-block-c{
	width:33.333%;	//3列均摊
}
.ui-grid-b .ui-block-a{
	clear:left;
}

/*4列均摊*/
.ui-grid-c .ui-block-a,
.ui-grid-c .ui-block-b,
.ui-grid-c .ui-block-c,
.ui-grid-c .ui-block-d{
	width:25%;	    //4列均摊
}
.ui-grid-c .ui-block-a{
	clear:left;
}
	
/*5列均摊*/
.ui-grid-d .ui-block-a,
.ui-grid-d .ui-block-b,
.ui-grid-d .ui-block-c,
.ui-grid-d .ui-block-d,
.ui-grid-d .ui-block-e{
	width:20%;		//5列均摊
}
.ui-grid-d .ui-block-a{
	clear:left;	
}   

那如果我们要实现自定义的不规则网格呢？

比如：我要设置2列，左30%，右70%

.ui-grid-a .ui-block-a{
	width:30%;
}
.ui-grid-a .ui-block-b{
	width:70%;
}

再比如：我要设置3列，左30%，中20%，右50%

.ui-grid-b .ui-block-a{
	width:30%;
}
.ui-grid-b .ui-block-b{
	width:20%;
}
.ui-grid-b .ui-block-c{
	width:50%;
}

PS:
1、有问题欢迎在官网留言或者直接联系我：@zhangyaochun_fe
2、可以在官网的问答频道进行提问，我们会尽快回复
3、谢谢您对w3cplus的jquery mobile系列教程的关注

关于小春

专注于前端开发，对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习，涉足移动前端许久，爱好分享交流…个人博客focus-fe。欢迎随时关注我：新浪微博