Shopify макет страницы поставщика

Question

пытается создать страницу со списком поставщиков, как показано на рисунках ниже. Я ввел код для ссылки на соответствующие страницы, однако макет не в том формате, в котором я хочу его видеть. Пожалуйста, помогите

как я хочу

как это

Это код того, что я создал :

{% assign counter = 0 %} {% for vendor in shop.vendors %} {% assign counter = counter | plus: 1 %} {% endfor %}  {% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}

<div class="page-width">
    <div class="grid">
        <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
            <div class="section-header text-center">
                <h1>{{ page.title }}</h1>
            </div>
            <div class="rte">
        {{ page.content }}
        
                <ul class="vendor-list block-grid three-up mobile one-up"> {% for product_vendor in shop.vendors %} {% assign its_a_match = false %} {% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape  }} {% endcapture %} {% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}  {% for collection in collections %} {% if my_collection_handle_stripped == collection.handle %} {% assign its_a_match = true %} {% endif %} {% endfor %}  {% if its_a_match %} 
                    <li class="vendor-list-item">
                        <a href="/collections/{{ product_vendor | handleize }}">{{ product_vendor }}</a>
                    </li> {% else %} 
                    <li class="vendor-list-item">{{ product_vendor | link_to_vendor }}</li> {% endif %} {% endfor %} 
                </ul>
            </div>
        </div>
    </div>
</div>