I’m working on a web-based text layout styled as an old-style journal.

My goal is to create a multi-column text layout where the text automatically flows from one column to the next, but with each column having a different width.

The standard CSS column-count property allows for multi-column layouts but only with columns of equal width.

My challenge lies in needing columns of varying widths while still maintaining automatic text flow across these columns, which column-count does not support by default.

1. Using CSS Column Count:

.article-container {
  column-count: 6;
  column-gap: 20px;
}

With the above CSS, I achieved a layout with six columns of equal width where text flows automatically. However, this approach doesn’t meet my needs because I require columns of different widths.

2. Attempt with Tailwind CSS Columns:

<div className="columns-6 gap-4">
  <p>My very long text that needs to be split across columns.</p>
</div>

This Tailwind utility similarly created columns of equal width, which was not what I was looking for.

3. Experimenting with CSS Grid:

<div className="grid grid-cols-6 gap-4 font-newsgothic">
  <p className="col-span-3">My long text part 1</p>
  <p className="col-span-1">My long text part 2</p>
  <p className="col-span-2">My long text part 3</p>
</div>

Here, I manually divided the text across grid columns with specified spans to simulate columns of different widths. While this allowed for varying column widths, it required manual adjustment of the text content to balance column lengths, which is impractical for dynamic content. It also did not maintain automatic text flow, which is essential for the project.

Expected Outcome:
I was hoping to find a CSS or Tailwind-based solution that allows for columns of varying widths with automatic text flow, eliminating the need for manual text distribution and maintaining the flexibility to handle dynamic content.

Actual Outcome:
None of the methods tried provided a solution that combined varying column widths with automatic text flow, leading me to seek advice on potential CSS properties, Tailwind utilities, or JavaScript libraries that could achieve this.

Question:
How can I implement a multi-column layout with varying widths while ensuring the text flows automatically across columns in a responsive and dynamic manner? Is there a CSS-only or Tailwind CSS approach, or should I consider JavaScript-based solutions?