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


Optionally creating or removing a column or table with Rails migrations

Here's how to go about creating or removing a column optionally using Rails migrations


Using Faker with Rails

A guide to setting up Faker to work within Rails and why you'd want to