3-a-rowグリッドの浮動小数点div、トップオフセットの中段

Question

イメージごとにどのようにこれを達成できますか？

あなたが見ることができるように、私は同じ幅のブロックが残っ浮かべていたが、私は真ん中の列は左と右の行に比べてオフセットのビットを持っていると思います。

平易なCSS、フレックスボックスでも可能でしょうか？または私は石積みのような何かを使わなければならないのですか？

私は真ん中の列内のすべてのブロックが、このdoesntの仕事に上マージンを適用してみました：あなたはFlexboxの代わりにフロートを使用することができます

.block { 
background-color:red; 
height:200px; 
width:33.333%; 
border:1px solid black; 
float:left; 
box-sizing: border-box; 
} 

.block:nth-child(3n+2) { 
margin-top:10px; 
background:blue; 
color:white; 
} 

https://jsfiddle.net/oaLh13dL/2/

Answer 1

。

.block_wrap { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.block { 
 
    background-color: red; 
 
    height: 200px; 
 
    flex: 0 0 calc(33.333% - 20px); 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
    margin: 0 10px; 
 
} 
 
.block:nth-child(3n+2) { 
 
    margin-top: 10px; 
 
    background: blue; 
 
    color: white; 
 
}

<div class="block_wrap"> 
 
    <div class="block">1</div> 
 
    <div class="block">2</div> 
 
    <div class="block">3</div> 
 
    <div class="block">4</div> 
 
    <div class="block">5</div> 
 
    <div class="block">6</div> 
 
    <div class="block">7</div> 
 
    <div class="block">8</div> 
 
</div>