Wie div Grid in Eltern enthalten

Question

Ich versuche, ein horizontales Raster für ein Portfolio zu erstellen.

So ist es ein Gitterelement von oben nach unten stapeln, und wenn es drei Elementen erreicht, geht zurück an die Spitze eine neue Spalte zu starten.

Gibt es eine Möglichkeit, die Quadrate im Container hinzuzufügen, und wenn die Quadrate überlaufen, um sie wieder zu stapeln?

Ich bin hier stecken>test

Answer 1

ich das Containerelement flex-flow:column wrap; eine Flex-Box mit der Eigenschaft machen würde.

#container { 
 
    max-height: 700px; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
} 
 
.square { 
 
    text-align: center; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
    border: solid 1px white; 
 
}

<div id="container" class="clearfix"> 
 
    <div class="square"> 
 
    <p>1</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>2</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>3</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>4</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>5</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>6</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>7</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>8</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>9</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>10</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>11</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>12</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>13</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>14</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>15</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>16</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>17</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>18</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>19</p> 
 
    </div> 
 
    <div class="square"> 
 
    <p>20</p> 
 
    </div> 
 
</div>

Answer 2

Als @Woswsk, i für flex gehen würde, aber Inline-flex wäre meine Wahl Spalten zu halten gegen jeden anderen:

Ich würde auch eine Pseudo verwenden zu füllen jede Lücke innerhalb des letzten col, um bg-Farbe nachzuahmen.

Wenn Sie bg-color benötigen, um die gesamte Breite zu füllen, benötigen Sie einen zusätzlichen Wrapper, um es anzuzeigen. Snippet unten verwendet Körper, um die Verwendung von Extra-Wrapper zu zeigen. In diesem Fall hat die Pseudo keinen Zweck mehr ..

$(function() { 
 

 
    for (var i = 0; i < 20; i++) { 
 
    $("#container").append("<div class='square'><p>" + (i + 1) + "</p></div>") 
 
    } 
 

 
});

#container { 
 
    max-height: 600px; 
 
    /* test also 800 & 1300px to see pseudo behavior*/ 
 
    display: inline-flex; 
 
    flex-flow: column wrap; 
 
    background: blue; 
 
} 
 
#container:after { 
 
    content: ''; 
 
    flex: 1; 
 
    background: blue; 
 
} 
 
.square { 
 
    text-align: center; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
    border: solid 1px white; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
/* body used as extra wrapper for demo show */ 
 

 
html { 
 
    background: white; 
 
} 
 
body { 
 
    background: lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container" class="clearfix"></div>