Search code examples
htmlcsscss-gridpage-break

Why doesn't page-break work with CSS display grid?

I'm making an HTML document using CSS grid layout, and then I want to print it.

The problem is that when I print the document some elements overflow to the next. So I added page-break-inside to my grid elements, but it doesn't change anything. Elements from one page still overflow to the other. page-break-inside works perfectly when there is no display:grid, but with display:grid it doesn't. Here are two samples with grid and without grid.

So:

  1. Does page-break work with display:grid, because in my situation it doesn't ?
  2. Is there any way to make this work?
Solution

    1. Breaking in grid layout as defined in css-break-3§3.1 and css-grid-1§12 isn't supported by any browser yet. Also, there isn't any specification for [page-]break-inside in grid layouts, only [page-]break-before and [page-]break-after.

    2. I suspect you'll need to manually break your grid layout into separate grids with dummy break elements in the right spots.