📝

CSS Subgridの学習記録。

2023/12/24に公開

CSS

学習

メモ

tech

CSS Subgridとは？

行列の入れ子が可能。
- 親行列の中に子行列を入れたとき、子行列を親行列の行に揃えられる

CSS Gridの新たな仕様「CSS Grid Layout Level 2」

従来のブラウザで対応していたのは、
- CSS Grid Layout Level 1 -
です。

そして、追加された新たな仕様が、
- CSS Grid Layout Level 2 -
になります。

「CSS Grid Layout Level 2」で、行列の入れ子が可能になりました。
従来の「CSS Grid Layout Level 1」では実装が難しかったレイアウトもありましたが、
新たな仕様「CSS Grid Layout Level 2」で登場した Subgrid（行列の入れ子が可能） では、複雑な入れ子のレイアウトが可能になったことで、CSS Gridを使用したレイアウトの表現の幅も増えますね。

subgridの使用例（カード型レイアウト）

今回使用するコード（HTML）

<div class="card-container">
  <div class="card">
    <h2 class="card-title">1行のタイトル</h2>
    <img class="image" src="images/neon.jpg" width="360" height="240" alt="画像" />
    <p class="description">1行のテキスト1行のテキスト</p>
    <div class="label"><span>ラベル</span></div>
  </div>
  <div class="card">
    <h2 class="card-title">2行のタイトル2行のタイトル2行のタイトル2行のタイトル</h2>
    <img class="image" src="images/neon.jpg" width="360" height="240" alt="画像" />
    <p class="description">2行のテキスト2行のテキスト2行のテキスト2行のテキスト2行のテキスト</p>
    <div class="label"><span>ラベル</span></div>
  </div>
  <div class="card">
    <h2 class="card-title">3行のタイトル3行のタイトル3行のタイトル3行のタイトル3行のタイトル3行のタイトル</h2>
    <img class="image" src="images/neon.jpg" width="360" height="240" alt="画像" />
    <p class="description">3行のテキスト3行のテキスト3行のテキスト3行のテキスト3行のテキスト3行のテキスト3行のテキスト</p>
    <div class="label"><span>ラベル</span></div>
  </div>
</div>

まずは、親要素をCSS Gridで配置

.card-container {
  /** CSS Gridで配置 **/
  display: block grid;
  /** 列方向のサイズを指定 **/
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

親要素にCSS Gridを適用させた時点でのレイアウトが以下になります。
ウィンドウサイズ：大

ウィンドウサイズ：小
カード内の高さが揃わず、文字数によってバラバラなレイアウトになってしまう、、、
ちなみに従来の「CSS Grid Layout Level 1」では、アプローチとしてJavaScriptを使用して高さを揃えていたみたいです。

CSS Subgridの登場で、各カードの要素の高さが揃えられるようになった。

子要素をCSS Gridで配置

.card {
  /** CSS Gridで配置 **/
  display: block grid;
  /** 行方向のサイズを指定 **/
  grid-template-rows: subgrid;
  /** 4行分のサイズを使う **/
  grid-row: span 4;
}

ここでSubgrid（CSS Grid Layout Level 2）の登場です。

display: block grid;：card要素を、CSS Gridで配置する。
grid-template-rows: subgrid;：行方向のサイズを指定する。
grid-row: span 4;　：subgridが指定されていることにより、親要素の4行分の高さになる。

実行結果は以下の通りです。
ウィンドウサイズ：大

ウィンドウサイズ：小
これで各カードの要素の高さが揃いました！

要素間のスペースを確保する

さいごに、要素間のスペースをgapで確保して調整。

.card-container {
  display: block grid;
  grid-template-columns:
    repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px; /** 追加 **/
}

注意点

冒頭で書いた通り、「親行列の中に子行列を入れたとき、子行列を親行列の行に揃えられる」
という効果が display: subgrid; を指定した要素には適用されます。
よって、今回の場合は各カード内のコンテンツ間の行幅が親要素で指定した gap: 25px; と同じ幅を確保するようになってしまいます。

解決方法

これは、子行列でコンテンツ間の行幅をgapプロパティで上書きすれば解決します。
例えば以下のように指定します。

/** 親要素 **/
.card-container {
  display: block grid;
  grid-template-columns:
    repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

/** 子要素 **/
.card {
  /** CSS Gridで配置 **/
  display: block grid;
  /** 行方向のサイズを指定 **/
  grid-template-rows: subgrid;
  /** 4行分のサイズを使う **/
  grid-row: span 4;
  /** 行幅の指定を10pxで上書き **/
  row-gap: 10px;
}

これで、子要素の行幅の調整を指定できました。

Subgrid対応状況

2023年9月からChrome、Edge、Safari、Firefoxを含めて全ブラウザで対応しています。
https://caniuse.com/css-subgrid

さいごに

今回は、Subgridの学習記録を記事に残しました。
せっかく学んだので、記事にしてアウトプットです。
CSS Gridの復習にもなったので良かったです☺