teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップHTML5に関する質問グリッドレイアウトで余分な余白ができてしまう

編集履歴

回答編集履歴

4

auto-fill じゃなくて auto で良かった。 （利いていなかったため、autoに修正）

2024/11/15 00:37

投稿

juner
juner

スコア437

test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  ```css
18
18
  .grid__wrapper {
19
- grid-template-rows: repeat(auto-fill, 3);
19
+ grid-template-rows: repeat(3, auto);
20
20
  }
21
21
  .grid__img {
22
22
  grid-row: span 3;
@@ -25,6 +25,5 @@
25
25
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-11-12/c2c2b2cc-152e-4410-a1af-dbeede9a918d.png)
26
26
 
27
27
  ### 参考
28
- - [動作確認用 playground](https://livecodes.io/?x=id/e7takhx48rh)
28
+ - [動作確認用 playground](https://livecodes.io/?x=id/82ftyz9eukz)
29
- - [auto-fill - repeat() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/repeat#auto-fill)
30
29
 

3

div → p

2024/11/13 03:10

投稿

juner
juner

スコア437

test CHANGED
@@ -12,7 +12,7 @@
12
12
  - [固定のトラックサイズと可変のトラックサイズ - グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#%E5%9B%BA%E5%AE%9A%E3%81%AE%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%A8%E5%8F%AF%E5%A4%89%E3%81%AE%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B5%E3%82%A4%E3%82%BA)
13
13
 
14
14
  ### 追伸
15
- もしも、div も余白空けたいならこうとか？
15
+ もしも、p も余白空けたいならこうとか？
16
16
 
17
17
  ```css
18
18
  .grid__wrapper {

2

画像をつける、あと playground 側のタイトル修正

2024/11/12 06:27

投稿

juner
juner

スコア437

test CHANGED
@@ -5,9 +5,10 @@
5
5
  grid-template-rows: min-content 1fr;
6
6
  }
7
7
  ```
8
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-11-12/44f90c48-bf3c-463c-a383-e3b21ef7d497.png)
8
9
 
9
10
  ### 参考
10
- - [動作確認用 playground](https://livecodes.io/?x=id/cm2jiyftdg4)
11
+ - [動作確認用 playground](https://livecodes.io/?x=id/jk3kizwrvh8)
11
12
  - [固定のトラックサイズと可変のトラックサイズ - グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#%E5%9B%BA%E5%AE%9A%E3%81%AE%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%A8%E5%8F%AF%E5%A4%89%E3%81%AE%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B5%E3%82%A4%E3%82%BA)
12
13
 
13
14
  ### 追伸
@@ -21,8 +22,9 @@
21
22
  grid-row: span 3;
22
23
  }
23
24
  ```
25
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-11-12/c2c2b2cc-152e-4410-a1af-dbeede9a918d.png)
24
26
 
25
27
  ### 参考
26
- - [動作確認用 playground](https://livecodes.io/?x=id/iteif22f4jr)
28
+ - [動作確認用 playground](https://livecodes.io/?x=id/e7takhx48rh)
27
29
  - [auto-fill - repeat() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/repeat#auto-fill)
28
30
 

1

auto-fill に変更 あと参考リンクの追加

2024/11/12 02:43

投稿

juner
juner

スコア437

test CHANGED
@@ -8,13 +8,14 @@
8
8
 
9
9
  ### 参考
10
10
  - [動作確認用 playground](https://livecodes.io/?x=id/cm2jiyftdg4)
11
+ - [固定のトラックサイズと可変のトラックサイズ - グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#%E5%9B%BA%E5%AE%9A%E3%81%AE%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%A8%E5%8F%AF%E5%A4%89%E3%81%AE%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B5%E3%82%A4%E3%82%BA)
11
12
 
12
13
  ### 追伸
13
14
  もしも、div も余白空けたいならこうとか？
14
15
 
15
16
  ```css
16
17
  .grid__wrapper {
17
- grid-template-rows: min-content min-content 1fr;
18
+ grid-template-rows: repeat(auto-fill, 3);
18
19
  }
19
20
  .grid__img {
20
21
  grid-row: span 3;
@@ -22,5 +23,6 @@
22
23
  ```
23
24
 
24
25
  ### 参考
25
- - [動作確認用 playground](https://livecodes.io/?x=id/grirrzud5uk)
26
+ - [動作確認用 playground](https://livecodes.io/?x=id/iteif22f4jr)
27
+ - [auto-fill - repeat() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/repeat#auto-fill)
26
28