jQuery-Mobile グリッドレイアウト

jQuery-Mobile グリッドレイアウト

1列のグリッド

<div class="ui-grid-solo">
  <div class="ui-block-a">
    1行目/1列目
  </div>
  ここで改行(ui-block-aで改行される)
  <div class="ui-block-a">
    2行目/1列目
  </div>
</div>

2列のグリッド

<div class="ui-grid-a">
  <div class="ui-block-a">
    1行目/1列目
  </div>
  <div class="ui-block-b">
    1行目/2列目
  </div>
  
  ここで改行(ui-block-aで改行される)
  <div class="ui-block-a">
    2行目/1列目
  </div>
  <div class="ui-block-b">
    2行目/2列目
  </div>
</div>

3列のグリッド

<div class="ui-grid-b">
  <div class="ui-block-a">
    1行目/1列目
  </div>
  <div class="ui-block-b">
    1行目/2列目
  </div>
  <div class="ui-block-c">
    1行目/3列目
  </div>
  
  ここで改行(ui-block-aで改行される)
  <div class="ui-block-a">
    2行目/1列目
  </div>
  <div class="ui-block-b">
    2行目/2列目
  </div>
  <div class="ui-block-c">
    2行目/3列目
  </div>
</div>

4列のグリッド

<div class="ui-grid-c">
  ~
  <div class="ui-block-d">
    1行目/4列目
  </div>
</div>

5列のグリッド

<div class="ui-grid-d">
  ~
  <div class="ui-block-e">
    1行目/5列目
  </div>
</div>

1週間でできる会員サイト「Limited」

1週間でできる会員サイト「Limited」
必要最小限。だから分かりやすい。始めやすい。続けやすい。
限定① 安⼼・安全の会員制
限定② 必要最⼩限の機能
限定③ 独⾃機能を追加可能

前の記事

jQuery-Mobile 基本

次の記事

CSS 解除