1

I have a grid layout with text and images which I want to print and I want only the page to break in the text row, and not break in images, my grid code has two rows, one for text and one for images, and the images inside the grid is another grid for the images, the code looks like this:

.grid{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "text"
    "sub-grid";
  .sub-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      gap: 0px 0px;
      grid-template-areas: "picture-one picture-two";
    }
}

I've done a lot of tests with the page break inside:

@media print {
  .sub-grid {
    page-break-inside: avoid;
  }
}

but never seems to work, it's always breaking the page on images when printing.

Here's a fiddle to reproduce: https://jsfiddle.net/kwp59x3g/15/

Any help is welcome, thank you guys.

dazzed
  • 643
  • 2
  • 9
  • 19

1 Answers1

1

I think the problem is in .grid class. Remove .grid class and add these lines:

  .text {
    page-break-before: avoid;
    page-break-after: auto;
  }
  .sub-grid {
    page-break-inside: avoid;
  }


.sub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: 'picture-one picture-two';
}

.picture-one {
  grid-area: picture-one;
}

.picture-two {
  grid-area: picture-two;
}

@media print {
  * {
    overflow: visible !important;
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .text {
    page-break-before: avoid;
    page-break-after: auto;
  }
  .sub-grid {
    page-break-inside: avoid;
  }
}
<button onclick="window.print()">
Print
</button>
<div class="grid">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu tortor luctus, condimentum ex id, interdum lectus. Nullam nec lectus odio. Mauris quis pharetra libero. Morbi eget elementum mi, ac auctor ex. Vivamus faucibus nec justo vel dapibus. Nulla
    vitae porta orci. Fusce in ex vestibulum, dapibus lorem at, scelerisque nunc. Integer auctor gravida faucibus. Integer non magna enim. Nam nec pharetra risus. Donec sagittis consectetur urna ac dictum. Nam in tortor vel nisi porta posuere. Maecenas
    fermentum ipsum in dui feugiat, vel placerat velit consectetur. In nec rutrum metus. Donec rutrum risus eget orci bibendum, vel euismod erat lacinia. Duis eleifend sollicitudin sem, mattis auctor dui porta vitae. Suspendisse vel gravida tellus, non
    ultricies nunc. Suspendisse ac elit blandit, lacinia tortor sed, eleifend tellus. Duis auctor dolor dolor, id vehicula turpis commodo a. Vestibulum quis tortor volutpat, imperdiet libero non, facilisis tellus. Donec eleifend, nisl eget pulvinar congue,
    ipsum mi tincidunt nisi, congue laoreet ante magna at augue. Proin eleifend mattis neque, vel maximus ex facilisis eget. Sed euismod massa orci. Suspendisse at semper sapien. Sed lobortis porttitor nisl. Ut suscipit mollis risus sit amet pharetra.
    Pellentesque tempor libero ut quam faucibus egestas. Mauris mattis lectus vel augue sollicitudin, varius sollicitudin ligula tristique. Maecenas non iaculis neque. Etiam commodo purus eget tortor pharetra aliquam nec ut augue. Vivamus non risus blandit,
    faucibus nunc eget, lobortis nisl. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis
    commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor
    id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus,
    quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue
    ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem
    quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a
    congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel
    lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis
    urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique
    senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor
    rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar,
    ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum
    a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl
    nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim
    elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam
    consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi.
    Curabitur fermentum odio sit amet luctus sollicitudin.
  </div>
  <div class="sub-grid">
    <img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
    <img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
  </div>
</div>

You can break a page break (using a page break inside) with:

  • tables
  • floating elements
  • block elements with borders

display: grid and display: flex don't correctly work it look like some old bug. link

Anton
  • 8,058
  • 1
  • 9
  • 27