石積み効果 - ブロックの順序を変更するにはどうしたらいいですか？

Question

Iが位置された順で、（エフェクト石工用）columnsを使用 - トップダウン

1 3 5 
2 4 6 

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.columns { 
 
    columns: 3; 
 
} 
 

 
.columns-item { 
 
    background: #ccc; 
 
    width: 100%; 
 
    margin: 0 0 10px; 
 
    break-inside: avoid; 
 
    page-break-inside: avoid; 
 
} 
 

 
.columns-item:nth-of-type(2n + 3) { 
 
    height: 75px; 
 
}

<div class="columns"> 
 
    <div class="columns-item"> 
 
    1 
 
    </div> 
 
    <div class="columns-item"> 
 
    2 
 
    </div> 
 
    <div class="columns-item"> 
 
    3 
 
    </div> 
 
    <div class="columns-item"> 
 
    4 
 
    </div> 
 
    <div class="columns-item"> 
 
    5 
 
    </div> 
 
    <div class="columns-item"> 
 
    6 
 
    </div> 
 
    <div class="columns-item"> 
 
    7 
 
    </div> 
 
    <div class="columns-item"> 
 
    8 
 
    </div> 
 
</div>

しかし、私は左BE-ための希望右

1 2 3 
4 5 6 

Answer 1

あなたはスタイルの下に試してみてくださいCSSグリッドに

.columns { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
    grid-auto-rows: minmax(10px, 32.5px); 
 
    grid-auto-flow: dense; 
 
    grid-gap: 10px; 
 
} 
 

 
.columns-item { 
 
    background: #ccc; 
 
} 
 

 
.columns-item:nth-of-type(2n+3) { 
 
    background: red; 
 
    grid-row-end: span 2 
 
} 
 

 
.columns-item:nth-of-type(6n+6) { 
 
    grid-column: 3 
 
} 
 

 
.columns-item:nth-of-type(6n+5) { 
 
    grid-column: 2 
 
}

<div class="columns"> 
 
    <div class="columns-item"> 
 
    1 
 
    </div> 
 
    <div class="columns-item"> 
 
    2 
 
    </div> 
 
    <div class="columns-item"> 
 
    3 
 
    </div> 
 
    <div class="columns-item"> 
 
    4 
 
    </div> 
 
    <div class="columns-item"> 
 
    5 
 
    </div> 
 
    <div class="columns-item"> 
 
    6 
 
    </div> 
 
    <div class="columns-item"> 
 
    7 
 
    </div> 
 
    <div class="columns-item"> 
 
    8 
 
    </div> 
 
    <div class="columns-item"> 
 
    9 
 
    </div> 
 
    <div class="columns-item"> 
 
    10 
 
    </div> 
 
    <div class="columns-item"> 
 
    11 
 
    </div> 
 
    <div class="columns-item"> 
 
    12 
 
    </div> 
 
    <div class="columns-item"> 
 
    13 
 
    </div> 
 
    <div class="columns-item"> 
 
    14 
 
    </div> 
 
    <div class="columns-item"> 
 
    15 
 
    </div> 
 
</div>

Answer 2

を使用してこの効果を行うことができます。

* { 
    box-sizing: border-box; 
} 

.columns { 
    -moz-column-width: 6em; 
-webkit-column-width: 6em; 
-moz-column-gap: 1em; 
-webkit-column-gap: 1em; 
} 

.columns-item { 
    display: inline-block; 
margin: 0.25rem; 
padding: 1rem; 
width: 100%; 
background: #efefef; 
} 

チェック出力：https://jsfiddle.net/stalinrajindian/mqL83eq9/