Verteilen DIV Kinder gleichmäßig über die gesamte Höhe und Breite des Behälters

Question

Ich habe ein leeres div und ich erstelle andere divs darin mit Javascript. Ich habe mein CSS so eingerichtet, dass es ein Raster erstellt. Meine Frage ist: Wie kann ich die divs dynamisch so ändern, dass sie ihren Container gleichmäßig füllen?

Ich habe versucht, es besser mit einer Zeichnung zu veranschaulichen, aber meine Zeichenkünste sind nicht so gut. Hoffentlich wirst du verstehen, was ich will.

Das schwarze Quadrat ist die Mutter div und die roten Quadrate sind die Kinder. Wenn ich ein Div erstellen, sollte es das Eltern-Div (mit einem kleinen Rand) füllen.

Mit zwei divs wird es die Eltern in zwei Hälften teilen.

Mit 3 verhält es sich wie in der oberen rechten Ecke des Bildes, und so weiter für die anderen.

Wie konnte ich dies mit CSS erreichen?

Einige weitere Informationen:

Dies ist ein Spiel, das ich für die Schule zu machen. Dies ist eine vorherige Version, aber Sie haben die Idee, Quadrate in einem Div zu haben. Jetzt ist die nächste Aufgabe, den Benutzer wählen zu lassen, wie viele Quadrate sie spielen möchten. Aber das muss dynamisch sein und sie müssen Nummern wie 5 oder 8 wählen können. Nicht nur 4, 9, 16, 25 usw., das ist zu einfach.

https://luukwuijster.io/school/csp/kleurenspel/

Answer 1

kann diese Art von Layout mit CSS Flexbox erreicht werden.

Verwandeln Sie zuerst Ihr Verpackungselement in eine Flexbox, indem Sie display:flex hinzufügen. Als nächstes fügen Sie flex:1 1 auto zu Ihren Boxen hinzu, damit sie wachsen und schrumpfen können, um den Raum zu füllen.

Um zu verhindern, dass Ihre Boxen von flexbox in eine Zeile gequetscht werden, legen Sie einen Wert von min-width fest. Ich habe min-width:30% verwendet, aber diese Nummer kann geändert werden, um Ihren Bedürfnissen zu entsprechen. 30% bedeutet, dass die maximale Anzahl von Kästchen in einer Reihe zu jeder Zeit 3 ​​ist (da sie gerade unter 1/3 oder 33% der Behälterbreite liegt).

Versuchen Sie, Boxen aus dem folgenden Beispielcode hinzuzufügen oder zu entfernen.

#wrapper { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    width:400px; 
 
    height:400px; 
 
} 
 

 
.box { 
 
    background-color:white; 
 
    border:1px solid black; 
 
    min-width:30%; 
 
    flex:1 1 auto; 
 
    }

<div id='wrapper'> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
</div>