CSS Gridを使うときにSubgridを使うと楽＆事故りづらい

これは何

• CSS Gridを使う際のTipsです
• イベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」への投稿記事でもあります

リポジトリとGitHub Pages

この記事を書くために書いたコードは公開しています。

GitHub PagesにはSubgridの対応状況の関係でGitHub PagesにはFirefoxからアクセスしてください。

Subgridを使わないと

CSS Grid、便利ですよね。

けどdisplay: gridを適用しても直下の要素しかグリッドアイテムとして認識されません。

もちろんgridを入れ子にすれば階層が深くなっても問題表示上問題はありませんが、何回もgrid-template-columnsやgrid-template-rowsを書くはめになります。

以下の例では、青いエリアはdivが入れ子になっていて、もともとのグリッドに合わせるために手入力でgrid-template-columnsやgrid-template-rowsを指定しなおしています。

<div class="grid">
  <h1 class="headline">Subgrid不使用</h1>
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="non-subgrid">
    <div class="nested-grid-item">12</div>
    <div class="nested-grid-item">13</div>
    <div class="nested-grid-item">14</div>
    <div class="nested-grid-item">15</div>
  </div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
  <div class="grid-item">21</div>
  <div class="grid-item">22</div>
  <div class="grid-item">23</div>
  <div class="grid-item">24</div>
  <div class="grid-item">25</div>
</div>

.grid {
  background-color: #3d4040;
  display: grid;
  flex-grow: 1;
  gap: 10px;
  grid-template-columns: 1fr 2fr 3fr 4fr 5fr;
  grid-template-rows: 1fr 2fr 3fr 4fr 5fr 6fr;
  height: 100%;
  padding: 20px;
}

.non-subgrid {
  display: grid;
  grid-column: 2 / 4;
  grid-row: 4 / 6;
  gap: 10px;
  grid-template-columns: 2fr 3fr;
  grid-template-rows: 4fr 5fr;
}

.headline {
  align-self: center;
  color: #fff;
  font-size: 40px;
  grid-column: 1 / -1;
}

.grid-item {
  background-color: #55c500;
}

.nested-grid-item {
  background-color: #4097db;
}

もし親要素である.gridの幅や高さを変えても、子要素の.non-subgridがそれを検知する術はありません。
例えば.gridだけを次のように変えたら、表示はこうなってしまいます。

  .grid {
    background-color: #3d4040;
    display: grid;
    flex-grow: 1;
    gap: 10px;
-   grid-template-columns: 1fr 2fr 3fr 4fr 5fr;
+   grid-template-columns: 3fr 3fr 2fr 2fr 1fr;
-   grid-template-rows: 1fr 2fr 3fr 4fr 5fr 6fr;
+   grid-template-rows: 1fr 3fr 2fr 2fr 1fr 1fr;
    height: 100%;
    padding: 20px;
  }

Subgridを使うと

-  <div class="non-subgrid">
+  <div class="subgrid">
     <div class="nested-grid-item">12</div>
     <div class="nested-grid-item">13</div>
     <div class="nested-grid-item">14</div>
     <div class="nested-grid-item">15</div>
  </div>

.subgrid {
  display: grid;
  grid-column: 2 / 4;
  grid-row: 4 / 6;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

初期段階の見た目はまったく一緒ですが、subgridを指定することでgrid-template-columnsとgrid-template-rowsに具体的な値を指定しなくても、親のgridの幅を引き継いでくれています。

そのため、親要素のgirdの幅や高さが変わると自動でその変更に従います。

注意

非常に便利なSubgridですが、現在はまだFirefoxでしか使えません。