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

Question

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?

Answer 1

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.