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

Question

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

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

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

下图描述了我正在寻找的内容：

您看到每行只有 5 个元素，在提供的 codepen 中，某些行的元素比其他行多，因为在该行的某些列上有足够的空间容纳 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>