jQueryのモバイルレイアウトグリッド
jQueryのモバイルは、CSSベースのカラムのレイアウトのセットを提供します。 しかし、カラムのレイアウトは、一般的に携帯の画面幅に起因し、モバイルデバイス上で推奨されていません。
しかし、あなたはそれが表にあったかのように、ボタンやナビゲーションタブのように、サイド・バイ・サイドの小さい要素を配置したい時間があります。 その後、列は完璧です。
グリッド内の列はなしで、等しい幅（合計で広い100％）であるborder, background, marginやpadding 。
使用することができる5つのレイアウトグリッドがあります。
| グリッドクラス | コラム | 列幅 | に対応 | 例 |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
列のコンテナ内では、子要素は、クラスの持つことができるui-block-a|b|c|d|e列の数に応じて、。 列は、サイド・バイ・サイドをフロートします。
例1：（2列のレイアウトである）UI-グリッドクラスの場合は、あなたがの2つの子要素を指定する必要がありますui-block-aおよびui-block-b 。
例2：についてui-grid-b （3カラムレイアウト）、の3つの子要素を追加ui-block-a, ui-block-bおよびui-block-c 。
グリッドのカスタマイズ
あなたは、CSSを使用して、列ブロックをカスタマイズすることができます。
例
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height:
100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
»それを自分で試してみてください また、インラインスタイルを使用してブロックをカスタマイズできます。
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
複数の行
あなたの列内に複数の行を持つことも可能です。
注： ui-block-a-class 、常に新しい行を作成します。
例
<div class="ui-grid-b">
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-c"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
</div>
»それを自分で試してみてください 応答グリッド
小さな画面上では、1行のテキストサイドバイサイドであまりにも多くのボタンを持つことが推奨されていません - テキストを短くする恐れがありますように。
応答グリッドの場合は、コンテナにUI応答性クラスを追加します。