CSS flexbox/jquery: Automatische Rinnengröße

Question

Ich versuche eine Responsive Grid-Liste zu erstellen. Die Elemente haben eine feste Höhe (300px) und eine Breite (120px). Der Abstand zwischen den Elementen sollte automatisch sein, aber mindestens 20 Pixel groß sein.

Dies ist meine aktuelle CSS:

.folder-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    height: 100%; 
    width: 100%; 
} 

.folder-list li { 
    display: block; 
    width: 300px; 
    height: 120px; 
    background: rgba(255, 255, 255, 0.7); 
    flex-shrink: 0; 
} 

ich dieses Ergebnis bekam:

Result

Aber es sollte wie folgt aussieht:

It should looks like this

Gibt es eine Weg mit CSS und jQuery zu machen es echt?

Answer 1

Ich bin nicht sicher, wie Sie that bekam, aber wenn ich 3 kleine CSS-Eigenschaften hinzugefügt (flex-wrap, justify-content und margin), ich habe this. Ist das wonach Sie suchen?