How to create in a for loop list unequal rows (2,4,3,2)

Issue

I'm really hoping that you can help me. I have a for loop

  <ul>
  {% for product in collection.products  %}
     <li>{{product}}</li>
 {% endfor %}
 </ul>

I would like to create unequal rows: first row - 2 products second: 4 third 3 fourth: 2 fifth: 4 ..... And have something like this:

I'm trying to do this 2 month already. Could you please help me?

Solution

So you want rows like

00 01
02 03 04 05
06 07 08 

You can use that schema to create css classes like this

.col0, .col1{
  width: 50%;
}
.col2, .col3, .col4, .col5{
  width: 25%;
}
.col6, .col7, .col8{
  width: 33.3%;
}

And then in your code:

{% for product in collection.products %}
    <li class="col{{ forloop.index0 | modulo : 9}}">{{product.title}}</li> 
{% endfor %}

Note that this will work for an arbitrary number of elements. The final html will look like this

<ul>
<li class="col0">x</li>
<li class="col1">x</li>
<li class="col2">x</li>
<li class="col3">x</li>
<li class="col4">x</li>
<li class="col5">x</li>
<li class="col6">x</li>
<li class="col7">x</li>
<li class="col8">x</li>
<li class="col0">x</li>
<li class="col1">x</li>
<li class="col2">x</li>
...
</ul>

This is an example of the result.

.col0, .col1{
  min-width: 50%;
}
.col2, .col3, .col4, .col5{
  min-width: 25%;
}
.col6, .col7, .col8{
  min-width: 33.3%;
}
ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
li{
  display: block;
  flex: 1;
}


li, just-for-better-display{
  background-color: #FAB100;
  border: 1px solid #0FAB10;
  margin: 5px -1px;
  padding: 5px 0;
  text-align: center;
}

<ul>
<li class="col0">1</li>
<li class="col1">2</li>
<li class="col2">3</li>
<li class="col3">4</li>
<li class="col4">5</li>
<li class="col5">6</li>
<li class="col6">7</li>
<li class="col7">8</li>
<li class="col8">9</li>
<li class="col0">10</li>
<li class="col1">11</li>
<li class="col2">12</li>
<li class="col2">13</li>
<li class="col2">14</li>
</ul>

Note that I've switched to min-width (and added flex: 1) to stretch the last elements to the maximum possible width.

Answered By - Fabio Filippi