Two column layout with new line breaks

Question

I'm trying out a multi-column magazine style layout for an editorial project.

As monitor sizes continue to increase, I wanted to take advantage of all the available inches of the monitor by creating a layout very similar to a paper magazine (two to three columns per page).

I'm using TipTap Editor for post management (since it returns very clean HTML code), and on the frontend I get the following html output:

I use the css columns class to divide the article into two parts:

article {
       columns: 2;
    }

But the result is this:

I want to divide all h2 into solution paragraphs so that I can expand the chapters horizontally, like this:

Is it possible to intercept H2 using pseudo-classes?

P粉068486220 · Answer

It might be helpful to put each chapter in a div so they stack together like your desired result.

HTML


  
    Chapter 1
     1.1 - The First
    ...
    ...
     1.2 - The Second
    ...
     1.3 - The Third
    ...
  
  
    Chapter 2
     2.1 - The First
    ...

CSS

.block {
  column-count:2;
  column-gap: 30px;
  margin: 20px 0 50px 0;
}

h2 {
  margin-top: 0;
}

Codepen: https://codepen.io/halfandhalfhd/pen/PoamByX p>