Grid continuation-CodePudding

I'm trying to make it so that when the grid is empty, then that it was filled with empty squares. And when we add something to the grid, then the empty squares should decrease in the same order, and not vice versa.

<span >
      {% for item in box %}
         <samp>
            <img src="{{ path(item.item_id) }}">
         </samp>
      {% endfor %}
      
      {% for i in 0..23-box | length %}
          <samp></samp>
      {% endfor %}
</span>

And it turns out that there are no last squares, but it is necessary that they always fill the entire line.

.box{display:flex;align-content:flex-start;flex-wrap:wrap;overflow:hidden auto;width:260px;height:152px;margin:0 auto;}
.box samp{width:32px;height:32px;border:1px solid #393839;margin:3px 3px 1px 3px;padding:0;position:relative;}

<span >
             <samp>
                1
             </samp>
             <samp>
                1
             </samp>
             <samp>
                1
             </samp>
             <samp>
                1
             </samp>

          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          
          <samp></samp>
          <samp></samp>
          <samp></samp>
          <samp></samp>
          <samp></samp>
          <samp></samp>
          <samp></samp>
          <samp></samp>
          <samp></samp>
    </span>

That is, it should be like this:

.box{display:flex;align-content:flex-start;flex-wrap:wrap;overflow:hidden auto;width:260px;height:152px;margin:0 auto;}
.box samp{width:32px;height:32px;border:1px solid #393839;margin:3px 3px 1px 3px;padding:0;position:relative;}

<span >
             <samp>
                1
             </samp>
             <samp>
                1
             </samp>
             <samp>
                1
             </samp>
             <samp>
                1
             </samp>

          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          <samp>1</samp>
          
          <samp></samp>
          <samp></samp>
          <samp></samp>
          <samp></samp>
          <samp></samp>
    </span>

Connoisseurs, help me out, I've been suffering for 2 days ...
I just can't figure out how to make everything automatically adjust...
Initial grid dimensions:
6 pieces wide, 23 pieces high.
And then, it should dynamically build itself depending on the content

CodePudding user response：

If you want to fill up the entire grid you'll need 6 * 23 = 138 boxes You can either change your second loop or use batch

<span >
      {% for item in box %}
         <samp>
            <img src="{{ path(item.item_id) }}">
         </samp>
      {% endfor %}
      
      {% for i in 0..138-box | length - 1 %}
          <samp></samp>
      {% endfor %}
</span>

demo

The filter batch takes a second argument which will fill up the remaining items when the box|length < 138 Meaning items will always contain 138 items

<span >
      {% for items in box|batch(138, '') %}
          {% for item in items %}
             <samp>
                {% if item.item_id|default %} {# test if item is empty or not #}
                    {{ item.item_id }}
                {% endif %}
             </samp>
          {% endfor %}
      {% endfor %}
</span>

demo

Edit: It seems you only want to fill the rows, not the height. Then you definitely should use batch

<span >
      {% for row in box|batch(6, '') %}
          {% for item in row %}
             <samp>
                {% if item.item_id|default %}
                    {{ item.item_id }}
                {% endif %}
             </samp>
          {% endfor %}
      {% endfor %}
</span>

demo