컬럼 그리드는 100%의 폭을 가지고, 마진, 패딩, 보더가 0이며 배경은 투명이므로 단지 내부의 요소들을 적절히 묶어주는 역할만을 한다. 다음은 각각 2단, 3단, 4단, 5단 그리드를 지정한다.
ui-grid-a
ui-grid-b
ui-grid-c
ui-grid-d
2단 칼럼은 class="ui-grid-a"를 사용해서 지정하며, 내부 블럭은 class="ui-block-a" 그리고 class="ui-block-b"로 지정되고 각각의 블록은 50% : 50%으로 나뉜다.
다음의 예는 3단 그리드에 버튼을 하나씩 배치했으므로 33.3%씩 3개의 블록으로 나눠진다. 마지막의 버튼은 비교를 위한 그냥 버튼이다.
<div
class="ui-grid-b">
<div
class="ui-block-a"><a
href="index.html" data-role="button">버튼
A</a></div>
<div
class="ui-block-b"><a
href="index.html" data-role="button">버튼
B</a></div>
<div
class="ui-block-c"><a
href="index.html" data-role="button">버튼
C</a></div>
</div><!--
/grid-a -->
<a href="index.html"
data-role="button">버튼</a>
3단, 4단, 5단 칼럼도 마찬가지로 필요한 수만큼 ui-block-...로 내부 블록을 지정하며 자식요소인 각 블록은 동일한 폭으로 배분된다.
한 줄에 표시할 수 있는 수보다 많은 블록이 자식 요소로 추가된다면 다음 줄로 넘어가서 여러 줄로 표시될 것이다.
