当右侧有空间时，在砌体布局上展开列

问题描述

有这个例子 https://jsfiddle.net/20o1stn6/2/ 是否有可能如果右边有足够的空间一个接一个地显示项目而不是一个个。

我尝试更改显示值，但无法对齐完整的框。

我的布局有一个左侧边栏，当侧边栏打开时，我应该在右侧看到 3 列，当它关闭时显示 4 列具有响应宽度

我尝试过 flex

.masonry-with-columns {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 1000px;
     div {
       width: calc(100% - 42px);
       margin: 0 1rem 1rem 0;
       display: inline-block;
       flex: 1 0 auto;
       margin: 0 1rem 1rem 0;
     }
   }

并且还使用了 columns 道具

 .masonry-with-columns {
   -moz-column-count: 3;
   -webkit-column-count: 3;
   column-count: 3;
   columns: 411px;
  }

两者都有同样的问题，即使右侧有足够的空间，也会显示一个在另一个下面的项目

解决方法

具有等宽 div 的示例，如果有空间，则从 150px 增加

body {
  margin: 0;
  padding: 1rem;
}

.masonry-with-columns {
  display: flex;
  flex-wrap: wrap;
}
.masonry-with-columns div {
  flex: 1;
  min-width: 150px;
  background: #EC985A;
  color: white;
  margin: 0 1rem 1rem 0;
  display: inline-block;
  text-align: center;
  font-family: system-ui;
  font-weight: 900;
  font-size: 2rem;
}
.masonry-with-columns div:nth-child(1) {
  height: 241px;
  line-height: 241px;
}
.masonry-with-columns div:nth-child(2) {
  height: 109px;
  line-height: 109px;
}
.masonry-with-columns div:nth-child(3) {
  height: 104px;
  line-height: 104px;
}
.masonry-with-columns div:nth-child(4) {
  height: 314px;
  line-height: 314px;
}
.masonry-with-columns div:nth-child(5) {
  height: 471px;
  line-height: 471px;
}
.masonry-with-columns div:nth-child(6) {
  height: 222px;
  line-height: 222px;
}
.masonry-with-columns div:nth-child(7) {
  height: 430px;
  line-height: 430px;
}
.masonry-with-columns div:nth-child(8) {
  height: 404px;
  line-height: 404px;
}
.masonry-with-columns div:nth-child(9) {
  height: 193px;
  line-height: 193px;
}
.masonry-with-columns div:nth-child(10) {
  height: 282px;
  line-height: 282px;
}
.masonry-with-columns div:nth-child(11) {
  height: 435px;
  line-height: 435px;
}
.masonry-with-columns div:nth-child(12) {
  height: 110px;
  line-height: 110px;
}
.masonry-with-columns div:nth-child(13) {
  height: 331px;
  line-height: 331px;
}
.masonry-with-columns div:nth-child(14) {
  height: 106px;
  line-height: 106px;
}
.masonry-with-columns div:nth-child(15) {
  height: 454px;
  line-height: 454px;
}
.masonry-with-columns div:nth-child(16) {
  height: 188px;
  line-height: 188px;
}
.masonry-with-columns div:nth-child(17) {
  height: 474px;
  line-height: 474px;
}
.masonry-with-columns div:nth-child(18) {
  height: 358px;
  line-height: 358px;
}
.masonry-with-columns div:nth-child(19) {
  height: 425px;
  line-height: 425px;
}
.masonry-with-columns div:nth-child(20) {
  height: 303px;
  line-height: 303px;
}
.masonry-with-columns div:nth-child(21) {
  height: 373px;
  line-height: 373px;
}
.masonry-with-columns div:nth-child(22) {
  height: 200px;
  line-height: 200px;
}
.masonry-with-columns div:nth-child(23) {
  height: 423px;
  line-height: 423px;
}
.masonry-with-columns div:nth-child(24) {
  height: 228px;
  line-height: 228px;
}
.masonry-with-columns div:nth-child(25) {
  height: 257px;
  line-height: 257px;
}
.masonry-with-columns div:nth-child(26) {
  height: 108px;
  line-height: 108px;
}
.masonry-with-columns div:nth-child(27) {
  height: 302px;
  line-height: 302px;
}
.masonry-with-columns div:nth-child(28) {
  height: 345px;
  line-height: 345px;
}
.masonry-with-columns div:nth-child(29) {
  height: 332px;
  line-height: 332px;
}
.masonry-with-columns div:nth-child(30) {
  height: 295px;
  line-height: 295px;
}
.masonry-with-columns div:nth-child(31) {
  height: 308px;
  line-height: 308px;
}
.masonry-with-columns div:nth-child(32) {
  height: 338px;
  line-height: 338px;
}
.masonry-with-columns div:nth-child(33) {
  height: 441px;
  line-height: 441px;
}
.masonry-with-columns div:nth-child(34) {
  height: 131px;
  line-height: 131px;
}
.masonry-with-columns div:nth-child(35) {
  height: 166px;
  line-height: 166px;
}
.masonry-with-columns div:nth-child(36) {
  height: 382px;
  line-height: 382px;
}

<div class="masonry-with-columns">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
</div>