Wie bekomme ich Gegenstände, um die Breite zu strecken?

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>

Wie kann ich die roten item Boxen ein wenig strecken, so dass sie die gesamte Breite der grünen container Box füllen?

Sie sollten alle die gleiche Breite haben, und ein bisschen größer als 100px.

Die letzte Zeile sollte linksbündig sein wie jetzt.

Answer 1

Sie brauchen nur eine Fraktion Einheit zur grid-template-columns Regel hinzuzufügen.

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

Diese Regel erstellt so viele Spalten, wie in den Container passen.

Die minimale Breite jeder Spalte beträgt 100px.

Die maximale Breite ist 1fr, was bedeutet, dass die Spalte freien Speicherplatz in der Zeile belegt.

Jetzt wird der gesamte horizontale Raum im Container verwendet.

.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>

Diese Stellen erklären die Lösung oben näher:

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