グリッドシステム

グリッド行列（ロウ・カラム）

Startify-UIでは、カラムレイアウトの基本設計として、12分割グリッドシステムを採用しています。12分割グリッドシステムは、「行（ロウ）」と「列（カラム）」の要素で構成し、行要素の子要素に列要素を配置する形を基本とします。

グリッド行列はCSSグリッドレイアウトをベースに構築されており、su-rowクラスが設定された要素をグリッドコンテナとし、su-columnクラスが設定された要素をグリッドアイテムとして扱います。この状態ではでは、グリッドトラックが定義されていないのでgrid-template-columnsプロパティなどを用いて、カラム数を設定するか、下記の等幅カラムレイアウトもしくはユニットカラムレイアウトなどの項にある拡張ユーティリティクラスを追加することで、特定のカラム数やカラム幅を持つマルチカラムレイアウトを構築することができます。

<!-- 行（ロウ）要素-->
<div class="su-row">
  <!-- 列（カラム）要素-->
  <div class="su-column"></div>
  <div class="su-column"></div>
  <div class="su-column"></div>
</div>

クラス名の一覧

等幅カラムレイアウト

12分割グリッドシステムにおいてグリッドコンテナ要素となるsu-rowクラスが設定された要素に対して、下記のようにsu-row-col-evenly-[COLUMNS_NUMBER]クラスを追加することで、クラス名に含まれる1〜12のカラムナンバーに対応したカラム数・幅を持つ等幅カラムのレイアウトを構築できます。その際には、子要素のsu-columnクラスの要素は最大カラム数分を含めるようにします。

また、クラス名のサフィックスとして--desktop、あるいは--mobileを追加することで、ブレークポイントのmobile-l（768px）を基準にレイアウトが適用されるようになります。

<!-- 例：等幅2カラムレイアウト -->
<div class="su-row su-row-col-evenly-2">
  <div class="su-column">カラム1</div>
  <div class="su-column">カラム2</div>
</div>

<!-- 例：デスクトップ表示（769px〜）では等幅6カラム、モバイル（〜768px）では等幅2カラムレイアウト -->
<div class="su-row su-row-col-evenly-6--desktop su-row-col-evenly-2--mobile">
  <div class="su-column">カラム1</div>
  <div class="su-column">カラム2</div>
  <div class="su-column">カラム3</div>
  <div class="su-column">カラム4</div>
  <div class="su-column">カラム5</div>
  <div class="su-column">カラム6</div>
</div>

クラス名の一覧

ユニットカラムレイアウト

12分割グリッドシステムにおいてグリッドコンテナ要素となるsu-rowクラスが設定された要素に対して、su-row-col-unitsクラスを追加し、その子要素となるグリッドアイテム要素のsu-columnクラスの要素に対してsu-column-unit-[COLUMN_UNIT_COUNT]クラスを追加することで、指定したカラムのユニット数に対応したカラム幅を持つマルチカラムレイアウトを構築することができます。なお、クラスに含まれるカラムのユニット数の合計は、正しくレイアウトを構成するために1つの行内で12になるようにします。
（参考：マルチカラムレイアウトの例）

また、su-column-unit-[COLUMN_UNIT_COUNT]クラスのサフィックスとして--desktop、あるいは--mobileを追加することで、ブレークポイントのmobile-l（768px）を基準にカラム幅を変更することができます。

<!-- 例：3:1の2カラムレイアウト -->
<div class="su-row su-row-col-units">
  <div class="su-column su-column-unit-9">カラムA</div>
  <div class="su-column su-column-unit-3">カラムB</div>
</div>

<!-- 例：デスクトップ表示（769px〜）では1:2:1の3カラムレイアウト、モバイル（〜768px）では1:1:1の3カラムレイアウト -->
<div class="su-row su-row-col-units">
  <div class="su-column su-column-unit-3--desktop su-column-unit-4--mobile">カラムA</div>
  <div class="su-column su-column-unit-6--desktop su-column-unit-4--mobile">カラムB</div>
  <div class="su-column su-column-unit-3--desktop su-column-unit-4--mobile">カラムC</div>
</div>

クラス名の一覧

サイドバー付き2カラムレイアウト

ページレイアウトによっては、サイドバー（サブコンテンツ）とメインコンテンツに分かれた2カラムレイアウトが採用されているケースもあります。その場合には、su-rowクラスが設定された要素に対して、su-row-col-sidebar-lクラス、もしくはsu-row-col-sidebar-rクラスを追加することで、自動的にサイドバーエリアが含まれた3:1の2カラムレイアウトを構築することができます。

su-row-col-sidebar-lクラスを追加すると、ビューポート幅が769px以上の場合には左側にサイドバー（サブコンテンツ）、右側にメインコンテンツエリアが、su-row-col-sidebar-rクラスを追加すると、ビューポート幅が769px以上の場合には右側にサイドバー（サブコンテンツ）、左側にメインコンテンツエリアが表示されます。どちらもビューポート幅が768px以下の場合にはメインコンテンツからサイドバー（サブコンテンツ）の順に1カラムで表示されます。

サイドバー（サブコンテンツ）とメインコンテンツのHTML記述順を調整する場合には、後述するカラムの順序を指定するユーティリティクラスを使用します。

<!-- 左側にサイドバー（ビューポート幅が769px〜) -->
<div class="su-row su-row-col-sidebar-l">
  <div class="su-column">
    <aside>サイドバー（サブコンテンツ）</aside>
  </div>
  <div class="su-column">
    <article>メインコンテンツ</article>
  </div>
</div>

<!-- 右側にサイドバー（ビューポート幅が769px〜) -->
<div class="su-row su-row-col-sidebar-r">
  <div class="su-column">
    <article>メインコンテンツ</article>
  </div>
  <div class="su-column">
    <aside>サイドバー（サブコンテンツ）</aside>
  </div>
</div>

クラス名の一覧

カラムの順序

12分割グリッドシステムにおいてグリッドアイテム要素となるsu-columnクラスが設定された要素に対して、su-column-order-[ORDER_NUMBER]クラスを追加することで、カラムの表示順序を指定することができます。

また、su-column-order-[ORDER_NUMBER]クラスのサフィックスとして--desktop、あるいは--mobileを追加することで、ブレークポイントのmobile-l（768px）を基準にカラムの表示順序を変更することができます。

<div class="su-row su-row-col-evenly-3">
  <!-- カラムの表示順は2番目 -->
  <div class="su-column su-column-order-2">カラムA</div>

  <!-- カラムの表示順はビューポート幅が769px以上で1番目、768px以下で3番目 -->
  <div class="su-column su-column-order-1--desktop su-column-order-3--mobile">カラムB</div>

  <!-- カラムの表示順はビューポート幅が769px以上で3番目、768px以下で1番目 -->
  <div class="su-column su-column-order-3--desktop su-column-order-1--mobile">カラムC</div>
</div>

クラス名の一覧