Как сделать список в 2 строки?

Question

[fsgdoterr]

Пытаюсь сделать список чтобы он выглядел вот так:

и не понимаю как это сделать. Пытался с помощью jquery:

let numItems = $('.featured_products-list li').length;

    $('.featured_products-list').css('column-count', Math.round(numItems/2));

Получаю количество li элементов и делаю количество столбцов равное количеству элементов разделенных на два, но когда добавляется свойство columnt-count то оно пытается всунуть все элементы списка в блок в котором находится список, а так как количество элементов будет больше чем может влезть так как будет скролл элементов то получается какая-то дичь:

как это можно решить? желательно чистым css

Comments

[Ankhena]

Вижу два варианта:
1. У swiper.js есть вариация показывать слайды в несколько строк.
Судя по кнопочкам на вашем скрине, это лучший вариант.

2. Стилями

ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr;
}

https://jsfiddle.net/bqh0984o/

Answer 1

[fsgdoterr]

Сам придумал решение, сделал список, в котором вложено два списка в li, получается что скроллить буду самый верхний список, а когда понадобится в пыхе сделать динамическую загрузку данных, просто выгружу данные в массив, и четные а также нулевой индекс будут попадать в первый список, а нечетный индекс во второй список

<ul class="featured_products-list">
                                <li>
                                    <ul class="featured_products-list-upper">
                                        <li class="featured_products-list-item">
                                            какие то данные
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="featured_products-list-down">
                                        <li class="featured_products-list-item">
                                            какие то данные
                                        </li>
                                    </ul>
                                </li>
                            </ul>

Comments

[Ankhena]

Может, просто возьмете готовый слайдер swiper.js?
Он умеет в 2 строки.