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

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

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

So I use this to create a non-masonry type grid, but the issue is that sometimes I get two elements on the same instead of one.

The image below describes what I am looking for:

You see there are only 5 elements on each row, in the codepen provided, some rows have more elements than others because there's enough space to fit more than 1 elements on certain columns of the row, so is there a way to prevent this from happening? I couldn't get it to work.

I'm going to give you a bit of a strange answer... but you may not even need masonry (and JS and jQuery for that matter) for what you are trying to achieve. I believe a plain HTML and CSS answer is appropriate in this case. There is this relatively new feature in CSS called CSS Grid. Here's an example close to what you want. All the main code for the layout is right here.

.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>

And here's a more full example containing styles similar to your above image:

.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>