Html 砌体布局：防止div破裂或被切割

我的代码如下：

<div className="gridlist">
      <div className="card">
        {shops.map((shop) => (
          <MediaCard
            card={shop}
            bname={shop.bname}
            description={shop.description}
          />
        ))}
      </div>
</div>

问题是：

---

正如你所看到的，一个盒子正在被切断。那么我该如何解决这个问题呢？

过了一段时间，我终于找到了解决办法。我将我的

.gridlist

类名样式更改为：

.gridlist {
  width: 1500px;
  margin: 20px auto;
  columns: 4;
  column-gap: 40px;
}

我还将

.card

类名样式更改为：

.card {
  width: 100%;
  margin: 0 0 20px;
  padding: 10px;
  overflow: hidden;
  margin-bottom: 30px;
}

对于我的MediaCard组件，我添加了一个类名

.MediaCard

。然后我在CSS中添加了以下内容：

.MediaCard {
  max-width: 100%;
  margin-bottom: 30px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

最后，我添加了一些响应性样式：

@media (max-width: 1650px) {
  .gridlist {
    columns: 3;
    width: calc(100% - 40px);
    box-sizing: border-box;
    padding: 20px 20px 20px 0;
  }
}
@media (max-width: 768px) {
  .gridlist {
    columns: 2;
  }
}
@media (max-width: 480px) {
  .gridlist {
    columns: 1;
  }
}

---

然而，我仍然不知道我以前的代码有什么问题。如果有人能告诉我，谢谢

不是react问题我正在删除标记，还尝试添加一个说明该问题的工作代码段，以便人们能够方便地帮助您。我认为这会有所帮助，因为它看起来像columnbreak问题：@Rmaxx，谢谢，但我尝试了这种方法，它只会使每个块相互重叠。@Rmaxx，我换了一些其他的款式，然后试了一下，效果很好，谢谢！

@media (max-width: 1650px) {
  .gridlist {
    columns: 3;
    width: calc(100% - 40px);
    box-sizing: border-box;
    padding: 20px 20px 20px 0;
  }
}
@media (max-width: 768px) {
  .gridlist {
    columns: 2;
  }
}
@media (max-width: 480px) {
  .gridlist {
    columns: 1;
  }
}