аа, там тени

Всем привет!
Возможно ли на css сделать эту магию ??  Я уже 2й день борюсь с этими плавающими элементами, уже все перепробовал..
Пробовал и count-column, пробовал flex, inline. Вот этот скрин, это float, каждому четному задается float:right, а нечетным:left.
Как сделать так, что бы они вставали друг за другом по порядку? В данном случаи 5ка прижалась к 4ке, а должна к 3й, а 6ка подняться вверх.

Помогите советом 🤯😭

Да, в этом вся проблема.

Есть варианты?)

мб всё таки лучше решить это не с помощью цсс?

Ну я столько времени убил.. нельзя просто так взять и сдаться ..

я понимаю, но это всё равно не значит, что данный способ - лучший)..

попробуй это

накладывать через nth order  ?

нет. свойство флекса

почитай

Привет! Подтолкните меня, пожалуйста, в нужном направлении.

У меня есть контейнер статьи с отдельным селектором номера стиля, по сути темы:

<div class="article style-1">
    <h1>Header</h1>
    <lead>Some lead text</lead>
</div>

Тема—style-1—присваивается при рендере страницы.

Я хочу задать переменную цвета для каждого стиля (color-1,-2,-3..), которую буду использовать в .article в разных местах (где-то фоном, где-то бордер):

.style-1 {
    $color-1: yellow;
    $color-2: green;
}
...
.style-N {
    $color-1: red;
    $color-2: blue;
}
.article {
    h1 {
        background-color: $color-1;
    }
    lead {
        border: solid 1px $color-2;
    }
}

Проблема в том, что $color-1 локализован для .style-1 и при компиляции не доступен в .article.

Можно ли как-то так придумать, чтоб это сработало?

Так, и что свойство order ? Я задал каждому четному 2, каждому нечет 1, но ничего толком не происходит

вообще ничего?)

Да нет, это не динамически, у меня слишком разные меню, может в 1списке быть 10ть, а во втором 1 элемент. Ну и плюс зависимость от высоты стала :(

<div class="article style-1">
    <h1>Header</h1>
    <lead>Some lead text</lead>
</div>

.style-1 {
    $color-1: yellow;
    $color-2: green;
}
...
.style-N {
    $color-1: red;
    $color-2: blue;
}
.article {
    h1 {
        background-color: $color-1;
    }
    lead {
        border: solid 1px $color-2;
    }
}

Придумал с через var():

.style-1 {
  --color-1: yellow;
  --color-2: green;
}
.article {
    h1 {
        background-color: var(--color-1);
    }
    lead {
        border: solid 1px var(--color-2);
    }
}

Вот что вышло.. если высокий блок родителя, то все печаль.

А просто вертикальный флекс не сработает?
flex-direction: column;

Не, они же просто вырав в колонку, а если + flex wrap, то будет то что выше на скрине, если высота позволяет, они будут тянуться и тянуться