htmlcssflexboxcss-gridcss-multicolumn-layout

Reputation: 4648

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

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.

Upvotes: 8

Answers (5)

Rúnar Berg

Reputation: 4842

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

Upvotes: 3

soimon

Reputation: 2580

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.

Upvotes: 4

Louis L

Reputation: 433

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:

It does not fill the browser width.
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.
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>

Upvotes: 2

VorganHaze

Reputation: 2066

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>

Upvotes: 2

Ahmed Tag Amer

Reputation: 1422

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>

Upvotes: 2

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

Answers (5)

Why a trick?

The trick

Drawbacks / limitations

Related Questions