回答編集履歴
4
サンプルを追加
answer
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
言葉にするとわかりにくいかもしれませんが、がんばって説明してみます。
|
|
2
2
|
|
|
3
|
+
一応、サンプルを置いておきます。
|
|
4
|
+
https://jsfiddle.net/Lhankor_Mhy/rsfuv7cy/
|
|
5
|
+
|
|
3
6
|
---
|
|
4
7
|
|
|
5
8
|
前提として、親グリッドについては、以下の初期値が使用されています。
|
3
表現の修正
answer
CHANGED
|
@@ -11,14 +11,16 @@
|
|
|
11
11
|
---
|
|
12
12
|
|
|
13
13
|
まず、サブグリッドがない状態の説明です。
|
|
14
|
+
|
|
14
|
-
|
|
15
|
+
セルの指定として`grid-row: span 3;`が指定されているため、行が3つ不足します。
|
|
15
16
|
前述の通り、`grid-auto-rows: auto;`となっているため、3つの行が高さ自動で追加されます。
|
|
16
17
|
この場合、全てのセルが`grid-row: span 3;`の指定がされているため、`.item`の高さはレイアウトに関与しますが、それぞれの内部コンテンツである`p`要素の高さはレイアウトに関与しません。したがって、必要な高さが各行等分に分配されます。
|
|
17
18
|
|
|
18
19
|
---
|
|
19
20
|
|
|
20
21
|
次に、サブグリッドを指定した状態の説明です。
|
|
22
|
+
|
|
21
|
-
同様に行が3つ不足し、3つの行が高さ自動で追加されます。
|
|
23
|
+
サブグリッドなしと同様に行が3つ不足し、3つの行が高さ自動で追加されます。
|
|
22
24
|
この場合、セルがサブグリッドを持っているため、子グリッドのそれぞれのコンテンツである`p`要素の高さがレイアウトに関与します。そのため、コンテンツの高さに合わせて行の高さが調整される、ということです。
|
|
23
25
|
|
|
24
26
|
---
|
2
追記
answer
CHANGED
|
@@ -20,3 +20,12 @@
|
|
|
20
20
|
次に、サブグリッドを指定した状態の説明です。
|
|
21
21
|
同様に行が3つ不足し、3つの行が高さ自動で追加されます。
|
|
22
22
|
この場合、セルがサブグリッドを持っているため、子グリッドのそれぞれのコンテンツである`p`要素の高さがレイアウトに関与します。そのため、コンテンツの高さに合わせて行の高さが調整される、ということです。
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
以上のことをわかりやすく確認するには、親グリッドに`grid-auto-rows: 10px;`などと指定してみることです。
|
|
27
|
+
|
|
28
|
+
誤解を恐れずに言えば、「subgridは純粋に親グリッドの構造を継承させる」のですが、`auto`などのサイズの決定が必要になる値の場合には、それを再計算する、ということです。というか、そもそもそれがサブグリッドの目的であったりします。
|
|
29
|
+
|
|
30
|
+
> サブグリッド内のコンテンツのサイズがトラックのサイズを変更することがあり、コンテンツがトラックのサイズ変更に影響することを許すメソッドが用いられることが想定されます。このような場合、例えばサイズが自動調整される行トラックは、コンテンツがメイングリッドとサブグリッド内に収まるように大きくなります。
|
|
31
|
+
> [サブグリッドの利用｜サブグリッド - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Subgrid#%E3%82%B5%E3%83%96%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%81%AE%E5%88%A9%E7%94%A8)
|
1
表現の変更
answer
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
前提として、以下の初期値が使用されています。
|
|
5
|
+
前提として、親グリッドについては、以下の初期値が使用されています。
|
|
6
6
|
|
|
7
7
|
- `grid-template-rows: none`
|
|
8
8
|
- `grid-auto-flow: row;`
|
|
@@ -19,4 +19,4 @@
|
|
|
19
19
|
|
|
20
20
|
次に、サブグリッドを指定した状態の説明です。
|
|
21
21
|
同様に行が3つ不足し、3つの行が高さ自動で追加されます。
|
|
22
|
-
この場合、セルがサブグリッドを持っているため、それぞれのコンテンツである`p`要素の高さがレイアウトに関与します。そのため、コンテンツの高さに合わせて行の高さが調整される、ということです。
|
|
22
|
+
この場合、セルがサブグリッドを持っているため、子グリッドのそれぞれのコンテンツである`p`要素の高さがレイアウトに関与します。そのため、コンテンツの高さに合わせて行の高さが調整される、ということです。
|