How to come up with an algorithm for displaying posts with a non-standard grid?

Question

PHP

Good afternoon!
There is a task: to display articles on the site in the form of a grid, highlighting some posts in double size. An example on the-village and similar sites.

<div class="item">Пост</div>
<div class="item x2">Пост</div>
<div class="item">Пост</div>

.item {display:inline-block;width:25%;}
.x2 {width:50%;}

There are several options for how to do this:
Option 1. Markup by the user.
The user in the admin panel marks certain posts with a label and this post gets its css class.
The problem is obvious: if in the above example, the user adds a post with a tag, then post #2 will crawl out of the container:

Considering that there can be 30-40 posts, I don’t think that the-village editor, each time a post is added, calculates and adjusts the rest of the materials , removing/adding marks.
Option 2. Pre-prepared matrix.
Posts are displayed according to the laid down scheme. Example for four columns:

2 1 1
1 1 1 1
2 2
1 1 2

When added, each post will move and receive one or another css class, depending on the place.
Problem: The scheme does not give the user freedom over the content: it is impossible to force the post "AAA!" to be displayed. always in double form - from time to time, it will "jump" in size.
Option 3. Computed algorithm.
Before displaying posts, the algorithm divides them into groups according to the number of columns (in our case, a group of 4 posts).
In each group, the algorithm randomly assigns numbers to the posts so that the total amount is no more than 4.
Displays the posts.
The feed will become livelier due to the randomness of the formats, but there is still little freedom over the content.
Option 4. Computed algorithm that takes into account user labels.
Everything is the same as in option 3, only first the algorithm checks that the user assigned the post, and then adds or subtracts the number of the remaining posts so that the total amount is 4.
Tell me what is the best thing to do and how you would solve this problem. Thank you.
-------------------------------------------------
UPD: The question is rather not about bootstrap and layout: you can’t predict in advance what the order of posts will be:

// может быть так, это уложится в 12-колоночный макет:
<div class="row">
    <div class="col-6"> </div>
    <div class="col-3"> </div>
    <div class="col-3"> </div>
</div>

// а может быть и так: три супер-поста подряд и ничего не влезет:
<div class="row">
    <div class="col-6"> </div>
    <div class="col-6"> </div>
    <div class="col-6"> </div>
</div>

Answer 1

Read this , there are more links at the top, maybe something will do

Answer 2

www.w3schools.com/css/tryit.asp?filename=tryrespon... - example
www.w3schools.com/css/css_rwd_grid.asp - idea