Create Printable Newspaper-like Layout

I am looking for some guidance regarding how to create a printable newspaper-like layout using Foundation for sites. In plain CSS i can use css columns to create a two column layout where content from column 1 flows into column 2 when it needs to. I have tried using this in conjunction with Foundation for sites and it looks great on the webpage, but when I try to print the content breaks out of the columns. I am new to Foundation and would appreciate any assistance.

You might have to add specific print.css to go along with the css you added for columns flowing over to another. Perhaps share a link. I’d be interested to look.

What’s the flow for this as I assume it’s spitting out a pdf at the end?

I’ve used DOMPdf in the past for this but found when passed through the library would render differently to the OS print to pdf.

One thing I found is making sure the print area was well within iso/usa sizes. Such as A4/legal and this helped with a few headaches albeit at a little cost of design.

What was throwing me off was trying to have a grid-x and multiple cells in order to place information side by side. Once I got rid of the multiple cells and went with cell auto as the class for the column div and then in my css file used the following code in a print-container all seemed to work. The only thing that I am missing out on is being able to put cells with media objects or cards to place content side by side. I do wish there was an easy print style override in Foundation 6 so I am not having to fight the mobile first platform while printing.

$output .= "<div class='grid-x'>";
$output .= " <div class='cell auto'>";
---content----
$output .= "</div>"; //closing cell
$output .= "</div>"; //closing grid-x

`.print-container {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
-webkit-column-rule: 1px dotted #ddd;
-moz-column-rule: 1px dotted #ddd;
column-rule: 1px dotted #ddd;

} `