jQuery Mobile は、一連の CSS ベースのカラム・レイアウトを提供します。 ただし、モバイルの画面幅のために、一般的にはモバイル・デバイスでのカラム・レイアウトは推奨されません。
しかし、ボタンやナビゲーション・タブのような小さい要素を、テーブルのように並べて配置したいときがあります。 その時には後、カラムは完璧です。
グリッド内のカラムは、幅が同じ（且つ、合計の幅が 100％）で、ボーダー、背景、マージン、パディングを持っていません。
使用できるレイアウトグリッドは5つあります：
| グリッド・クラス | カラム | カラム幅 | Corresponds To | 例 |
|---|---|---|---|---|
| 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： ui-grid-a クラス（2 カラム・レイアウト）の場合、ui-block-a と ui-block-b の2つの子要素を指定しなければなりません。
例 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>
Try it Yourself »インラインスタイルを使用してブロックをカスタマイズすることもできます：
<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>
Try it Yourself »小型画面では、1 行に並ぶテキストのボタンが多すぎると、テキストが短くなることがあるため、推奨されません。
レスポンシブ・グリッドの場合は、ui-responsive クラスをコンテナに追加します：