jQuery Mobile - Layout grids

여러 컬럼이 있는 레이아웃은 일반적으로 모바일환경에서는 추천되지 않습니다.
좁은 스크린의 길이 때문입니다. 그러나, 버튼이나 네이게이션 바와 같은 작은 요소들을 나열할 필요가 있을 경우가 있습니다.
JQM 프레임웍에서는 ui-grid로 불리는 편리한 블록 스타일 class를 통해 css 기반 컬럼을 쉽게 만들수 있습니다.

두가지 프리셋 레이아웃이 있는데, 그중 하나는 ui-grid-a의 class를 사용하는 두개의 컬럼과 ui-grid-b의 class를 사용하는 세개의 컬럼입니다. 컬럼이 필요한 어느 상황에라도 사용이 가능합니다.
Grid는 테두리나 백그라운드가 없이 보여질수 있는 100%의 가로 길이를 사용합니다. 패딩과 마진도 없습니다. 그래서, 그리드들은 그 내부에 있는 요소들의 스타일을 방해해서는 안됩니다.

Two column grids
두개의 컬럼 레이아웃을 만들기 위해, class속성 값이 ui-grid-a인 컨테이너로 시작합니다. 그리고, 내부의 두 컨테이너 중에 첫번째 것은 ui-block-a를 두번째 것은 ui-block-b를 추가해줍니다.

<div class="ui-grid-a">
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

그리드 class는 어떤 컨테이너에도 적용할 수 있습니다. fieldset태그에 ui-grid-a를 추가하고 스크린 가로 사이즈의 각각 반씩의 공간에 두개 버튼을 넣어 ui-block를 적용합니다.

<fieldset class="ui-grid-a">
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>

Theming system으로부터의 테마class는 그리드를 포함하는 엘리먼트 하나를 추가할 수 있습니다. 두개 class를 추가여 블록을 만들수 있습니다. 기본 bar 패딩을 추가하기 위해 ui-bar를 사용하고 “e” 툴바 테마의 배경 그라디에이션과 폰트 스타일을 적용하기 위해 ui-bar-e를 추가합니다. Style=”height:120px” 속성은 또한 각 그리드의 기본 높이를 셋팅합니다.

<div class="ui-grid-a">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
</div><!-- /grid-a -->

Three-column grids
3개의 자식 컨테이너를 가지는 부모 컨테이너에 class=ui-grid-b를 추가하여 생성합니다. 자식 컨테이너는 가로 길이를 1/3하여 각각 요소에 ui-block-a/b/c의 class를 추가합니다.

<div class="ui-grid-b">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
</div><!-- /grid-b -->

<fieldset class="ui-grid-b">
    <div class="ui-block-a"><button type="submit" data-theme="c">Hmm</button></div>
    <div class="ui-block-b"><button type="submit" data-theme="a">No</button></div>     
    <div class="ui-block-b"><button type="submit" data-theme="b">Yes</button></div> 
</fieldset>

Four-column grids
4개의 컬럼을 갖는 그리드는 class=ui-grid-c 를 추가하여 만듭니다.

<div class="ui-grid-c">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
</div><!-- /grid-c -->

Five-column grids
5개 컬럼을 갖는 그리드는 class=ui-grid-d를 추가하여 만듭니다.

<div class="ui-grid-d">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
    <div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
</div><!-- /grid-c -->

Multiple row grids
그리드는 아이템들의 여러 row를 감싸서 디자인 합니다. 만약 3개 컬럼의 그리드에 9개 자식 블록을 만들고 싶다면, 각 3개 아이템을 3개 row로 감싸면 됩니다. 이것은 명확한 floats를 위한 css 룰입니다. 그리고 새로운 라인이 시작할 때 순차적으로 반복해서 class=ui-block-a부터 c까지 할당해 주면 됩니다.

<div class="ui-grid-b">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
</div><!-- /grid-c -->