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

[Anonymous]

Я создаю макет из нескольких столбцов, который ведет себя как текст в InDesign:
непрерывный поток текста, который заполняет несколько столбцов по вертикали, а затем переходит в следующий столбец.
Каждый блок (

Код: Выделить всё

.project

) — абзац с заголовком. Когда я щелкаю заголовок, абзац расширяется как аккордеон.
Что я хочу: когда абзац расширяется, я хочу, чтобы его содержимое естественным образом перемещалось по нескольким столбцам.
Я использовал счетчик столбцов вместо CSS Grid или Flexbox, потому что эти макеты
генерировали видимые пробелы и разрывы всякий раз, когда каждый блок .project имел разные высота.
Многоколоночный макет (

Код: Выделить всё

column-count

) дает мне непрерывный поток текста, при котором контент заполняет один столбец и плавно переходит в следующий.
Однако моя основная проблема заключается в следующем:
Когда я нажимаю на заголовок проекта, аккордеон (описание) должен открыться чуть ниже заголовка, а заголовок должен оставаться на месте. Но при счетчике столбцов иногда открытый текст появляется в следующем столбце или даже перемещает весь проект
в другой столбец, вместо того, чтобы оставаться прямо под заголовком.
Похоже, что макет столбца пытается сбалансировать поток текста каждый раз, когда изменяется высота, что заставляет блок проекта «перепрыгивать» между столбцами, когда открывается аккордеон.
Похоже, Элемент .description-project не может быть разделен между двумя столбцами, он рассматривается как один блок.
Это потому, что контейнер с несколькими столбцами (

Код: Выделить всё

column-count

) не может правильно расширяться, когда один блок меняет высоту? Или это потому, что мой JavaScript (который изменяет максимальную высоту в .description-project) вызывает перекомпоновку, которая заставляет браузер перебалансировать столбцы?

Код: Выделить всё

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);
});
});

Код: Выделить всё

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

.project {
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;
}
}

Код: Выделить всё

Project title

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

[list]
[*]Specs
[/list]

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