每创建 3 列后添加一个新行

Question

在 Shopify 产品页面中，添加了一个新部分以在 3 列的行中显示一些统计信息。我正在尝试使用下面的代码在 3 次迭代后将每个新列放入新的一行中。我希望行只有 3 列。这似乎不符合我的逻辑。请帮我找出为什么第三次迭代后的列没有出现在新行中。

<h2>Our Gifts Create an Impact</h2>
<div class="impact-items">
 {% for block in section.blocks %}
  <div class="impact-content col-xs-12 col-md-4">
    <div class="impact-icon"><img src="{{block.settings.impact_icon | img_url: 'master' }}"></div>
    <div>
     <div class="impact-number">{{block.settings.impact_number}}</div>
     <div>{{block.settings.impact_text}}</div>
   </div>
  </div>
 {% endfor %}
</div>

<div class="mt2x btn center-xs col-sm-12 col-md-12 col-lg-12 col-xl-12"><a href='https://packedwithpurpose.gifts/our-impact/impact-report-2020/'><button>Learn More About our Impact</button></a></div>

{% schema %}
 {
  "name": "Impact Stats",
  "blocks" : [
   {
    "type":"icon_number_text",
    "name":"Stats Block",
    "settings" : [
     {
      "id":"impact_icon",
      "type":"image_picker",
      "label":"Impact Icon"
     },
     {
      "id":"impact_number",
      "type":"text",
      "label":"Impact Number"
     },
     {
      "id":"impact_text",
      "type":"text",
      "label":"Impact Text"
     }
    ]
   }
  ]
 }
{% endschema %}

{% stylesheet %}
.product-view .impact-section h2 {
 align-content: center;
 text-align: center;
 color: #847d7a;
 font-family: "Playfair Display",serif !important;
 text-transform: none;
 letter-spacing: normal;
 font-weight: 700 !important;
 font-style: italic;
 margin: 30px 0;
}

.impact-content {
 display: flex;
 align-items: center;
}

.impact-items {
 display:flex;
}

.impact-section .mt2x.btn.center-xs.col-sm-12.col-md-12.col-lg-12.col-xl-12 button {
 background-color: #be9475;
 border-radius: 50px;
 background-color: #be9475;
 border-radius: 50px;
 height: 70px;
 line-height: 3;
 font-weight: 700;
 font-size: 20px;
}

.impact-icon {
 padding-right:16px;
}

.impact-number {
 font-weight:900;
 font-size:25px;
}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Answer 1

这里是液体代码的sn-p代码，在3项循环后添加和关闭div，您可以根据需要检查和增强逻辑

{% assign defaultSize = 3 %} // this the items after div is closed
{% assign counter = 1 %}
{% assign count = 1 %}
{% for i in (1..10) %}
    {% assign nextItem = count | minus:1 %}
    {% assign nextItem = defaultSize | times:nextItem %}
    {% assign nextItem = nextItem | plus:1 %}
    {% if counter == 1 or counter == nextItem %}<div class="row">{% endif %}
        <div class="cls-{{forloop.index}}">{{forloop.index}}---{{counter}}</div>
    {% assign lastItem = defaultSize | times:count %}
    {% if counter == lastItem or forloop.last == true %}
        </div>
        {% assign count = count | plus: 1 %}
    {% endif %}
    {% assign counter = counter | plus: 1 %}
{% endfor %}

这是我的开发商店中以下 sn-ps 的输出：