グリッドシステム

デフォルト

.%{STYLEGUIDE_PAGE}-cssgridで囲うとCSS Gridレイアウトが適用されます。ブロックをレイアウトするために使います。合計12カラムで計算します。

.%{STYLEGUIDE_PAGE}-g-col-(レスポンシブ無し)

%{STYLEGUIDE_PAGE}-g-col-1
%{STYLEGUIDE_PAGE}-g-col-11
%{STYLEGUIDE_PAGE}-g-col-2
%{STYLEGUIDE_PAGE}-g-col-10
%{STYLEGUIDE_PAGE}-g-col-3
%{STYLEGUIDE_PAGE}-g-col-9
%{STYLEGUIDE_PAGE}-g-col-4
%{STYLEGUIDE_PAGE}-g-col-8
%{STYLEGUIDE_PAGE}-g-col-5
%{STYLEGUIDE_PAGE}-g-col-7
%{STYLEGUIDE_PAGE}-g-col-6
%{STYLEGUIDE_PAGE}-g-col-6
<div class="%{STYLEGUIDE_PAGE}-cssgrid">
  <div class="%{STYLEGUIDE_PAGE}-g-col-5">
  ...
  </div>

  <div class="%{STYLEGUIDE_PAGE}-g-col-7">
  ...
  </div>
</div>

.%{STYLEGUIDE_PAGE}-g-col-*-(レスポンシブ有り)

%{STYLEGUIDE_PAGE}-g-col-1 %{STYLEGUIDE_PAGE}-g-col-md-1
%{STYLEGUIDE_PAGE}-g-col-11 %{STYLEGUIDE_PAGE}-g-col-md-11
%{STYLEGUIDE_PAGE}-g-col-2 %{STYLEGUIDE_PAGE}-g-col-md-2
%{STYLEGUIDE_PAGE}-g-col-10 %{STYLEGUIDE_PAGE}-g-col-md-10
%{STYLEGUIDE_PAGE}-g-col-3 %{STYLEGUIDE_PAGE}-g-col-md-3
%{STYLEGUIDE_PAGE}-g-col-9 %{STYLEGUIDE_PAGE}-g-col-md-9
%{STYLEGUIDE_PAGE}-g-col-4 %{STYLEGUIDE_PAGE}-g-col-md-4
%{STYLEGUIDE_PAGE}-g-col-8 %{STYLEGUIDE_PAGE}-g-col-md-8
%{STYLEGUIDE_PAGE}-g-col-5 %{STYLEGUIDE_PAGE}-g-col-md-5
%{STYLEGUIDE_PAGE}-g-col-7 %{STYLEGUIDE_PAGE}-g-col-md-7
%{STYLEGUIDE_PAGE}-g-col-6 %{STYLEGUIDE_PAGE}-g-col-md-6
%{STYLEGUIDE_PAGE}-g-col-6 %{STYLEGUIDE_PAGE}-g-col-md-6
<div class="%{STYLEGUIDE_PAGE}-cssgrid">
  <div class="%{STYLEGUIDE_PAGE}-g-col-5 %{STYLEGUIDE_PAGE}-g-col-md-5">
  ...
  </div>

  <div class="%{STYLEGUIDE_PAGE}-g-col-7 %{STYLEGUIDE_PAGE}-g-col-md-7">
  ...
  </div>
</div>

各画面幅対応表

クラス名 デフォルトのブレイクポイント
%{STYLEGUIDE_PAGE}-g-col- 全て
%{STYLEGUIDE_PAGE}-g-col-sm- 480px以上〜
%{STYLEGUIDE_PAGE}-g-col-md- 768px以上〜
%{STYLEGUIDE_PAGE}-g-col-lg- 1024px以上〜
%{STYLEGUIDE_PAGE}-g-col-xl- 1440px以上〜

グリッドの入れ子

グリッドシステムでは.%{STYLEGUIDE_PAGE}-cssgridを簡単に入れ子にすることができます。ただし、行、列、ギャップの変更を継承します。下の例を見てください:

First auto-column
Auto-column
Auto-column
Second auto-column
6 of 12
4 of 12
2 of 12
Third auto-column
<div class="%{STYLEGUIDE_PAGE}-cssgrid" style="--%{STYLEGUIDE_PAGE}-columns: 3;">
  <div>
    First auto-column
    <div class="%{STYLEGUIDE_PAGE}-cssgrid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="%{STYLEGUIDE_PAGE}-cssgrid" style="--%{STYLEGUIDE_PAGE}-columns: 12;">
      <div class="%{STYLEGUIDE_PAGE}-g-col-6">6 of 12</div>
      <div class="%{STYLEGUIDE_PAGE}-g-col-4">4 of 12</div>
      <div class="%{STYLEGUIDE_PAGE}-g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

グリッド開始位置の指定 .%{STYLEGUIDE_PAGE}-g-start-

.%{STYLEGUIDE_PAGE}-g-start-5にするとグリッドアイテムが5列目から開始されます。

.%{STYLEGUIDE_PAGE}-g-col-3 %{STYLEGUIDE_PAGE}-g-start-3
.%{STYLEGUIDE_PAGE}-g-col-4 %{STYLEGUIDE_PAGE}-g-start-6
<div class="%{STYLEGUIDE_PAGE}-cssgrid">
  <div class="%{STYLEGUIDE_PAGE}-g-col-3 %{STYLEGUIDE_PAGE}-g-start-3">
  ...
  </div>

  <div class="%{STYLEGUIDE_PAGE}-g-col-4 %{STYLEGUIDE_PAGE}-g-start-6">
  ...
  </div>
</div>

カラム数の変更 .%{STYLEGUIDE_PAGE}-g-cols-

グリッド全体のカラム数を変更するには.%{STYLEGUIDE_PAGE}-g-cols-クラスを使用します。レスポンシブ対応も可能です。

.%{STYLEGUIDE_PAGE}-g-col-2 .%{STYLEGUIDE_PAGE}-g-col-md-6
.%{STYLEGUIDE_PAGE}-g-col-4 .%{STYLEGUIDE_PAGE}-g-col-md-6
<div class="%{STYLEGUIDE_PAGE}-cssgrid %{STYLEGUIDE_PAGE}-g-cols-6 %{STYLEGUIDE_PAGE}-g-cols-md-12">
  <div class="%{STYLEGUIDE_PAGE}-g-col-2 %{STYLEGUIDE_PAGE}-g-col-md-6">
  ...
  </div>

  <div class="%{STYLEGUIDE_PAGE}-g-col-4 %{STYLEGUIDE_PAGE}-g-col-md-6">
  ...
  </div>
</div>

CSS変数によるカスタマイズ

ローカルCSS変数を使用して列数、行数、間隔幅をカスタマイズします。

変数名 フォールバック値 説明
--%{STYLEGUIDE_PAGE}-rows 1 グリッドテンプレートの行数
--%{STYLEGUIDE_PAGE}-columns 12 グリッドテンプレートの列数
--%{STYLEGUIDE_PAGE}-gap 1.5rem 列間の隙間の大きさ(垂直方向と水平方向)
4カラムグリッド、2rem間隔
4カラムグリッド、2rem間隔
<div class="%{STYLEGUIDE_PAGE}-cssgrid" style="--%{STYLEGUIDE_PAGE}-columns: 4; --%{STYLEGUIDE_PAGE}-gap: 2rem;">
  <div class="%{STYLEGUIDE_PAGE}-g-col-2">
  ...
  </div>
  <div class="%{STYLEGUIDE_PAGE}-g-col-2">
  ...
  </div>
</div>