在使用 masonry.js 时，有没有办法防止行比其他行拥有更多的元素？

Question

https://codepen.io/codepen_user_123/pen/xxgXYqY

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnHeight: 1360,
  gutterHeight: 120;
});

所以我用它来创建一个非砖石类型的网格，但问题是有时我在同一个而不是一个上得到两个元素。

下图描述了我要查找的内容：

你看到每行只有 5 个元素，在提供的代码笔中，有些行比其他行有更多的元素，因为有足够的 space 可以在该行的某些列上容纳 1 个以上的元素，所以有没有办法防止这种情况发生？我无法让它工作。

Answer 1

我会给你一个有点奇怪的答案......但你可能甚至不需要砌体（以及 JS 和 jQuery 就此而言）来实现你想要实现的目标。我认为在这种情况下，简单的 HTML 和 CSS 答案是合适的。 CSS 中有一个相对较新的功能，称为 CSS Grid。这是一个接近您想要的示例。布局的所有主要代码都在这里。

.grid {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  grid-gap: 12px;
  display: grid;
}

<div class="grid">
  <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>

下面是一个更完整的示例，其中包含与您上图相似的样式：

.grid {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  grid-gap: 12px;
  display: grid;
}


/* unnecessary stylistic changes below here */
.grid {
  --color-1: rgb(252,151,36);
  --color-2: rgb(240,67,60);
  --color-3: rgb(97,125,138);
}


body {
  font-size: 32px;
  font-family: Arial;
  color: white;
  background-color: rgb(56,64,70)
}

.grid > * {
  text-align: center;
  padding: 0.7em;
}

.grid > *:nth-child(3n + 1) {
  background-color: var(--color-1);
}

.grid :nth-child(3n + 2) {
  background-color: var(--color-2);
}

.grid > *:nth-child(3n) {
  background-color: var(--color-3);
}

.grid > *:nth-child(4n + 1) {
  height: 75px;
}


.grid :nth-child(4n + 2) {
  height: 150px;
}

.grid :nth-child(4n + 3) {
  height: 50px;
}

.grid :nth-child(4n) {
  height: 125px;
}

<div class="grid">
  <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>

在使用 masonry.js 时，有没有办法防止行比其他行拥有更多的元素？

Is there a way to prevent rows on having more elements than other rows when using masonry.js?

css

jquery-masonry