0

I am receiving content from the backend, which need to render in a multi column layout, and the headline and the first paragraph should always stay together and must not slide in two different columns.

I read some articles here, but they did not match my case and did not solve my issue. The DOM hierarchy is like in the example below.

.container {
  column-width: 200px;
}

h2 {
    break-before: auto;
    break-after: avoid-column;
}
h2 + p {
    break-before:avoid;
    color:red;
}

<div class="container">
    <h2>My heading1</h2>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon.</p>
    <h2>My heading2</h2>
    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.</p>     
</div>
David Kimont
  • 11
  • 1
  • 1
    Judging by your example, there can be an arbitrary number of `

    `s per article ? Ifso then i doubt you can reliably do this in *just* CSS; you'd either have to be able to change the html at the backend, *or* manipulate it as it comes in from the backend. You'll want to have each individual article grouped into a container (a `

    ` or some such).
     – Raxi Dec 22 '21 at 14:01
  • 1
    I did just now notice you specifically mentioned the **first** paragraph has to stay with the heading, but surely you don't want the other paragraphs to end up somewhere else ? perhaps im picturing a different kind of multicol layout than you... – Raxi Dec 22 '21 at 14:08
  • Hello Raxi, you are right, I receive a various amount of paragraphs. And it looks odd, when the headline starts i.e. in column 1 and the text below in column 2. But to not waste too much space, all other paragraphs can flow into the next column. I totally do not understand why my css does not work, since the break properties are explicitly mentioned in multi column layouts https://www.w3.org/TR/css-multicol-1/ – David Kimont Dec 23 '21 at 15:39

0 Answers0