如何在 Masonry js 中将项目居中？

Question

我正在尝试使用 Masonry 创建一个以这样的项目为中心的网格，

我尝试了基本设置和使用弹性框居中的项目，但没有运气。

Masonry 是否可以做到这一点，否则必须尝试其他方法？

谢谢

Answer 1

我以前用过类似的东西，希望对你有用。

.masonry-with-columns {
  columns: 6 200px;
  column-gap: 1rem;
}
.masonry-with-columns div {
  width: 150px;
  background: #EC985A;
  color: white;
  margin: 0 1rem 1rem 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: system-ui;
  font-weight: 900;
  font-size: 2rem;
}
.masonry-with-columns div:nth-child(1) {
  height: 203px;
  line-height: 203px;
}
.masonry-with-columns div:nth-child(2) {
  height: 355px;
  line-height: 355px;
}
.masonry-with-columns div:nth-child(3) {
  height: 121px;
  line-height: 121px;
}
.masonry-with-columns div:nth-child(4) {
  height: 206px;
  line-height: 206px;
}
.masonry-with-columns div:nth-child(5) {
  height: 345px;
  line-height: 345px;
}
.masonry-with-columns div:nth-child(6) {
  height: 183px;
  line-height: 183px;
}
.masonry-with-columns div:nth-child(7) {
  height: 195px;
  line-height: 195px;
}
.masonry-with-columns div:nth-child(8) {
  height: 228px;
  line-height: 228px;
}
.masonry-with-columns div:nth-child(9) {
  height: 493px;
  line-height: 493px;
}
.masonry-with-columns div:nth-child(10) {
  height: 226px;
  line-height: 226px;
}
.masonry-with-columns div:nth-child(11) {
  height: 176px;
  line-height: 176px;
}
.masonry-with-columns div:nth-child(12) {
  height: 179px;
  line-height: 179px;
}
.masonry-with-columns div:nth-child(13) {
  height: 230px;
  line-height: 230px;
}
.masonry-with-columns div:nth-child(14) {
  height: 231px;
  line-height: 231px;
}
.masonry-with-columns div:nth-child(15) {
  height: 373px;
  line-height: 373px;
}
.masonry-with-columns div:nth-child(16) {
  height: 265px;
  line-height: 265px;
}
.masonry-with-columns div:nth-child(17) {
  height: 284px;
  line-height: 284px;
}
.masonry-with-columns div:nth-child(18) {
  height: 363px;
  line-height: 363px;
}
.masonry-with-columns div:nth-child(19) {
  height: 208px;
  line-height: 208px;
}
.masonry-with-columns div:nth-child(20) {
  height: 379px;
  line-height: 379px;
}
.masonry-with-columns div:nth-child(21) {
  height: 413px;
  line-height: 413px;
}
.masonry-with-columns div:nth-child(22) {
  height: 415px;
  line-height: 415px;
}
.masonry-with-columns div:nth-child(23) {
  height: 284px;
  line-height: 284px;
}
.masonry-with-columns div:nth-child(24) {
  height: 356px;
  line-height: 356px;
}
.masonry-with-columns div:nth-child(25) {
  height: 193px;
  line-height: 193px;
}
.masonry-with-columns div:nth-child(26) {
  height: 329px;
  line-height: 329px;
}
.masonry-with-columns div:nth-child(27) {
  height: 370px;
  line-height: 370px;
}
.masonry-with-columns div:nth-child(28) {
  height: 364px;
  line-height: 364px;
}
.masonry-with-columns div:nth-child(29) {
  height: 347px;
  line-height: 347px;
}
.masonry-with-columns div:nth-child(30) {
  height: 273px;
  line-height: 273px;
}
.masonry-with-columns div:nth-child(31) {
  height: 300px;
  line-height: 300px;
}
.masonry-with-columns div:nth-child(32) {
  height: 104px;
  line-height: 104px;
}
.masonry-with-columns div:nth-child(33) {
  height: 207px;
  line-height: 207px;
}
.masonry-with-columns div:nth-child(34) {
  height: 149px;
  line-height: 149px;
}
.masonry-with-columns div:nth-child(35) {
  height: 487px;
  line-height: 487px;
}
.masonry-with-columns div:nth-child(36) {
  height: 458px;
  line-height: 458px;
}

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