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

Question

我使用列(用于效果砌筑)，位置顺序为 - 自上而下

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>