Html 根据其编号显示div

我在寻找一种方法，当我只有4条线时，我就把它放在a线上，就像我每2条线就有2条线一样。 当我有4个以上的div时，还有3个div

这是我的代码，但不正确：

<div class="o-horizontal-ressources">
    {% set i = 0 %}
    <div class="container">
        <ul class="row o-horizontal-ressources__list">
            {% for item in ressources_dynamiques %}
            {% if i == 3  %}<div class="w-100"></div>{% endif %}
                <li class="col o-horizontal-ressources__items">
                    {# ressourcesDynamiques_type:
                        - guide
                        - etude
                        - lien
                        - video
                        - infographie
                        - temoignage
                    #}
                    <div class="o-ressources-dynamiques
                    {%- if item.ressourcesDynamiques_type %} type--{{ item.ressourcesDynamiques_type }}{% endif -%}
                    {%- if item.horizontalRessources %} container{% endif -%}">
                        <p class="o-ressources-dynamiques__title">
                            {{- item.ressourcesDynamiques_title -}}
                        </p>

                        {# IF HREF OR VIDEO #}
                        {% if item.ressourcesDynamiques_videoLibelle %}
                            <!-- Button trigger modal -->
                            <button type="button" class="o-ressources-dynamiques__lien--button btn-arrow o-teaser--video"
                                data-toggle="modal"
                                data-target="#modalVideoTeaser"
                                title="Voir la vidéo {{ item.ressourcesDynamiques_title }}"
                                data-title="{{ item.ressourcesDynamiques_title }}"
                                data-urlid="{{ item.ressourcesDynamiquesVideoUrlId }}"
                            >
                                {{- item.ressourcesDynamiques_videoLibelle }}
                                <span class="sr-only">{{ item.ressourcesDynamiques_title }}</span>
                            </button>

                        {% elseif item.ressourcesDynamiques_linkHref %}
                            <a class="o-ressources-dynamiques__lien btn-arrow"
                                href="{{ item.ressourcesDynamiques_linkHref }}"
                                {%- if item.ressourcesDynamiques_linkTarget %} target="_blank"{% endif -%}
                            >
                                {{- item.ressourcesDynamiques_link }}
                                <span class="sr-only">{{ item.ressourcesDynamiques_title }}</span>
                            </a>
                        {% endif %}
                    </div>
                </li>
            {% set i=i+1 %}
            {% endfor %}
            {{ i ~ "kkkkkkkkk" }}
        </ul>
    </div>
</div>

第二个版本的CSS：

.o-horizontal-ressources {
    background-color: $gray-200;

    .o-horizontal-ressources__list {
        display: flex;
        justify-content: center;
        background-color: $gray-200;
        padding: 7rem 0 5rem;
        // margin-bottom: 0;
        // margin: auto;

        @include aw-make-row($grid-gutter-width);
    }
    li {
        background-color: $white;
        padding: 1.5rem;
        margin: 1.5rem;

        flex: 0 0 calc(33.333% - 3rem);
        max-width: calc(33.333% - 3rem);

        @include aw-make-col-ready($grid-gutter-width);

        display: flex;

        > * {
            width: 100%;
        }
    }
}

---

@DarkBee请看一看，我更新了html的第二个版本，保留了第一个版本，以便人们可以看到我编写的代码（使用for和if）

    // Horizontal Ressources
.o-horizontal-ressources {
    background-color: $gray-200;

    .o-horizontal-ressources__list {
        // display: flex;
        background-color: $gray-200;
        padding: 7rem 0 5rem;
        // margin-bottom: 0;
        // margin: auto;

        @include aw-make-row($grid-gutter-width);
    }
    li {
        background-color: $white;
        padding: 1.5rem;

        // @include aw-make-col-ready($grid-gutter-width);

        // display: flex;

        // > * {
        //     width: 100%;
        // }
            @include aw-make-col-value(33.333%);
    }
}

.o-horizontal-ressources {
    background-color: $gray-200;

    .o-horizontal-ressources__list {
        display: flex;
        justify-content: center;
        background-color: $gray-200;
        padding: 7rem 0 5rem;
        // margin-bottom: 0;
        // margin: auto;

        @include aw-make-row($grid-gutter-width);
    }
    li {
        background-color: $white;
        padding: 1.5rem;
        margin: 1.5rem;

        flex: 0 0 calc(33.333% - 3rem);
        max-width: calc(33.333% - 3rem);

        @include aw-make-col-ready($grid-gutter-width);

        display: flex;

        > * {
            width: 100%;
        }
    }
}