CSS Subgridの学習記録

CSS

Oct 05, 2024

キーワード：: #Tech; #学習; #CSS Grid; #Subgrid; #カード型レイアウト

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;
}