I have a model Article. Now I want to present them in in rows. Each row should be 100% width and contain randomsly 1, 2 or 3 columns. If first column is 2/3 the next should be 1/3. If first is 1/2, next is 1/2

All possible columns are then: 1/1 1/2, 1/2 1/3, 1/3, 1/3 1/3, 2/3 2/3, 1/3

I have been playing with template tags to be able to forward a (random) variable value into the template and I use the divisibleby to break after 3 columns.

Played with CSS gris as well as Flexbox and HTML/CSS. But not able to get the result I want. I realize that I definetly not understand flexbox good enough and still working on it. But it seems to be the better option? Any help appreciated

random_numbers.py
    @register.simple_tag
    def flxgrw():
        flxgrw = random.randint(1, 2)
        return flxgrw


grid.html
<style>
.flexcontainer {
  display: flex;
  flex-wrap: wrap;
}

.flexitem {
  border: 1px solid red;
  padding: 5px;
}

.break {
  flex-basis: 100%;
  height: 0;
}

</style>

<div class="flexcontainer">
{% for article in article_list %}
  <div class="flexitem" style="flex-grow: {% flxgrw as flx %}{{flx}};">
    <h4>{{ article.title }}</h4>
  </div>

  {% if forloop.counter|divisibleby:3 %}
    <div class="break">
  {% endif %}
  {% if forloop.counter|divisibleby:3 %}
    </div>
  {% endif %} 

{% endfor %}


</div>

This is the result. Not quite what I need: