Firefox Printing Issue for Grid CSS

I recently spotted an issue on a site where printing on Firefox just wasn’t working. It would print the header, the main content, and the footer on three pages but cut off all content within the main area after the first page.

This isn’t my first time dabling with Print CSS, in fact, at one point I was going to write a book on the subject! So I figured I would double check I had the correct combination of page-break-inside: avoids.

The CSS looked fine, and other browsers were printing as well as I expected (we have plenty of work to do with the design and UX on that site!).

As I was thinking about what could be different between this site and the dozens of other sites I’ve print-css’d over the years I realised that this was the first site where we’ve used the grid CSS property.

I was using the following CSS;

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

This took the three sections in my body (header, main, footer) and gridded them up for me.

The fix in my case was to realise that I don’t need this grid layout at all when printed, so I was able to do an override like this;

@media print {
   body {
    display: block;
  }
}

As soon as grid was out of the picture, printing worked fine.

If we needed to keep the grid layout for some reason, I’d have started experimenting with different settings for grid-template-rows to see if that was what was causing the issue.