砌体效应 - 如何改变方块的顺序？

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>

但我希望顺序是- 左右

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/

砌体效应 - 如何改变方块的顺序？

Masonry effect - How can I change the order of the blocks?

html

css

css-multicolumn-layout