幅を埋めるためにアイテムを伸ばす方法を教えてください。彼らは緑<code>container</code>ボックスの幅全体を埋めるように、私は赤<code>item</code>ボックスを少し伸ばすことができますどのように

Question

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fill, 100px); 
 
    grid-gap: 3px; 
 
    border: 1px solid green; 
 
} 
 

 
.item { 
 
    border: 1px solid red; 
 
    height: 50px; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

？

これらはすべて同じ幅で、100pxより少し大きいはずです。

最後の行は現在のように左揃えにする必要があります。

Answer 1

小数単位をgrid-template-columnsのルールに追加するだけです。

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 

このルールは、コンテナに収まる数の列を作成します。

各列の最小幅は100ピクセルです。

最大幅は1frです。つまり、列の空き領域はすべて消費されます。

今、コンテナ内のすべての水平スペースが使用されています。

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
 
    grid-auto-rows: 50px; 
 
    grid-gap: 3px; 
 
    border: 1px solid green; 
 
} 
 

 
.item { 
 
    border: 1px solid red; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

これらの記事は、より詳細に上記溶液を説明します。

• Equal width flex items even after they wrap
• The difference between percentage and fr units in CSS Grid Layout