.%{STYLEGUIDE_PAGE}-cssgridで囲うとCSS Gridレイアウトが適用されます。ブロックをレイアウトするために使います。合計12カラムで計算します。
<div class="%{STYLEGUIDE_PAGE}-cssgrid">
<div class="%{STYLEGUIDE_PAGE}-g-col-5">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-g-col-7">
...
</div>
</div>
<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を簡単に入れ子にすることができます。ただし、行、列、ギャップの変更を継承します。下の例を見てください:
--%{STYLEGUIDE_PAGE}-columns: 3。.%{STYLEGUIDE_PAGE}-cssgridのカラム数を12(デフォルト)にリセットします。
<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-5にするとグリッドアイテムが5列目から開始されます。
<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-クラスを使用します。レスポンシブ対応も可能です。
<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変数を使用して列数、行数、間隔幅をカスタマイズします。
| 変数名 | フォールバック値 | 説明 |
|---|---|---|
| --%{STYLEGUIDE_PAGE}-rows | 1 | グリッドテンプレートの行数 |
| --%{STYLEGUIDE_PAGE}-columns | 12 | グリッドテンプレートの列数 |
| --%{STYLEGUIDE_PAGE}-gap | 1.5rem | 列間の隙間の大きさ(垂直方向と水平方向) |
<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>