Grid gap adds margin at the end

mbndr commented 3 months ago

Hello and thanks for the great work on WeasyPrint, I really like it!

I (probably) found a bug with the grid gap. At the end of a grid margin is added, the more grid rows the more the margin exists there (see images). When no gap is specified there's also no wrong margin.

I built a minimal example here:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            @page {
                size: A4;
                margin: 15mm;
            }
            * {
                margin: 0;
                padding: 0;
            }
            .grid {
                display: grid;
                gap: 2mm;
                grid-template-columns: 1fr;
                background-color: #006699;

                > * {
                    background-color: #ff6633;
                    color: white;
                }
            }
        </style>
    </head>
    <body>
        <div class="grid">
            <div>Grid item</div>
            <div>Grid item</div>
            <div>Grid item</div>
            <div>Grid item</div>
        </div>
    </body>
</html>

HTML output: html

PDF output: pdf

Update: Maybe that helps: if multiple colums exist (grid-template-columns: 1fr 1fr;) the margins are correct. grafik But if (for example) the last item has a manually set grid-column: 1/2; the margin is there again.

liZe commented 3 months ago

Hi!

I think that it’s a duplicate of #2162, fixed in version 62.2. Do you use an older version?

mbndr commented 3 months ago

Hello, yes now I saw https://github.com/Kozea/WeasyPrint/issues/2167, sorry to bother you. I'm using 62.1 but will upgrade to 62.2. Thanks!

mbndr commented 3 months ago

Hello again. I installed 62.2 and the example above works as expected. But following slightly edited HTML does not render correctly. The only change to above example ist the explicit definition of the grid-column. The actual value does not matter (1/2, 1/1, everything puts the margin at the bottom). The div where it's added also does not matter.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            @page {
                size: A4;
                margin: 15mm;
            }
            * {
                margin: 0;
                padding: 0;
            }
            .grid {
                display: grid;
                gap: 2mm;
                grid-template-columns: 1fr;
                background-color: #006699;

                > * {
                    background-color: #ff6633;
                    color: white;
                }
            }
        </style>
    </head>
    <body>
        <div class="grid">
            <div>Grid item</div>
            <div>Grid item</div>
            <div>Grid item</div>
            <div style="grid-column: 1/5">Grid item</div>
        </div>
    </body>
</html>

HTML: grafik

PDF: (margin at the bottom) grafik

Can you recreate this behaviour?

liZe commented 3 months ago

Can you recreate this behaviour?

Yes! Thanks for the example, it’s fixed too.

Kozea / WeasyPrint

Grid gap adds margin at the end #2187