Reka letak dua lajur dengan pemisah baris baharu

Question

Saya sedang mencuba reka letak gaya majalah berbilang lajur untuk projek editorial.

Memandangkan saiz monitor terus meningkat, saya ingin memanfaatkan semua inci monitor yang tersedia dengan mencipta reka letak yang hampir sama dengan majalah kertas (dua hingga tiga lajur setiap halaman).

Saya menggunakan TipTap Editor untuk pengurusan pos (kerana ia mengembalikan kod HTML yang sangat bersih), dan pada bahagian hadapan saya mendapat output html berikut:

Saya menggunakan kelas lajur css untuk membahagikan artikel kepada dua bahagian:

article {
       columns: 2;
    }

Tetapi hasilnya begini:

Saya ingin membahagikan semua h2 kepada perenggan penyelesaian supaya saya boleh mengembangkan bab secara mendatar, seperti ini:

Adakah mungkin untuk memintas H2 menggunakan kelas pseudo?

Answer 1

Ia mungkin membantu untuk meletakkan setiap bab dalam div dan ia akan disusun di atas satu sama lain seperti hasil yang anda inginkan.

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