先看下2列布局

<!-- grid container start -->
<div class="ui-grid-a"><!-- grid block start -->
<div class="ui-block-a">我是左边的部分</div>
<!-- grid block end --> <!-- grid block start -->
<div class="ui-block-b">我是右边的部分</div>
<!-- grid block end -->

</div>
<!-- grid container end -->

再看下3列布局

<!-- grid container start -->
<div class="ui-grid-b">

	<!-- grid block start -->
	<div class="ui-block-a">
		我是左边的部分
	</div>
	<!-- grid block end -->

	<!-- grid block start -->
	<div class="ui-block-b">
		我是中间的部分
	</div>
	<!-- grid block end -->

	<!-- grid block start -->
	<div class="ui-block-c">
		我是右边的部分
	</div>
	<!-- grid block end -->

</div>
<!-- grid container end -->

4列布局又是如何？

<!-- grid container start -->
<div class="ui-grid-c">

	<!-- grid block start -->
	<div class="ui-block-a">
		我是左边的部分
	</div>
	<!-- grid block end -->

	<!-- grid block start -->
	<div class="ui-block-b">
		我是中间1的部分
	</div>
	<!-- grid block end -->

	<!-- grid block start -->
	<div class="ui-block-c">
		我是中间2的部分
	</div>
	<!-- grid block end -->

	<!-- grid block start -->
	<div class="ui-block-d">
		我是右边的部分
	</div>
	<!-- grid block end -->

</div>
<!-- grid container end -->

细心的同学可能发现其中的规律了
看了下面这张图，你会更加清楚的知道其中的规律