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)が最初の段にしか適用されていない理由は何ですか？
0 コメント