Page-breaks on grid and flexbox items not behaving properly

[plmrn]

Hi,

First of all, thanks for the fantastic work on Weasyprint, I've been using it (with django) for a couple of years now, it's very simple to use and I've been able to work around the unsupported features without an issue so far.

A layout that is used frequently on a website I'm working on is a grid of images. It's flexible (the user can choose to display between 1 and 4 images per line).

I want to print these views in a PDF through weasyprint. As of now, these views are laid out in a flexbox pattern. As I gather from the doc and github issues, flexbox is not totally supported by weasyprint, including page-breaks (the content just overflows in the same page and disappears at the bottom).

I tried a grid layout, which does support page-break but not the grid layout itself (each image take up all the width of the page, the property grid-template-columns is not supported.

Is there something I missed? Do you guys suggest a workaround or a better way to do this? Is the work to make weasyprint compatible with that a lot of work (considering I haven't contributed to such a project yet, so I'm trying to figure out whether it'd be a smart move to help out on this or just an impossible task)?

Here are the two layouts I tested:

Grid

<style>

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* I tried with 50% 50% as well */
    }
    img {
        max-width: 100%;
    }
</style>

<div class="container">
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
</div>

Flexbox

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
    }

    .col {
        flex: 0 0 auto;
        width: 50%;
        opacity: 50%;
    }

    img {
        max-width: 100%;
    }
</style>


<div class="container">
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
    <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"></div>
</div>

Thanks a lot for your help.

[liZe]

Hi!

Flexbox support is far from perfect, and your problem is actually #1967.

About Grid, nothing’s been done yet, so your problem is #543.

You can follow these two issues, you may get good news soon. 😄

[plmrn]

Thanks again, should have found this one out on my own on the tracker.