How to `page-break-inside` an `inline-grid` without splitting the borders?

Question

I'm creating a "medical resume" for my family. Basically it'll track and allow for printing our medications, providers, diagnosis, and CPAP supplies. I'm having issues with the printing part. I'm trying to get it to print (portrait) with the line breaks before or after the grid rows.

My grid layout is as follows:

CSS:

@media print {
    body {
        background-color: white;
        color: black;
        height: 11in;
        width: 8.5in;
        padding: 0.25in;
        margin: 0px;
        font-size: 10pt;
    }

    #print_rx_section {
        display: grid;
        justify-content: center;
        align-content: center;

        border: 2px solid black;
        border-collapse: collapse;

        page-break-after: always; /** HAVE NOT TESTED THIS YET, BUT I'M NOT WORRIED ABOUT IT **/
    }

    #print_rx_section {
        grid-template-columns: auto auto auto auto auto auto auto;
    }

    #print_rx_section>div {
        display: inline-grid;
        align-items: center;
        justify-items: center;

        border: 1px solid black;
        border-collapse: collapse;
        padding: 10px;

        text-align: center;
    }
}

From other posts, I understand that page-break-inside is not supported by the browsers.

Here's what it currently shows when I test with Ctrl+p:

My question being - is there an efficient way to break the pages only between rows when the data makes it expand beyond 1 page?

I could try - basically I just want the rows to stop at the end of one page and start on the next - right now, the row is broken between 2 pages. — jpgerb, Oct 08 '22 at 20:02

score 3 · Accepted Answer · answered Oct 10 '22 at 19:37

I ended up switching it from grid to a table. I could not find a way to get it to keep the rows 'complete'. I'm assuming it has something to do with there not being a defined row like a table's tr tag.

If someone is able to find a way to complete this with grid, I'm happy to test it and possibly accept that answer as correct.

score -2 · Answer 2 · answered Oct 08 '22 at 11:35

-2

I might be wrong but I think this already has an answer in this thread Although It is structured in a table in that thread.

Looking at Sinan Ünür's answer in the aforementioned thread I think this line is what you are looking for:

tr{ page-break-inside:avoid; page-break-after:auto }

His answer also contains some other creature comforts as displaying the header and footer on all pages

Hope this helps

answered Oct 08 '22 at 11:35

klovaaxel

47
2

It's a `grid`, not a `table`. tables seem to allow the `page-break-inside` but `grid` does not - also, as an FYI - it did not work with my `#print_rx_section>div` nor `#print_rx_section` – jpgerb Oct 08 '22 at 20:01

How to `page-break-inside` an `inline-grid` without splitting the borders?

2 Answers2