【CSS】CSS Grid Layoutの新機能「サブグリッド」の使い方 - CSS Grid

## 概要
今まで、Firefoxでしか実装されていなかった、
CSS Grid Layoutの新機能「サブグリッド」が、[Interop 2022](https://web.dev/interop-2022/)の取り組みによって、
主要ブラウザすべてで、サポートされようとしています。

それに伴い、CSS Grid Layoutの新機能「サブグリッド」の使い方についてまとめました。

## サブグリッド `subgrid`
サブグリッド `subgrid` とは、CSS Grid Layoutの新機能になります。
そのため、サブグリッドの説明する前に、CSS Grid Layoutについて復習しましょう。

### CSS Grid Layoutとは？

CSS Grid Layoutは、列と行を定義することで、
水平線と垂直線が交差したレイアウト(グリッド)をCSSで表現したものになります。

親要素に`display: grid;`を記載することで下の画像のように
親要素をグリットコンテナーとして、子要素をグリットアイテムとして扱うことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/38455cb6-9bb2-3d0b-0f2d-b099c0028d3e.png)

https://qiita.com/degudegu2510/items/8ef80cd811bf7d21c060

*※ CSS Grid Layoutの詳しい使い方については、↑こちらの記事で詳しく解説しています。ご覧ください。*


### サブグリッド `subgrid`とは？
では、早速サブグリッドについて解説していきます。

サブグリッドとは、
グリッドアイテムに `display: grid;` を指定して、
`grid-template-columns: subgrid;`を指定することで、
グリットアイテム/サブグリットコンテナーの列をグリットコンテナーの列に合わせることができ、

`grid-template-rows: subgrid;`を指定することで、
グリットアイテム/サブグリットコンテナーの行をグリットコンテナーの行に合わせることができる
機能です。

サブグリットを使うことで、グリットアイテムの子要素（サブグリットアイテム）の大きさを合わせることができます。

|![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5e2617b6-366b-c65b-26a4-c9c02193bc6c.png)|
|:--:|
|**サブグリット使ってない**|

|![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/285b0eee-a523-1dab-4e72-8f17af7ec670.png)|
|:--:|
|**サブグリット使ってる**|

## 使い方
### サンプル
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="poaKzEL" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/poaKzEL">
  Untitled</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


*※ Firefoxでご確認ください。*
<details><summary>Firefoxのでの様子はこちらからご覧いただけます。</summary><div>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/caa101d2-0bf2-a7a4-bc5f-f617dc9ffd77.png" alt="" />
</div></details>

### 実装方法
#### HTML
```html
<div class="container">
  <div class="item">
    <p class="subItem">吾輩は猫である</p>
    <p class="subItem">...</p>
    <p class="subItem">...</p>
  </div>
  <div class="item">
    <p class="subItem">羅生門</p>
    <p class="subItem">...</p>
    <p class="subItem">...</p>
  </div>
  <div class="item">
    <p class="subItem">記憶に残る正月の思い出</p>
    <p class="subItem">...</p>
    <p class="subItem">...</p>
  </div>
</div>
```

#### CSS
```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  gap: 8px 24px;
}

.item {
  /*グリットアイテムを3グリット分の大きさにする*/
  grid-row: span 3;
  /*サブグリットの指定*/
  display: grid;
  grid-template-rows: subgrid;
}
```
<details><summary>サブグリットに関係のないCSSはこちら</summary><div>

```css
.container {
  background-color: #F9FAFA;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 16px;
}

.item {
  background-color: #E3F7DF;
  border: 1px solid #55c500;
  padding: 16px;
}

.subItem {
  background-color: #FCF0BF;
  border: 1px solid #F7A535;
  padding: 8px;
  margin: 0;
}
```
</div></details>

**グリットアイテム / サブグリットコンテナー**に `grid-template-rows: subgrid;` を記載することで、
サブグリットアイテムがグリットコンテナーの**行**に合い、`gap` の値も引き継ぎます。

サンプルの場合では、サブグリットアイテム間の余白は、グリットコンテナーで ` gap: 8px 24px;` と指定しているため、**8px**になります。

同様に、**グリットアイテム / サブグリットコンテナー**に `grid-template-column: subgrid;` を記載することで、
サブグリットアイテムがグリットコンテナーの**列**に合います。

## ブラウザーの互換性
2022/6/2現在はまだ、Firefoxのみで、まだまだ、実務では使えないですが、
[Interop 2022](https://web.dev/interop-2022/)の取り組みによって、主要ブラウザで、サポートされようとしています。
そのため、実務で使えるのは間近です。

<picture>
　　<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-subgrid.webp">
　　<source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-subgrid.png">
　　<img src="https://caniuse.bitsofco.de/image/css-subgrid.jpg" alt="Data on support for the css-subgrid feature across the major browsers from caniuse.com">
</picture>

## まとめ
この記事は、CSS Grid Layoutの新機能「サブグリッド」の基本的な使い方をまとめました。

サブグリットを使うことで、FlexやGridだけでは実現が難しかった、めんどくさかったレイアウトを簡単に実装できるようになります。

しかし、2022/6/2現在ではまだ、Firefoxのみでしか使えないため、まだまだ、実務では使えないですが、
[Interop 2022](https://web.dev/interop-2022/)の取り組みによって、今後、主要ブラウザでサポートされます。

今後よく使っていくであろう、サブグリットを今のうちから理解して、使えるようになった時に、すぐ使えるように準備しておきたいですね。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510