1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
---
title: サブグリッド
slug: Web/CSS/CSS_Grid_Layout/Subgrid
tags:
- CSS
- CSS 表示
- CSS グリッド
- ガイド
- サブグリッド
translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
---
{{CSSRef}}
CSS グリッドレイアウトの Level 2 は、 `subgrid` の値を {{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} に追加しています。このガイドでは、サブグリッドでできること、いくつかの使用例、この機能で解決されるデザインパターンを詳述します。
> **Warning:** この機能は Firefox 71 で使用可能になりますが、今のところ、これがサブグリッドを実装している唯一のブラウザーです。
## サブグリッドの導入
グリッドコンテナーに `display: grid` を追加すると、その直下の子だけがグリッドアイテムになり、作成したグリッド上に置くことができます。これらグリッドアイテムの子要素は通常フローで表示されます。
グリッドアイテムをグリッドコンテナーにすることにより、グリッドを「入れ子」にすることができます。しかし、これらのグリッドは互いの親グリッドに依存し、親グリッドのサイズ変更に追従しません。これでは、入れ子のグリッドアイテムをメイングリッドで整列させることが難しくなります。
`subgrid` の値を `grid-template-columns` および `grid-template-rows` の両方またはどちらかに設定すると、新しいトラックリストを作成するのではなく、入れ子のグリッドが親要素上で定義されたトラックを利用します。
例えば、`grid-template-columns: subgrid` を使用し、入れ子のグリッドが親のトラック 3 列にまたがる場合、入れ子のグリッドは、親グリッドのサイズと同じトラック 3 列分になります。その列の間隔は継承されますが、異なる {{cssxref("gap")}} 値で上書きすることもできます。線名は親からサブグリッドへ渡されますが、サブグリッドが独自の線名を定義することもできます。
## 列のサブグリッド
以下の例では、幅 `1fr` の 9 列のトラックで高さが最低 100px の 4 行のグリッドレイアウトを定義しています。
このグリッドの 2 から 7 番の列の線、2 から 4 番の行の線に `.item` を置き、これをグリッドアイテムからグリッドコンテナーにします。これをサブグリッドである列トラックに与え、通常の行を定義します。アイテムの幅が 5 列のトラックにまたがるので、サブグリッドも 5 列のトラックを持ちます。次に、このグリッド上に `.subitem` を置きます。
この例の行はサブグリッドではないため、通常の入れ子のグリッドとして振る舞います。親グリッド領域は、この入れ子のグリッドが十分入る大きさに拡張されます。
{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}
サブグリッド内の線番号は再び 1 番から始まるので注意してください。サブグリッド内の列線 1 番は、サブグリッドの最初の線です。サブグリッド化された要素は親グリッドの線番号を継承しません。これは、メイングリッド上の異なる位置に置かれるコンポーネントを安全に配置できることを意味し、このコンポーネント上の線番号が常に同じであることが分かります。
## 行のサブグリッド
次の例は、上記と同じ設定で、`grid-template-rows` の値に `subgrid` を使用し、明示的に列トラックを定義しています。このため、列トラックが通常の入れ子のグリッドとして振る舞い、行が子スパンの 2 トラックに紐づけられます。
{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}
## 列と行のサブグリッド
もちろん、以下の例のように、行と列の両方をサブグリッドとして定義できます。これは、サブグリッドが親グリッドの行と列両方のトラックの数に紐づけられることを意味します。
{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}
### サブグリッド化された範囲に暗黙のグリッドはない
アイテムを自動配置する必要があり、そのアイテムが何個になるか分からないときは、サブグリッドの作成時に、それらのアイテムを保持する追加の行が作成されないように注意してください。
次の例を見てください。これは上記の例と同様に、同じ親グリッドと子グリッドを使用していますが、サブグリッド内の 10 個のグリッドセルに 12 個のアイテムを自動配置しようとしています。このサブグリッドには行と列どちらにも追加の 2 個のアイテムを置く場所がないため、仕様で定義されている通りに、これらはグリッドの最後のトラック内に置かれることになります。
{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}
`grid-template-rows` の値を削除すると、通常の明示的なトラックが作成できるようになります。とはいえ、これらは親のトラックに沿って並ばないため、その数に応じて作成する必要があります。
{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}
## gap プロパティとサブグリッド
親グリッドに {{cssxref("gap")}}, {{cssxref("column-gap")}}, {{cssxref("row-gap")}} のいずれかが指定されている場合、これらはサブグリッドにも渡され、トラックの間隔が親と同じになります。状況によっては、サブグリッドのトラックの間隔を親と異なるものに設定したい場合があるでしょう。これは、サブグリッドのグリッドコンテナーに `gap-*` プロパティを使用することにより達成できます。
これは以下の例で確認できます。親グリッドは 20px の行間隔と列間隔を持ち、サブグリッドは `row-gap` の値に `0` を設定しています。
{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}
これを Firefox のグリッドインスペクターで調査すると、グリッドの線が gap の中央に正しく描かれていることが分るでしょう。gap の値を 0 に設定した場合、同様の動作で要素に負のマージンが適用され、gap からアイテムまでの空間が与えられます。
## 名前付きグリッド線
CSS のグリッドを利用する時、そのグリッドの線に名前を付けて、線番号ではなく、これらの名前でアイテムを配置することができます。親グリッドの線名がサブグリッドに渡されるので、それらを使用してアイテムを配置できます。以下の例では、親の線に `col-start` および `col-end` という名前を付けました。これらはサブアイテムの配置に使用されます。
{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}
また、サブグリッドにも線名を指定することができます。`subgrid` キーワードの後の線のリストに、角括弧で囲まれた線名を追加します。サブグリッドに 4 本の線がある場合、 `grid-template-columns: subgrid [line1] [line2] [line3] [line4]` という構文ですべての線に名前を付けることができます。
サブグリッドに指定された線は親で指定された任意の線に追加されるため、その線名を親とサブグリッドのどちらでも利用できます。デモンストレーションするため、以下の例で、アイテムの一つは親線を利用して配置し、もう一つはサブグリッドの線を利用しています。
{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}
## サブグリッドの利用
サブグリッド内にうまく収まらないアイテムを心配する必要なく、サブグリッドは入れ子のグリッドにとてもよく似た動作をします。ただ一つ違うところは、サブグリッドのトラックのサイズ変更が親グリッドで設定されることです。どの入れ子のグリッドでもそうであったように、サブグリッド内のコンテンツのサイズがトラックのサイズを変更することがあり、コンテンツがトラックのサイズ変更に影響することを許すメソッドが用いられることが想定されます。このような場合、例えばサイズが自動調整される行トラックは、コンテンツがメイングリッドとサブグリッド内に収まるように大きくなります。
subgrid 値は、通常の入れ子のグリッドとほとんど同じ方法で動作するため、これらを切り替えるのは簡単です。例えば、暗黙的な行のグリッドが必要になったときにすべきことは、`grid-template-rows` の `subgrid` 値を削除し、あるいは暗黙的なトラックのサイズ変更を制御するために `grid-auto-rows` に値を与えることだけです。
## 仕様書
| 仕様書 | 状態 | 備考 |
| ------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| {{SpecName("CSS Grid 2")}} | {{Spec2("CSS Grid 2")}} | [subgrids](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#subgrid) の初回定義 |
## ブラウザーの互換性
{{Compat("css.properties.grid-template-columns.subgrid")}}
## 関連情報
- Mozilla Developer YouTube チャンネル上の動画、[Laying out forms using subgrid](https://www.youtube.com/watch?v=gmQlK3kRft4) と [Don't Wait To Use Subgrid For Better Card Layouts](https://www.youtube.com/watch?v=lLnFtK1LNu4) をご覧ください。
- CSSConf.eu でのプレゼンテーション [Hello Subgrid!](https://noti.st/rachelandrew/i6gUcF/hello-subgrid)
|
