グリッドボックスdiv間の移動

Question

私はcssを使ってミニグリッドポストレイアウトを作ろうとしています。しかし、私はdivに問題があります。私はこれで試してみたdemoページ。そして私は、私が望む形を得られない。私は、CSS内のスクリーンショットを取得できますか

.div { 
    position:relative; 
    float:left; 
    width:100%; 
    border-radius:5px; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    background-color:#1d1f20; 
} 

.div:nth-child(1){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(2){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(3){ 
    width:400px; 
    padding-top:400px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(4){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(5){ 
    width:365px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 

.div:nth-child(6){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 

はHTML

<div class="container"> 
    <div class="div"></div> 
    <div class="div"></div> 
    <div class="div"></div> 
    <div class="div"></div> 
    <div class="div"></div> 
    <div class="div"></div> 
</div> 

：私は、私は、このCSSコードのようにそれを試してみてくださいスクリーンショット

ようにそれを作りたいですか？誰でもここで私を助けることができますか？

策1：新しいcolumn-count

使用

Answer 1

あなたはソリューションの多くを使用することができます。 DEMO。

Checkブラウザの互換性。

対処方法2：

使用display:inline-block;。 DEMO。

Checkブラウザとの互換性。

ソリューション3：flexboxを使用して

。 DEMO。

Checkブラウザの互換性。

策4：

使用jQueryのは、私はあなたに（通常のギャラリーのために使用される）Masonryプラグインを示唆しています。 DEMO。これはあなたが探しているものであれば

Answer 2

私はわからない、私はここのリンクであることをachiveためにあなたのhtmlを再構築する必要がありました：http://codepen.io/saa93/pen/ENjNgy

<style> 
body,html { 
    padding:0px; 
    margin:0px; 
    width:100%; 
    height:100%; 
} 
.container { 
    position:relative; 
    width:100%; 
    max-width:1010px; 
    min-height:400px; 
    margin:0px auto; 
} 

.div { 
    position:relative; 
    float:left; 
    width:100%; 
    border-radius:5px; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    background-color:#1d1f20; 
} 

.div:nth-child(1) { 
    background: transparent none repeat scroll 0 0; 
    float: left; 
    width: 370px; 
} 


.div:nth-child(3){ 
    width:180px; 
    float:left; 
} 
.div:nth-child(1) > .div:nth-child(1){ 
    background-color:#1d1f20; 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(1) > .div:nth-child(2){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(1) > .div:nth-child(3) { 
    margin-bottom: 5px; 
    margin-right: 5px; 
    padding-top: 185px; 
    width: 365px; 
} 

.div:nth-child(2) { 
    margin-bottom: 5px; 
    margin-right: 5px; 
    padding-top: 370px; 
    width: 400px; 
} 
.div:nth-child(3) > .div:nth-child(1){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 

.div:nth-child(3) { 
    float: left; 
    width: 180px; 
} 
.div:nth-child(3) > .div:nth-child(2){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 

</style> 
<div class="container"> 
    <div class="div"> 
     <div class="div"></div> 
     <div class="div"></div> 
     <div class="div"></div> 
    </div> 
    <div class="div"></div> 


    <div class="div"> 
    <div class="div"></div> 
    <div class="div"></div> 
    </div> 
</div> 

私はこれが役に立てば幸い:)のみCSS