くまだどうも、くまだです。
CSSのauto-fillとauto-fitについて。
CSSのauto-fill
auto-fillは以下のように指定します。
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
gap: 20px;
}
.box {
width: 100%;
height: 200px;
background-color: red;
}See the Pen auto-fill by kuma0605 (@kuma0605) on CodePen.
上のコードでは、画面サイズを広げていったとき最小値200pxの余白が生じると、そこに空のグリッドを生成します。
検証ツールで確認すると、200px分の余白ができると空のグリッドが生成されているのが確認できます（点線で囲まれた青背景部分）。
CSSのauto-fit
auto-fitは以下のように指定します。
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
gap: 20px;
}
.box {
width: 100%;
height: 200px;
background-color: red;
}See the Pen auto-fit by kuma0605 (@kuma0605) on CodePen.
見た目上はまったく同じです。
画面サイズを広げていったとき、親要素に余白が余る場合、auto-fillのようにグリッドが生成されるのではなく余白として扱われます。
検証ツールで見ると、余った余白は常に余白として扱われているのが分かります。
ここまで読んでくださりありがとうございました。