CSS multicolumn avoid breaks

Question

I'm trying to create a multi column layout with css where I have a few items with headings between them. I tried to use break-after: avoid to prevent headings from being at the bottom of a column but it doesn't seem to work

Here's a snippet that shows my Problem:

.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>

I also tried using avoid-column instead of avoid or avoiding the break on the item after the heading with

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

Is this a bug or am I misunderstanding those properties?
Is there another way to do this with just css or do I have to do this in JS/Server code?

score 0 · Answer 1 · answered Nov 23 '18 at 13:39

Try this:

    .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>

Thanks, this would be a possible solution however in my case I can't have a header row above the items. The headers can appear anywhere between the items and there could also be two headings in one column. — Eschon, Nov 26 '18 at 08:52

CSS multicolumn avoid breaks

1 Answers1