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>

jQuery-Mobile

前の記事

jQuery-Mobile 基本
CSS

次の記事

CSS 解除