How to break the newspaper style 3 column layout in CSS?

Question

I have a following requirement to design the print layout to generate a pdf and I've tried various options including CSS flex and grid but not much success.

The requirement is:

• Show the content in 3-page colum layout - similar to newspaper style.
• If a column holds too much information then it would ‘flow’ into the next column on the right hand side.
• Once we reached the 3 column limit, then the 4th column should move to the next row instead of the column (as in, the next page). Also, we do not know how many columns or rows in total.

I'm able to achieve the first requirement. However, I couldn't find a way to break the 3rd column in CSS based on the div width (or page width).

I'm trying the below code:

.newspaper {
  max-height: 500px;
   column-count: 3; 
  
}
.article {
  break-inside: avoid;
  page-break-after: always;        
}
.chart {
  background: #ccc;
  height: 200px;
}

 <div class="newspaper">
      <div class="article">
        <h1>Article 1</h1>
        <div class="chart">Chart 1</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 2</h1>
        <div class="chart">Chart 2</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 3</h1>
        <div class="chart">Chart 3</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>

      <div class="article">
        <h1>Article 4</h1>
        <div class="chart">Chart 4</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 5</h1>
        <div class="chart">Chart 5</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 6</h1>
        <div class="chart">Chart 6</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 7</h1>
        <div class="chart">Chart 7</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

Expected Output:

I'm happy with any CSS approach as long as it works on Chrome.

Thanks.

Roots

Your second condition is almost impossible to be implemented with pure CSS. The CSS is based on the BOX MODEL, which means every content is wrapped inside its own box. but you want to break this rule by your second condition. The only way that I think makes this possible is by using JS with CSS together – Electropositive

You can look at flow-into and flow-from – Reunite

As commented by others, there isn't a viable CSS-only solution yet. flow-into as mentioned by @Reunite might be able to solve your problems, but isn't implemented in Chrome yet (not even with prefix). – Zootomy

Judging by the only required environment being Chrome, am I right to assume this page is not for public use? If so, does it bother you if the solution would be kinda hacky as long as it gets the job done good enough for a pdf? – Zootomy

@John for all you know he might be targeting Electron. You're downvoting based on one's technology stack without knowing the use case. – Zootomy

@Zootomy Apologies for the late reply. The page is not for public use and thanks for your solution. – Roots

@John - The page is used by Puppeteer (headless Chrome) to generate the PDF, so it's not relevant whether the code is working on IE or FF. – Roots

@VijinPaulraj For mastering multi-column layout on paged media I recommend reading this article smashingmagazine.com/2019/02/css-fragmentation – Franklyn

Answer 1

Beware: this is a quick and dirty hack that isn't recommended for use in web development, as it makes a copy of the entire document for every page it creates. The scope of the question however seems to be a private tool that creates PDFs out of HTML. For that use case I deem this trick suitable. It meets al your criteria, even across pages and is responsive.

Why a trick?

As mentioned by others, CSS does currently not provide for an automated way to break columns up in rows and flow the text across them. display: grid does something related but keeps boxes intact meaning that elements cannot flow in one uninterrupted stream across the page. flow-into and flow-from seem promising but are not implemented in your preferred environment (Chrome) yet.

The trick

This setup breaks your entire content up in columns using the columns property, but only displays three of them using a container with overflow: hidden. When the page is loaded a piece of javascript then measures the container size, compares that to the scroll overflow to determine how many pages of content are hidden and creates copies accordingly, each having an offset to only display the next three items. So although every pages contains the entire document, the result is the illusion of articles freely flowing along pages.

The dimensions are configurable using the variables in the .pages ruleset. Further stylistic customization might need some tinkering given the hacky nature of this approach.

window.addEventListener("load", reflowPages);
window.addEventListener("resize", reflowPages);

function reflowPages() {
  const pages = document.querySelector(".pages");
  const template = document.querySelector(".page");
  if (pages == null || template == null) return;

  const viewportWidth = template.clientWidth;
  const totalWidth = template.scrollWidth;
  const pageCount = Math.ceil(totalWidth / viewportWidth);

  cleanPages();
  for (let n = 1; n < pageCount; n++) {
    const page = createPage(template, n);
    pages.appendChild(page);
  }
}

function cleanPages() {
  const [, ...rest] = document.querySelectorAll(".page");
  rest.forEach((v) => v.remove());
}

function createPage(template, n) {
  const element = template.cloneNode(true);
  element.style.setProperty("--page", n);
  return element;
}

.pages {
  --page-width: 100%;
  --page-height: 500px;
  --columns: 3;
}

.page {
  width: var(--page-width);
  height: var(--page-height);
  overflow: hidden;
  border-bottom: 1px solid black;
  padding: 1em 0;
}

.scroller {
  position: relative;
  max-height: 100%;
  column-count: var(--columns);
  column-gap: 0;
  left: calc(var(--page, 0) * -100%);
}

.article {
  padding: 0 0.5em;
  /* Instead of column-gap */
}

.chart {
  background: #ccc;
  height: 200px;
  break-inside: avoid;
}

<div class="pages">
  <div class="page">
    <div class="scroller">
      <div class="article">
        <h1>Article 1</h1>
        <div class="chart">Chart 1</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 2</h1>
        <div class="chart">Chart 2</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 3</h1>
        <div class="chart">Chart 3</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
      </div>

      <div class="article">
        <h1>Article 4</h1>
        <div class="chart">Chart 4</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 5</h1>
        <div class="chart">Chart 5</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 6</h1>
        <div class="chart">Chart 6</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 7</h1>
        <div class="chart">Chart 7</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
      </div>
    </div>
  </div>
</div>

Drawbacks / limitations

• This may not be very performant depending on the size of your document, but as stated earlier that may be acceptable for your use case.
• column-gap messes with the calculations and you should therefore use padding on the child elements instead (as in the example)
• Given multiple pages, the bottom .page will always be stretched to the max height by the invisible overflowing elements.

Zootomy

NOTE: flow-into and flow-from are in the specs for CSS regions module 1, which is not supported by any browser (see caniuse) and with little activity in implementation tickets. There is a CSSWG github thread asking for support for something similar for css-multicol module. – Franklyn

Answer 2

For PDFs (i.e. print) you almost have it. You just need to change the height property to 100vh (as opposed to max-height: 500px) and then unset it in an @media print media query.

.newspaper {
  height: 100vh;
}

@media print {
  .newspaper {
    height: unset;
  }
}

Note that that screens still have the horizontal scroll keeping the multi-column layout. So you might want to consider abandoning the multi-column layout for screens (that is move column-count inside the print media query as well), or use one of the other answers to keep this behavior for screens.

.newspaper {
  height: 100vh;
  column-count: 3; 
}
.article {
  break-inside: avoid;
  page-break-after: always;        
}
.chart {
  background: #ccc;
  height: 200px;
}

@media print {
  .newspaper {
    height: unset;
  }
}

 <div class="newspaper">
      <div class="article">
        <h1>Article 1</h1>
        <div class="chart">Chart 1</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 2</h1>
        <div class="chart">Chart 2</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 3</h1>
        <div class="chart">Chart 3</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>

      <div class="article">
        <h1>Article 4</h1>
        <div class="chart">Chart 4</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 5</h1>
        <div class="chart">Chart 5</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 6</h1>
        <div class="chart">Chart 6</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 7</h1>
        <div class="chart">Chart 7</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

Here is a printed preview

Hypogeous

Answer 3

I used Grid to achieve this.

If you want to break inside a column, I think that you need to use JavaScript. This is the maximum result you can get from CSS.

.newspaper {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
}
.article {
    break-inside: avoid;
    page-break-after: always;        
}
.chart {
    background: #ccc;
    height: 200px;
}

<div class="newspaper">
      <div class="article">
        <h1>Article 1</h1>
        <div class="chart">Chart 1</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 2</h1>
        <div class="chart">Chart 2</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 3</h1>
        <div class="chart">Chart 3</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>

      <div class="article">
        <h1>Article 4</h1>
        <div class="chart">Chart 4</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 5</h1>
        <div class="chart">Chart 5</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 6</h1>
        <div class="chart">Chart 6</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 7</h1>
        <div class="chart">Chart 7</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

Rash

Thanks for your answer, but grid won't solve the problem. – Roots

Answer 4

One idea is to limit the height of the entire page to 100vh. This way, using columns and breaks before avery article, you can have a horizontal navigation instead of a vertical one. At least this way allows control over breaks and sizes. For example,

NOTE: Run the code full size and scroll horizontally:

body {
  margin: 0;
  padding: 0 2ch;
}

main {
  columns: auto;
  columns: 3;
  max-height: 100vh;
  column-gap: 2ch;
}

article {
  break-before: column;
}

div {
  height: 10em;
  background: silver;
}

<body>
  <main>
    <article>
      <h2>Article 1</h2>
      <div></div>
      <p>Oellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
        tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
        porttitor, facilisis luctus, metus</p>
    </article>
    <article>
      <h2>Article 2</h2>
      <div></div>
      <p>Nellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit
        eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
        Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </article>
    <article>
      <h2>Article 3</h2>
      <div></div>
      <p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec
        non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
        metus</p>
    </article>
    <article>
      <h2>Article 4</h2>
      <div></div>
      <p>Sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      <p>Nellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit
        eget</p>
    </article>
    <article>
      <h2>Article 5</h2>
      <div></div>
      <p>Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
        leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
        Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
        metus</p>
    </article>
  </main>
</body>

Curarize

Answer 5

Interesting question. I think my solution matches all your requirements.

The idea is to leverage the default layout flow to meet requirements 2 and 3. Then just rotate the whole element. BUT it's not flexible:

1. It does not fill the browser width.
2. If you try to update the page height and page width, the style will be messy and you have to adjust the CSS property again to make it looks normal.
3. Other bugs I haven't found yet.

My solution is just for fun. But it indeed solves your problem. I also tried to print this HTML page in chrome and chrome will handle it properly.

* {
  margin: 0;
  padding: 0;
}

.chart {
  background: #ccc;
  width: 200px;
}

.newspaper {
  position: absolute;
  top: 0;
  left: 100px; 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  transform: rotate3d(1,1,0, 180deg);
  height: 912px; /* page width */
}

.article {
  width: 800px; /* page height */
}

.article * {
  display: inline-block;
  writing-mode: vertical-rl;
  height: 300px; /* column width */
  transform: scale(-1,1);
}

<div class="newspaper">
  <div class="article">
    <h1>Article 1</h1>
    <div class="chart">Chart 1</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>xxxxxxxxxx</p>        
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>xxxxxxxxxx</p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>xxxxxxxxxx</p>
  </div>
  <div class="article">
    <h1>Article 2</h1>
    <div class="chart">Chart 2</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>xxxxxxxxxx</p>
  </div>
  <div class="article">
    <h1>Article 3</h1>
    <div class="chart">Chart 3</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>

  <div class="article">
    <h1>Article 4</h1>
    <div class="chart">Chart 4</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>
  <div class="article">
    <h1>Article 5</h1>
    <div class="chart">Chart 5</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>
  <div class="article">
    <h1>Article 6</h1>
    <div class="chart">Chart 6</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>
  <div class="article">
    <h1>Article 7</h1>
    <div class="chart">Chart 7</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

Crochet