semantic-ui 容器與柵格

　　semantic中可以指定one-sixteen這16個單詞來指定網格column所占的長度。也就是說，在網頁中，一行最多只有16個column，超過16個之后，自動移到下一行。

　　柵格可以使用i，div，span標簽，盡量不要使用button和p標簽

1、定義柵格

　　注意，單獨將標簽的class設置為column是不行的，因為這些標簽要位於一個class為ui grid的標簽下才行。

<div class="ui grid">
	<div class="column red"></div>
	<div class="column yellow"></div>
</div>

　　

 

2、指定柵格長度 

　　semantic中可以指定one-sixteen這16個單詞來指定網格column所占的長度，光是數量單詞還不行，還要使用wide。

<div class="ui grid">
	<i class="two wide column red"></i>
	<i class="three wide column yellow"></i>
</div>

　　

 

3、柵格嵌套

　　柵格嵌套和按鈕嵌套很相似。需要注意的是：

　　1、嵌套的時候，每一個要進行嵌套的柵格都要使用ui grid，就像下面的第二個two wide column。

　　2、每一個ui grid都會在內部分成16份，沒錯，即使將一個two wide column中間嵌套，中間也會被分成16份，而不是兩份。16份才能填滿。

<div class="ui grid">
	<div class="two wide column red"></div>
	<div class="two wide column">
		<div class="ui grid">
			<div class="four wide column green"></div>
			<div class="four wide column black"></div>
			<div class="four wide column green"></div>
			<div class="four wide column black"></div>
			<div class="four wide column green"></div>
			<div class="four wide column black"></div>
			<div class="four wide column green"></div>
			<div class="four wide column black"></div>
		</div>
	</div>
	<div class="two wide column blue"></div>
</div>