Ionic グリッド(Grid)

Ionic のグリッド(Grid)は他のほとんどのフレームワークとは異なり、フレキシブルボックスモデル(Flexible Box Model)を採用しています。また、モバイル端末では、基本的にほとんどのスマートフォンが対応しています。row スタイルは行を指定し、col スタイルは列を指定します。

等幅グリッド

row スタイルを持つ要素の中に col スタイルが含まれている場合、col は同じサイズに設定されます。

次の例では、row スタイルに5つの col スタイルが含まれており、各 col の幅は20%です。

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

列幅の指定

1行の中の各列のサイズを異なるように設定できます。デフォルトでは、列はすべて同じサイズに分割されます。ただし、列の幅をパーセンテージで設定することもできます（1行は12個のグリッドです）。

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

注意：例では、各 col スタイルには自動的に枠線とグレーの背景が追加されます。

以下に、列幅を指定するためのパーセンテージのスタイル名をいくつか示します：

オフセット付きグリッド

列には左側のオフセットを設定できます。例は次のとおりです：

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-33">.col</div>
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row">
  <div class="col col-33 col-offset-67">.col</div>
</div>

以下は、パーセンテージのオフセットスタイル名の一部です：

垂直方向の整列グリッド

フレキシブルボックスモデルを使用すると、列の垂直方向の整列を簡単に設定できます。垂直方向の整列には、上、中央、下があり、各行の列または指定した列に適用できます。

例では、最後の列に最も高いコンテンツを設定して、垂直方向の整列グリッドをよりよく示しています。

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

レスポンシブグリッド

携帯端末の画面が切り替わるとき、例えば横画面、縦画面などがあります。各行のグリッドが異なる幅に応じて自動的にサイズを調整できるように設定する必要があります。

デバイスごとのレスポンシブクラスのスタイルは次のとおりです：

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>