4

I want to build a multi-column layout that prints nicely. My goal is that some content is split in 3 columns and the tricky aspect: that at the end the content first tries to fill column #1 before going to #2 and #3.

This layout should be printable as this picture (red line is a page break to next page, those are managed automatically based on pagesize and content): layout intended

This is the code I'm trying right now but setting height to 100vh seems to break printing, it only prints the first page but multi-column works as I expect. Also this only needs to work on Chrome. Easier to see print in this gist

Setting container to height 100% prints OK but it seems the column-fill auto doesn't work.

So problem right now is being able to print in multiple pages and use column-fill auto 

.multi-container {
    column-count: 3;
    padding: 0 25px;
    height: 100vh;
    column-fill: auto;
}
<div class="multi-container">

            <p>Arla Annetta</p>
<p>Lavina Argo</p>
<p>Aurora Arreola</p>
<p>Stephnie Augustass</p>
<p>Tanya Axtell</p>
<p>Gilbert Bachmann</p>
<p>Mattie Barra</p>
<p>Winona Berardi</p>
<p>Verdell Bergquist</p>
<p>Arcelia Bibbs</p>
<p>Reta Borders</p>
<p>Carrie Bradshaw</p>
<p>Loree Brick</p>
<p>Cristen Broderick</p>
<p>Hugo Bryan</p>
<p>Leroy Bucko</p>
<p>Marcene Burtner</p>
<p>Cheri Cassi</p>
<p>In ccc</p>
<p>Marcel Dade</p>
<p>Shara Dalessio</p>
<p>Michelina Delancey</p>
<p>Marian Depew</p>
<p>aJoh Doe</p>
<p>Naomi Drye</p>
<p>Moon Dumais</p>
<p>Delois Easterwood</p>
<p>Lenny Edwina 14</p>
<p>matiascasd far</p>
<p>Tameka Farnsworth</p>
<p>Cinda Fitzsimons</p>
<p>Gala Giroir</p>
<p>Lorean Giron</p>
<p>Rachel Green</p>
<p>Nicolasa Grigsby</p>
<p>Cristopher Gupta</p>
<p>Akilah Hagge</p>
<p>Cletus Haliburton</p>
<p>Gale Hallford</p>
<p>Ona Hile</p>
<p>Earl Hudock</p>
<p>Fritz Jaffe</p>
<p>Ellen Jerold 2</p>
<p>Dorene Josefa</p>
<p>Gita Kit</p>
<p>Alison Kontos</p>
<p>Adrians Laiches</p>
<p>Goldie Lamers</p>
<p>Windy Landi</p>
<p>Harriet Lindsley</p>
<p>Kay Lovato</p>
<p>Aldo Luper</p>
<p>Rosaura Manriquez</p>
<p>Mirella Mascorro</p>
<p>Marilu Maye</p>
<p>Henriette Mechling</p>
<p>Eulah Meis</p>
<p>Adans Morneau</p>
<p>Raphael Neagle</p>
<p>Theo Oliveras</p>
<p>Ethyl Patnaude</p>
<p>silva paulo</p>
<p>Julio Pendergrass</p>
<p>Geoffrey Pinette</p>
<p>Clement Poehler</p>
<p>Miranda Priestly</p>
<p>Kerstin Provo</p>
<p>Herta Raelene</p>
<p>Shanti Rainer</p>
<p>Newton Ramage</p>
<p>Veola Raymer</p>
<p>Loree Reinoso</p>
<p>Ignacio Rick</p>
<p>Cody Ringdahl</p>
<p>Nigel Rochin</p>
<p>Kandy Rogge</p>
<p>Elvie Rosenbeck</p>
<p>Marie Sandrock</p>
<p>Etta Shain</p>
<p>Mabel Shufelt</p>
<p>Afton Siewert</p>
<p>Daina Sohn</p>
<p>Olene Solley</p>
<p>Darcie Spaulding</p>
<p>davif sss</p>
<p>Damon Stan</p>
<p>Hien Stull</p>
<p>Tandra Warden</p>
<p>Ali Weatherford</p>
<p>Alix Westlake</p>
<p>Brain Wickman</p>
<p>Alona Woods</p>
<p>z x</p>
<p>Elease    Yarman</p>
<p>Elease  1  Yarman</p>
<p>Elease  2  Yarman</p>
<p>Elease  3  Yarman</p>
<p>Elease 4   Yarman</p>
<p>Elease 5   Yarman</p>
<p>Elease 6   Yarman</p>
<p>Elease 7   Yarman</p>
<p>Elease 8   Yarman</p>
<p>Elease 9   Yarman</p>
<p>Elease 10   Yarman</p>
<p>Elease 11   Yarman</p>
<p>Elease 12   Yarman</p>
<p>Elease 13   Yarman</p>
<p>Elease 14   Yarman</p>
<p>Elease 15   Yarman</p>
<p>Elease 16   Yarman</p>
<p>Elease 17   Yarman</p>
    </div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
AlfaTeK
  • 7,487
  • 14
  • 49
  • 90

1 Answers1

0

Try it in this way:

.multi-container {
  width: 89%;
  display: flex;
  flex-flow: row wrap;
  margin-left: 110px;
}

p{
  transform: rotate(-90deg);
  padding: 0;
  margin: 20px -40px;
  width: 150px;
  height: 150px;
  text-align: center;
}
    <div class="multi-container">
      <p>Arla Annetta</p>
      <p>Lavina Argo</p>
      <p>Aurora Arreola</p>
      <p>Stephnie Augustass</p>
      <p>Tanya Axtell</p>
      <p>Gilbert Bachmann</p>
      <p>Mattie Barra</p>
      <p>Winona Berardi</p>
      <p>Verdell Bergquist</p>
      <p>Arcelia Bibbs</p>
      <p>Reta Borders</p>
      <p>Carrie Bradshaw</p>
      <p>Loree Brick</p>
      <p>Cristen Broderick</p>
      <p>Hugo Bryan</p>
      <p>Leroy Bucko</p>
      <p>Marcene Burtner</p>
      <p>Cheri Cassi</p>
      <p>In ccc</p>
      <p>Marcel Dade</p>
      <p>Shara Dalessio</p>
      <p>Michelina Delancey</p>
      <p>Marian Depew</p>
      <p>aJoh Doe</p>
      <p>Naomi Drye</p>
      <p>Moon Dumais</p>
      <p>Delois Easterwood</p>
      <p>Lenny Edwina 14</p>
      <p>matiascasd far</p>
      <p>Tameka Farnsworth</p>
      <p>Cinda Fitzsimons</p>
      <p>Gala Giroir</p>
      <p>Lorean Giron</p>
      <p>Rachel Green</p>
      <p>Nicolasa Grigsby</p>
      <p>Cristopher Gupta</p>
      <p>Akilah Hagge</p>
      <p>Cletus Haliburton</p>
      <p>Gale Hallford</p>
      <p>Ona Hile</p>
      <p>Earl Hudock</p>
      <p>Fritz Jaffe</p>
      <p>Ellen Jerold 2</p>
      <p>Dorene Josefa</p>
      <p>Gita Kit</p>
      <p>Alison Kontos</p>
      <p>Adrians Laiches</p>
      <p>Goldie Lamers</p>
      <p>Windy Landi</p>
      <p>Harriet Lindsley</p>
      <p>Kay Lovato</p>
      <p>Aldo Luper</p>
      <p>Rosaura Manriquez</p>
      <p>Mirella Mascorro</p>
      <p>Marilu Maye</p>
      <p>Henriette Mechling</p>
      <p>Eulah Meis</p>
      <p>Adans Morneau</p>
      <p>Raphael Neagle</p>
      <p>Theo Oliveras</p>
      <p>Ethyl Patnaude</p>
      <p>silva paulo</p>
      <p>Julio Pendergrass</p>
      <p>Geoffrey Pinette</p>
      <p>Clement Poehler</p>
      <p>Miranda Priestly</p>
      <p>Kerstin Provo</p>
      <p>Herta Raelene</p>
      <p>Shanti Rainer</p>
      <p>Newton Ramage</p>
      <p>Veola Raymer</p>
      <p>Loree Reinoso</p>
      <p>Ignacio Rick</p>
      <p>Cody Ringdahl</p>
      <p>Nigel Rochin</p>
      <p>Kandy Rogge</p>
      <p>Elvie Rosenbeck</p>
      <p>Marie Sandrock</p>
      <p>Etta Shain</p>
      <p>Mabel Shufelt</p>
      <p>Afton Siewert</p>
      <p>Daina Sohn</p>
      <p>Olene Solley</p>
      <p>Darcie Spaulding</p>
      <p>davif sss</p>
      <p>Damon Stan</p>
      <p>Hien Stull</p>
      <p>Tandra Warden</p>
      <p>Ali Weatherford</p>
      <p>Alix Westlake</p>
      <p>Brain Wickman</p>
      <p>Alona Woods</p>
      <p>z x</p>
      <p>Elease    Yarman</p>
      <p>Elease  1  Yarman</p>
      <p>Elease  2  Yarman</p>
      <p>Elease  3  Yarman</p>
      <p>Elease 4   Yarman</p>
      <p>Elease 5   Yarman</p>
      <p>Elease 6   Yarman</p>
      <p>Elease 7   Yarman</p>
      <p>Elease 8   Yarman</p>
      <p>Elease 9   Yarman</p>
      <p>Elease 10   Yarman</p>
      <p>Elease 11   Yarman</p>
      <p>Elease 12   Yarman</p>
      <p>Elease 13   Yarman</p>
      <p>Elease 14   Yarman</p>
      <p>Elease 15   Yarman</p>
      <p>Elease 16   Yarman</p>
      <p>Elease 17   Yarman</p>
    </div>
Tarek.hms
  • 1,243
  • 1
  • 10
  • 15
  • thanks, I edited the original post because that is closer. That makes multi columns work but now chrome seems to only print a partial view of the thing (just first page with content cutted) – AlfaTeK Aug 14 '18 at 23:18
  • @AlfaTeK, in your example, I tried height: 100% and it works so fine and prints all pages, so what's exactly that you want to change? – Tarek.hms Aug 14 '18 at 23:36
  • on Chrome? For me everytime I define height then printing stops working because it always only prints 1 page even if i have a lot of content, that's what I'm getting. – AlfaTeK Aug 15 '18 at 00:05
  • Are you sure that you choose 'All Pages' from printing's options? – Tarek.hms Aug 15 '18 at 00:12
  • Sorry I think I got myself confused with the examples. With height 100% it seems column-fill: auto doesn't work so I don't get the behaviour I want: content to fill out the first column and only after goes to 2nd column. [gist](https://rawgit.com/pjfsilva/dc95d82ea44ad20df25a7094d06afb80/raw/356bb9ad507371ef6f7c3e8f3b4908eef8aa5d95/cols100p.html) [pdf output I get](http://www.filedropper.com/100percentage) with 100vh the columns somewhat work but I get the print only 1 page problem – AlfaTeK Aug 15 '18 at 02:40
  • hmm, that's a novel way of doing columns but that doesn't provide the right order of content in the columns, it seems content is ordered like this: https://imgur.com/u0wnByo and not my initial image of the layout – AlfaTeK Aug 15 '18 at 19:06
  • @AlfaTeK, You will get the same result when printing it because it will first print the first three rows (or more, it depends on the paper size) then the next three an so on, so if you flip the papers then the names will align in the order that you want. – Tarek.hms Aug 15 '18 at 20:14
  • @AlfaTeK if you want to show more names in each row then you can adjust padding and margin to remove some of the spaces. – Tarek.hms Aug 15 '18 at 20:16