참조 - 삶의 조각들
jQuery Mobile의 그리드 레이아웃은 CSS 기반의 컬럼을 제공해서 그리드 레이아웃을 구성할 수 있도록 한다. 그리드 레이아웃은 한 행에 최대 5개의 컬럼을 제공한다. 그리드 레이아웃은 작은 사이즈의 컴포넌트를 페이지 상에 배치할 때 사용될 수 있다.
그리드 레이아웃을 그리는 방법은 그리드 외각을 결정하는 <div>태그의 class 속성에 컬럼의 갯수에 따라 ui-grid-a, ui-grid-b, ui-grid-c, ui-grid-d 중 하나를 지정한다. 그리드 안의 각 컬럼에 해당하는 <div>태그의 class 속성에 배치되는 순서에 따라 ui-block-a, ui-block-b, ui-block-c, ui-block-d, ui-block-e 를 차례대로 지정한다.
그리드의 레이아웃 및 컬럼 속성
그리드 정의 | 컬럼수 | 컬럼에 해당하는 항목 class 속성 값 |
ui-grid-a | 2 | ui-block-a, ui-block-b |
ui-grid-b | 3 | ui-block-a, ui-block-b, ui-block-c |
ui-grid-c | 4 | ui-block-a, ui-block-b, ui-block-c, ui-block-d |
ui-grid-d | 5 | ui-block-a, ui-block-b, ui-block-c, ui-block-d, ui-block-e |
컬럼수가 2개인 그리드 예제
<div class="ui-grid-a">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
...
</div>
컬럼수가 3개인 그리드 예제
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
...
</div>
컬럼수가 4개인 그리드 예제
<div class="ui-grid-c">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
...
</div>
컬럼수가 5개인 그리드 예제
<div class="ui-grid-d">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-e"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-e"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-e"></div>
...
</div>