ガター（gap）

行列ガター（column-gap & row-gap）

グリッドレイアウトやフレックスボックスを使って配置している要素間の余白（ガター）を設定するために、gapプロパティのユーティリティクラスが用意されています。su-gp-[GAP_SIZE]クラスを付与することで、サイズに応じた行列ガター（水平垂直方向への余白）を設定できます。サフィックスとなるサイズですが、Startify-UIのデザイントークンで採用されているサイズスケールのルールに基づき、6sから10lまでのサイズ別の余白が設定できます。

12分割グリットシステムと組み合わせることで、WebページやWebアプリケーションの画面レイアウトが簡単に作成することができます。

<div class="su-row su-row-col-evenly-3 su-gp-2s">
  <!-- 行列ガター（水平垂直方向）を設定 -->
  <div class="su-column"></div>
  ...
</div>

クラス名の一覧

.su-gp-0	行列のガター（gap）を削除（0を指定）します。
.su-gp-6s	2px（0.125rem）のサイズで行列のガター（gap）を設定します。
.su-gp-5s	4px（0.25rem）のサイズで行列のガター（gap）を設定します。
.su-gp-4s	8px（0.5rem）のサイズで行列のガター（gap）を設定します。
.su-gp-3s	10px（0.625rem）のサイズで行列のガター（gap）を設定します。
.su-gp-2s	12px（0.75rem）のサイズで行列のガター（gap）を設定します。
.su-gp-s	14px（0.875rem）のサイズで行列のガター（gap）を設定します。
.su-gp-r	16px（1rem）のサイズで行列のガター（gap）を設定します。
.su-gp-m	18px（1.125rem）のサイズで行列のガター（gap）を設定します。
.su-gp-l	20px（1.25rem）のサイズで行列のガター（gap）を設定します。
.su-gp-2l	24px（1.5rem）のサイズで行列のガター（gap）を設定します。
.su-gp-3l	28px（1.75rem）のサイズで行列のガター（gap）を設定します。
.su-gp-4l	32px（2rem）のサイズで行列のガター（gap）を設定します。
.su-gp-5l	48px（3rem）のサイズで行列のガター（gap）を設定します。
.su-gp-6l	64px（4rem）のサイズで行列のガター（gap）を設定します。
.su-gp-7l	96px（6rem）のサイズで行列のガター（gap）を設定します。
.su-gp-8l	128px（8rem）のサイズで行列のガター（gap）を設定します。
.su-gp-9l	160px（10rem）のサイズで行列のガター（gap）を設定します。
.su-gp-10l	192px（12rem）のサイズで行列のガター（gap）を設定します。

列ガター（column-gap）

su-gpc-[GAP_SIZE]クラスを付与することで、サイズに応じた列のガター（垂直方向のみの余白）を設定できます。サフィックスとなるサイズの指定は行列ガターと同じです。垂直方向だけに設定、または水平方向のガターサイズを異なる大きさにする場合に使用します。

<!-- 列ガター（垂直方向）のみを設定 -->
<div class="su-row su-row-col-evenly-2 su-gpc-l">  
  <div class="su-column"></div>
  ...
</div>

<!-- 列ガター（垂直方向）と行ガター（水平方向）を異なるサイズで設定 -->
<div class="su-row su-row-col-evenly-2 su-gpc-l su-gpr-m">  
  <div class="su-column"></div>
  ...
</div>

クラス名の一覧

.su-gpc-0	列のガター（column-gap）を削除（0を指定）します。
.su-gpc-6s	2px（0.125rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-5s	4px（0.25rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-4s	8px（0.5rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-3s	10px（0.625rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-2s	12px（0.75rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-s	14px（0.875rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-r	16px（1rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-m	18px（1.125rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-l	20px（1.25rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-2l	24px（1.5rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-3l	28px（1.75rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-4l	32px（2rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-5l	48px（3rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-6l	64px（4rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-7l	96px（6rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-8l	128px（8rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-9l	160px（10rem）のサイズで列のガター（column-gap）を設定します。
.su-gpc-10l	192px（12rem）のサイズで列のガター（column-gap）を設定します。

行ガター（row-gap）

su-gpr-[GAP_SIZE]クラスを付与することで、サイズに応じた行のガター（水平方向のみの余白）を設定できます。サフィックスとなるサイズの指定は行列ガターと同じです。水平方向だけに設定、または垂直方向のガターサイズを異なる大きさにする場合に使用します。

<!-- 行ガター（水平方向）のみを設定 -->
<div class="su-row su-row-col-evenly-1 su-gpr-m">
  <div class="su-column"></div>
  ...
</div>

<!-- 行ガター（水平方向）と列ガター（垂直方向）を異なるサイズで設定 -->
<div class="su-row su-row-col-evenly-1 su-gpc-l su-gpr-m">  
  <div class="su-column"></div>
  ...
</div>

クラス名の一覧

.su-gpr-0	行のガター（row-gap）を削除（0を指定）します。
.su-gpr-6s	2px（0.125rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-5s	4px（0.25rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-4s	8px（0.5rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-3s	10px（0.625rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-2s	12px（0.75rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-s	14px（0.875rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-r	16px（1rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-m	18px（1.125rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-l	20px（1.25rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-2l	24px（1.5rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-3l	28px（1.75rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-4l	32px（2rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-5l	48px（3rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-6l	64px（4rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-7l	96px（6rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-8l	128px（8rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-9l	160px（10rem）のサイズで行のガター（row-gap）を設定します。
.su-gpr-10l	192px（12rem）のサイズで行のガター（row-gap）を設定します。