Многоколоночный макет CSS: позволяет элементу разделяться по столбцам (например, непрерывный поток текста). ⇐ CSS

[Anonymous]

Я создаю макет из нескольких столбцов, который ведет себя как текст в InDesign:
непрерывный поток текста, который заполняет несколько столбцов по вертикали, а затем переходит в следующий столбец.
Каждый блок (.project) — абзац с заголовком. Когда я нажимаю на заголовок, абзац расширяется как аккордеон.
Что я хочу: когда абзац расширяется, я хочу, чтобы его содержимое естественным образом перемещалось по нескольким столбцам.
Я использовал счетчик столбцов вместо CSS Grid или Flexbox, потому что эти макеты
генерировали видимые пробелы и разрывы всякий раз, когда каждый блок .project
имел разные высота.
Многоколоночный макет (column-count) дает мне непрерывный поток текста, при котором контент заполняет один столбец и плавно переходит в следующий.
Однако моя основная проблема заключается в следующем:
Когда я нажимаю на заголовок проекта, аккордеон (описание) должен открыться чуть ниже заголовка, а заголовок должен оставаться на месте. Но при счетчике столбцов иногда открытый текст появляется в следующем столбце или даже перемещает весь проект
в другой столбец, вместо того, чтобы оставаться прямо под заголовком.
Похоже, что макет столбца пытается сбалансировать поток текста каждый раз, когда изменяется высота, что заставляет блок проекта «перепрыгивать» между столбцами, когда открывается аккордеон.
Может кто-нибудь мне помочь, я был застрял на оооочень долгое время. Большое спасибо
function closeAllProjects() {
document.querySelectorAll(".project").forEach((p) => {
p.classList.remove("active");
const desc = p.querySelector(".description-project");
if (desc) desc.style.maxHeight = "0";
});
}

function openProject(project) {
closeAllProjects();
project.classList.add("active");
const description = project.querySelector(".description-project");
if (description) description.style.maxHeight = description.scrollHeight + "px";
}

document.querySelectorAll(".project").forEach((project) => {
const title = project.querySelector(".name-project");
if (!title) return;

title.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();

const scrollY = window.scrollY;
if (project.classList.contains("active")) closeAllProjects();
else openProject(project);
window.scrollTo(0, scrollY);
});
});


Project title

here i have my description that should expand right below the title

• Specs

.columns {
column-count: 4;
column-gap: 2.5rem;
width: 100%;

.project {
break-inside: auto;
-webkit-column-break-inside: auto;
page-break-inside: auto;
margin-bottom: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
}
.name-project {
cursor: pointer;
transition: color 0.3s ease;
margin: 0 0 0.3em;
}
.description-project {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
break-inside: auto;
-webkit-column-break-inside: auto;
page-break-inside: auto;
}
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... continuous