Аккордеон в несколько колонок на разной ширине экрана

Тильда умеет разложить карточки по колонкам, но количество одно на все экраны, и в колонке с несколькими карточками раскрытие работает неверно. Модификация перераспределяет карточки сама и делает это заново при смене ширины окна.

Что настраивается

• Класс блока — тот, что вы задали блоку в его настройках.
• Колонки по ширине экрана — список правил, по строке на каждое: ширина экрана и число колонок начиная с неё. Правил может быть сколько угодно, порядок строк значения не имеет.
• Расстояние между колонками.
• Ширина контейнера — как в блоке или во всю ширину экрана с заданным отступом от краёв.

Как раскладываются карточки

Порядок сохраняется по колонкам: первая часть списка попадает в левую колонку, следующая — в соседнюю. Раскрытая карточка растягивает только свою колонку и не оставляет пустот рядом.

Раскладка меняется только тогда, когда меняется число колонок, — при обычном изменении ширины окна карточки остаются на месте, а размеры подстраиваются сами, средствами CSS.

Что учтено

• Классы разметки Тильды не стираются: ширина и поля карточек переопределяются стилем, поэтому блок можно вернуть к исходному виду, просто убрав код.
• Заголовок блока, если он есть, остаётся на своём месте — в колонки уходят только карточки.
• Если карточек меньше, чем колонок по настройке, лишние колонки не создаются.
• Блоков с одним классом на странице может быть несколько: каждый раскладывается независимо.

Ограничения

Подойдут блоки, где каждая карточка — отдельная колонка Тильды: TX16N, TX16N2 и SV501. Ширину и отступы колонок в настройках блока задавать не нужно, они всё равно переопределяются.