Как динамически повторить макет сетки для двух столбцов, а затем три столбца и так далее? Жидкость/SCSS/CSS ⇐ Html

[Anonymous]

Я пытаюсь сделать следующую сетку в жидком коде для нашего магазина Shopify: < /p>
[! [Сетка сетки двух столбцов с тремя столбцами неоднократно] [1]] [1] < /p>
Блоки (каждый логотип с текстом) загружаются через тему, что означает, что мы можем удалить или добавить блоки. Повторяющийся паттер из двух столбцов, затем три столбца (затем повторяйте, начинающееся с двух, затем три и т. Д.) И так далее. До сих пор у меня есть этот код, мне нужно организовать HTML. Принятие решений с SASS/CSS/JavaScript

{% assign blocks = section.blocks %}
{% assign total_blocks = blocks | size %}
{% assign total_containers = total_blocks | divided_by: 5 | times: 2 %}
{% assign block_modulo = total_blocks | modulo: 5 %}

{% if block_modulo > 0 %}
{% assign total_containers = total_containers | plus: 1 %}
{% endif %}

{% for container_index in (1..total_containers) %}

{{ container_index }}
{% assign block_index = container_index %}
{% assign max_blocks_per_container = 2 %}

{% assign cont_remainder = container_index | modulo: 2 %}
{% if container_index > 1 and cont_remainder == 0 %}
{% assign max_blocks_per_container = 3 %}
{% endif %}

{% assign block_offset = container_index | times: max_blocks_per_container %}
{% assign block_index_max = block_offset | plus: max_blocks_per_container %}

{% for a in (block_index..block_index_max) %}
{{ blocks[block_index].settings.mattress_cert_text }}

{% endfor %}

{% endfor %}

< /code>
Я собрал этот код с CHATGPT, который работает ... но дело в том, что я не могу использовать этот фрагмент, потому что моя команда указала (обзор кода), что я не могу использовать открытие и закрытие DOV в следующем порядке: < /p>
{% for block in blocks %}
{% assign row_size = index | modulo: 5 %}

{% capture opening_div %}
{% if row_size == 0 or row_size == 2 %}

{% endif %}
{% endcapture %}

{% capture closing_div %}
{% if row_size == 1 or row_size == 4 or index == total_blocks %}

{% endif %}
{% endcapture %}

{{ opening_div }}

{% assign cert_image = block.settings.mattress_cert_image %}
{{ cert_image | image_url: width: cert_image.width, height: cert_image.height | image_tag }}
{{ block.settings.mattress_cert_text }}

{% assign index = index | plus: 1 %}

{{ closing_div }}
{% endfor %}
< /code>
И это SCSS, который связан с рабочим примером выше: < /p>
.mattresses__certifications {
display: flex;
flex-flow: column nowrap;
gap: $spacing-lg;
padding: $spacing-base;
margin: $spacing-sm auto;

@include media-breakpoint-up(md) {
flex-flow: row wrap;
justify-content: center;
}

@include media-breakpoint-up(lg) {
border-radius: $border-radius-4xl;
background: $color-primary-10;
}

.mattresses__cert-row {
display: flex;
justify-content: space-evenly;
gap: $spacing-lg;
}

.mattresses__cert-wrapper {
display: flex;
align-items: center;
flex-direction: column;
gap: $spacing-xs;
text-align: center;
align-self: center;

@include media-breakpoint-up(md) {
flex-direction: row;
text-align: left;
}
}

.mattresses__cert-text {
font-size: $font-size-sm;
}

}
< /code>
Есть ли способ улучшить логику и без открытия и закрытия DOV, как в примере выше? Я немного потерян здесь. Это должно быть динамичным и не жестко кодировать, как некоторые примеры, которые я видел на других страницах.
[1]: https://i.sstatic.net/m5htvlds.png

Подробнее здесь: https://stackoverflow.com/questions/795 ... mns-and-so