Firefox Printing Issue for Grid CSS

If your body using a layout of grid is causing issues when printing, here is a fix

I recently spotted an issue on a site I run 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.

Recent posts View all

Management

What I look for in a CTO

There are eight things I always look for when deciding if someone would make a good CTO

Web Dev

Running Commands On Heroku

How to run commands on Heroku locally and from their web interface