グリッドビュー（同じ幅/異なる高さ） - 3列| CSS

Question

私はcssを使用して3列のグリッドビューを作成しようとしています。 私は次のコードで作業を2カラムシステムを持っているが、私は3列のためにそれが正しいように見えることはできません。

HTML

<div id='container'> 
    <div class='box' style="height:70px; background-color: red;">1</div> 
    <div class='box' style="height:130px; background-color: grey;">2</div> 
    <div class='box' style="height:90px;">3</div> 
    <div class='box' style="height:86px; background-color: orange;">4</div> 
    <div class='box' style="height:110px; background-color: green;">5</div> 
    <div class='box' style="height:40px;">6</div> 
</div> 

CSS

#container{background-color:#aaa;margin: 0 auto;height:500px; width: 200px;} 
.box{background-color:white; 
    border:1px solid black; 
    margin: 2%; 
    width:45%; 
    display:block; 
    float:left; 
    box-sizing: border-box; 
} 
.box:nth-child(2n + 0) { float: right; } 

ここにjsfiddle： https://jsfiddle.net/jfnvt9o3/

cssで次のように達成する方法はありますか？

Answer 1

はこのJavaScriptライブラリを試してみてください - 何の適切な（クロスブラウザ）CSS-唯一の解決策はありません。

http://masonry.desandro.com/

あなたはあまりにもCSSの列を試すことができます。

https://css-tricks.com/almanac/properties/c/columns/

Answer 2

あなたは同じ行のdivに同じ高さですか？彼らは（同じ行のdivのFO同じ）と同じ高さを持っている場合、それは次のようになります。

#container { 
 
    background-color: #aaa; 
 
    margin: 0 auto; 
 
    height: 500px; 
 
    width: 200px; 
 
} 
 
.box { 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    margin: 2%; 
 
    width: 45%; 
 
    display: block; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 
.box:nth-child(2n + 0) { 
 
    float: right; 
 
}

<div id='container'> 
 
    <div class='box' style="height:130px; background-color: red;">1</div> 
 
    <div class='box' style="height:130px; background-color: grey;">2</div> 
 
    <div class='box' style="height:90px;">3</div> 
 
    <div class='box' style="height:90px; background-color: orange;">4</div> 
 
    <div class='box' style="height:110px; background-color: green;">5</div> 
 
    <div class='box' style="height:110px;">6</div> 
 
</div>

Answer 3

を、あなたのHTMLを並べ替えることができた場合は、複数のカラムを用いた解決策があります。他のケースでは、私はJavaScriptなしではできないと思います。

#container { 
 
    background-color: #aaa; 
 
    margin: 0 auto; 
 
    height: 500px; 
 
    width: 500px; 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    -moz-column-gap: 10px; 
 
    -webkit-column-gap: 10px; 
 
    column-gap: 10px; 
 
} 
 

 
.box { 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    width: 100%; 
 
    margin: 10px 0; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
}

<div id='container'> 
 
    <div class='box' style="height:70px; background-color: red;">1</div> 
 
    <div class='box' style="height:86px; background-color: orange;">4</div> 
 
    <div class='box' style="height:130px; background-color: grey;">2</div> 
 
    <div class='box' style="height:110px; background-color: green;">5</div> 
 
    <div class='box' style="height:90px;">3</div> 
 
    <div class='box' style="height:40px;">6</div> 
 
</div>

Answer 4

も（あなたにもflexboxesせずにそれを実装することができますが）flexboxesを使用しての方法がありますが、あなたはあなたのHTML少し微調整する必要があります。DEMO

<div id='container'> 
    <div class="column"> 
    <div class='box' style="height:70px; background-color: red;">1</div> 
    <div class='box' style="height:86px; background-color: orange;">4</div> 
    </div> 
    <div class="column"> 
    <div class='box' style="height:130px; background-color: grey;">2</div> 
    <div class='box' style="height:110px; background-color: green;">5</div> 
    </div> 
    <div class="column"> 
    <div class='box' style="height:90px;">3</div> 
    <div class='box' style="height:40px;">6</div> 
    </div> 
</div> 

を

CSS

01 【同位体または石積みとMagentoのソート製品リスト]の

#container{background-color:#aaa;margin: 0 auto;height:500px; width: 200px; display:flex;} 
.box{background-color:white; 
    border:1px solid black; 
    margin: 2%; 
    width:94%; 
    display:block; 
    box-sizing: border-box; 
} 
.column{ 
    display:flex; 
    flex-direction:column; 
    width:33%; 
}