How to make a row finished with blocks?

Question

JavaScript

Friends, help with advice or direction, for 5 days the whole brain has broken.
There are two types of blocks as shown in the picture below, one is equal in width to two small ones.

The problem with their construction was solved by a js script (actually, this picture was made for this)


But in the picture, as you can see, the bottom row ends with completely closing the row.
But if, for example, 9 news items are displayed and, for example, there are 3 wide blocks in them, then 3 news fall out on a new line, since the wide block occupies 2 ordinary ones, it turns out that 3 wide ones, vent 3 news.

There is no way I can write such a selection that it would display only 9 news that would end in a complete series.

Can you explain if I'm looking for something in the wrong place? how do you developers do it?
I have repeatedly cited this site as an example www.the-village.ru
Since it implements 1 in 1 what I need. How do they get a complete row with two types of blocks?

In general, the question is about rails, because that's where I'm trying to implement it, and it's in the controller that I'm trying to make this selection.
But since I have no idea how it is implemented, I decided to ask in other categories.
Help me please.

Answer 1

I see two options here:
1. make the block adapt to the grid. Those. if a block with a width of 2 gets into a situation like in the picture - it becomes single.
2. Add objects to the grid in rows. Those. we take an empty array representing a series.
While the elements fit - add them. As soon as the elements no longer fit, we check if there is a place in the row. If there is no space, we add a row to the collection of objects. If there is a place, we look for an object that is suitable in size, saving all the rest in some temporary array. We continue the operation until there are no unadded objects left.
Cons:
1st method: it is not always possible to make blocks flexible.
2nd method: objects are shuffled (i.e. in the case of a news feed, where sequence is important, this is unacceptable), there may be cases when the described situation will still happen.