# グリッドシステム

## デフォルト

`.%{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`を簡単に入れ子にすることができます。ただし、行、列、ギャップの変更を継承します。下の例を見てください：

- デフォルトの列数をローカルCSS変数で上書きします： `--%{STYLEGUIDE_PAGE}-columns： 3`。
- 最初の自動カラムでは、カラム数は継承され、各カラムは利用可能な幅の3分の1になります。
- 2つ目のオートカラムでは、ネストされた`.%{STYLEGUIDE_PAGE}-cssgrid`のカラム数を12（デフォルト）にリセットします。
- 3つ目の自動カラムにはネストされたコンテンツがありません。

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>