Как лучше сверстать список на скриншоте?

Question

[Andrew Johnson]

Чтобы он был адаптивный, допусти при сжатии становилось 2 колонки, потом 1... не меня hml при адаптиве.
Пытался делать 1 списком и ставить column-count:3, но тогда колонки равной длины становятся.
Делал flex-direction-column, но тогда не получается отрегулировать расстояние у 2 и 3 колонки сверху и слева.

Подскажите пожалуйста

Comments

[Rustam Bainazarov]

Не совсем понял причину отказа от column-count.

[Andrew Johnson]

Рустам Байназаров, колонки становятся одного размера

[Shamhaner]

Сделай, как у Bootstrap, укажи жёстко в media ширину при которой они будут складываться, пропиши grid-breakpoints

Тебе сюда

[Олег]

Без флексбокса работает (bootstrap-5)

<ul class="row" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
        <li class="d-block col-sm-12 col-md-6 col-lg-4" style="padding:0px; margin:0px; box-shadow: 0px 0px 1px 0px black;">Текст</li>
    </ul>

[Andrew Johnson]

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

[Олег]

Andrew Johnson, в таком случае вам надо прописать несколько наборов стилей, типа

@media (min-width:768px){
li{width:100%;}
}
@media (min-width: 920px){
li{width: 50%;}
}

и так под каждую ширину экрана прописывать ширину контейнера li (или класса, который вы этому li добавляете)
ну и для высоты списка - надо прописать её. Если хотите адаптивной высоты - прописываете

@media (min-heigth: 720px){
   ul{min-heigth: 20vh; max-heigth: 20vh;}
   li{min-hegth: 4vh; max-heigth:4vh}
}
@media (min-heigth: 1080px){
   ul{/*свои параметры для высоты ul*/}
   li{/*свои параметры для высоты li*/}
}

vh - 1% высоты окна браузера

Для всех li - свойство display:block понадобится

Answer 1

[Арсений Матыцин]

Продолжай использовать column-count и играйся со свойствами display для элементов, список жрет отступы и переносит их для инлайновых и около того элементов.

Если порядок не критичен, то flex-ы или grid-ы на repeat auto-fill\fit с minmax-ами, в последнем варианте и медиазапросы не потребуются.