Q&A
ご回答ありがとうございます。
pタグの仕様だったのですね。
何かの拍子に行数が増えたときに数え直したり書き直したりが面倒なのでauto-fitにしていました。
html&css
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 p { 7 background-color: aliceblue; 8 } 9 div { 10 display: grid; 11 grid-template-columns: repeat(auto-fit, 100px); 12 grid-template-rows: repeat(auto-fit, 100px); 13 width: 400px; 14 } 15 </style> 16 </head> 17 <title> 18 </title> 19 <body> 20 <div> 21 <p>ピータグ</p> 22 <p>ピータグ</p> 23 <p>ピータグ</p> 24 <p>ピータグ</p> 25 <p>ピータグ</p> 26 <p>ピータグ</p> 27 <p>ピータグ</p> 28 <p>ピータグ</p> 29 <p>ピータグ</p> 30 <p>ピータグ</p> 31 <p>ピータグ</p> 32 <p>ピータグ</p> 33 <p>ピータグ</p> 34 <p>ピータグ</p> 35 </div> 36 37 </body> 38</html>
質問① gridレイアウトを使うと中身の要素の上下へ勝手に追加される余白の正体は何ですか？
質問② grid-template-rows: repeat(auto-fit, 100px)が最初の段にしか適用されていない理由は何ですか？
回答2件
0
ベストアンサー
① （pタグのデフォルトCSSによる）マージンです。
② height が指定されていないため、高さが成り行きとなっているので高さが足りないです。height: 400pxとしてみるとわかるかと思います。あふれたセルは、grid-auto-rowsの設定に従って行が自動追加されます。これもgrid-auto-rows: 200pxなどとしてみればわかるかと思います。
投稿2024/06/14 05:31
編集2024/06/14 05:33
総合スコア37444
0
質問１、Pタグは上下にデフォルトでmarginが付加されています
質問2、rowsにrepeat(()でauto-fitを設定する意図がわかりません。
繰り返したい行数を指定すればいいだけでは？
css
1 grid-template-rows: repeat(4,100px);
投稿2024/06/14 05:33
総合スコア117745
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/06/14 05:46
2024/06/14 06:03