バッチを使用して複雑なグリッドレイアウトを作成しようとしています

バッチを使用して次のレイアウトを作成しようとしていますが、それを正しく取得できません。

enter image description here

これは私がどれくらいまで得たかです:

{% for entry in items|batch(3) %}
   <div class="row rowDivider">
     {% if loop.index is divisible by(5) or loop.index == 1 %}

        {% for batch in entry[0:3]   %}
          {% if loop.index == 1 %}
              <div class="big">{{batch}}</div>
          {% elseif loop.index == 2 %}
              <div class="big-top">{{batch}}</div>
          {% else %}
              <div class="big-bottom">{{batch}}</div>
          {% endif %}
        {% endfor %}

      {% elseif loop.index is divisible by(2) %}

        {% for batch in entry[0:2] %}
          {% if loop.index == 1 %}
             <div class="big-left">{{batch}}</div>
          {% else %}
             <div class="small-right">{{batch}}</div>
          {% endif %}
        {% endfor %}

      {% elseif loop.index is divisible by(3) %}

        {% for batch in entry[0:3] %}
          {% if loop.index == 1 %}
             <div class="small-left">{{batch}}</div>
          {% elseif loop.index == 2 %}
             <div class="small-middle">{{batch}}</div>
          {% else %}
             <div class="small-right">{{batch}}</div>
          {% endif %}
        {% endfor %}

    {% endif %}
  </div>
{% endfor %}

Jsonが使用した:

{ "items": ["1" , "2", "3", "4", "5" , "6", "7", "8","9" , "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22" ] }

どんな助けでも大歓迎です。

ベストアンサー

私はそれを得たと思う。ここに私がしたことがあります:

{% for entry in items|batch(10) %}
<div class="set">

    {% for batch in entry[0:3] %}
        {% if loop.index == 1 %}
        <div class="rowOne">
          <div class="big">{{batch}}</div>
        {% elseif loop.index == 2 %}
          <div class="big-top">{{batch}}</div>
        {% elseif loop.index == 3 %}
          <div class="big-bottom">{{batch}}</div>
        </div>
        {% endif %}
    {% endfor %}

    {% for batch in entry[3:2] %}
      {% if loop.index == 1 %}
        <div class="rowTwo">
          <div class="big-left">{{batch}}</div>
      {% elseif loop.index == 2 %}
          <div class="small-right">{{batch}}</div>
        </div>
      {% endif %}
    {% endfor %}

    {% for batch in entry[5:3] %}
      {% if loop.index == 1 %}
        <div class="rowThree">
          <div class="small-left">{{batch}}</div>
      {% elseif loop.index == 2 %}
          <div class="small-middle">{{batch}}</div>
      {% elseif loop.index == 3 %}
          <div class="small-right">{{batch}}</div>
        </div>
      {% endif %}
    {% endfor %}

    {% for batch in entry[8:2] %}
      {% if loop.index == 1 %}
      <div class="rowFour">
        <div class="small-left">{{batch}}</div>
      {% elseif loop.index == 2 %}
        <div class="big-right">{{batch}}</div>
      </div>
      {% endif %}
    {% endfor %}

</div>
{% endfor %}

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です