벽돌 효과 - 블록의 순서를 어떻게 바꿀 수 있습니까?

Question

내가 사용하는 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/