Masonry Layout：防止div破裂或被切割

Question

我的反应代码如下：

<div className="gridlist">

      <div className="card">

        {shops.map((shop) => (

          <MediaCard

            card={shop}

            bname={shop.bname}

            description={shop.description}

          />

        ))}

      </div>

</div>

{shops.map((shop) => ( 部分只是从我制作的数据库中获取信息，我想以 CSS 砖石格式显示该信息。 MediaCard组件只是我做的一个组件，保存了一些信息，比如标题、描述、图片等。

我的CSS代码：

/* The Masonry Container */

.gridlist {

  margin: 1.5em auto;

  max-width: 768px;

  column-gap: 1.5em;

  row-gap: 1.5em;

}

/* The Masonry Brick */

.card {

  padding: 1em;

  margin: 0 0 1.5em;

}

/* Masonry on large screens */

@media only screen and (min-width: 1024px) {

  .gridlist {

    column-count: 2;

  }

}

/* Masonry on medium-sized screens */

@media only screen and (max-width: 1023px) and (min-width: 768px) {

  .gridlist {

    column-count: 2;

  }

}

/* Masonry on small screens */

@media only screen and (max-width: 767px) and (min-width: 540px) {

  .gridlist {

    column-count: 1;

  }

}

问题是这样的：

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

Answer 1

过了一段时间我终于找到了解决方案。我将 .gridlist className 样式更改为：.gridlist {&nbsp; width: 1500px;&nbsp; margin: 20px auto;&nbsp; columns: 4;&nbsp; column-gap: 40px;}我还将 .card className 样式更改为：.card {&nbsp; width: 100%;&nbsp; margin: 0 0 20px;&nbsp; padding: 10px;&nbsp; overflow: hidden;&nbsp; margin-bottom: 30px;}对于我的 MediaCard 组件，我添加了一个 className .MediaCard。然后我将其添加到我的 CSS 中：.MediaCard {&nbsp; max-width: 100%;&nbsp; margin-bottom: 30px;&nbsp; -webkit-column-break-inside: avoid;&nbsp; page-break-inside: avoid;&nbsp; break-inside: avoid;}最后，我添加了一些响应式样式：@media (max-width: 1650px) {&nbsp; .gridlist {&nbsp; &nbsp; columns: 3;&nbsp; &nbsp; width: calc(100% - 40px);&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; padding: 20px 20px 20px 0;&nbsp; }}@media (max-width: 768px) {&nbsp; .gridlist {&nbsp; &nbsp; columns: 2;&nbsp; }}@media (max-width: 480px) {&nbsp; .gridlist {&nbsp; &nbsp; columns: 1;&nbsp; }}但是，我仍然不知道我以前的代码有什么问题。如果有人能告诉我，谢谢！