CSS многоколоночный избежать перерывов

Question

Я пытаюсь создать многостолбцовый макет с помощью CSS, где у меня есть несколько элементов с заголовками между ними. Я пытался использовать break-after: avoid чтобы заголовки не были в нижней части столбца, но они не работают

Вот фрагмент, который показывает мою проблему:

.columns-3 {
  column-count: 3;
}

.column-heading {
  font-weight: bold;
  break-after: avoid-column;
}

<div class="columns-3">
  <div class="column-heading">
    Heading
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-heading">
    Heading
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
</div>

Я также пытался использовать avoid-column вместо avoid или избегать разрыва на предмет после заголовка с

.column-heading + .column-item {
  break-before: avoid;
}

Это ошибка или я неправильно понимаю эти свойства?
Есть ли другой способ сделать это с помощью просто CSS или я должен сделать это в коде JS/Server?

Answer 1

Попробуй это:

    .columns-3 {
      column-count: 3;
    }

    .column-heading {
      font-weight: bold;
      break-after: avoid-column;
    }

<div class="columns-3">
  <div class="column-heading">
    Heading
  </div>
  <div class="column-heading">
    Heading
  </div>
</div>
<div class="columns-3">
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
</div>