Support CSS Grid layout

[liZe]

Fix #543.

This pull request adds initial support of CSS Grid layout.

🙏🏽 Please test this branch. 🙏🏽

You can install it with pip install git+https://github.com/Kozea/WeasyPrint@grid. Please report your feedback in a comment on this pull request, even to say that everything works for you! Don’t open other issues.

This work is the "first step" of a full CSS Grid layout. Many features are already supported, but some are not supported yet. A "second step" will be necessary to get a more complete support.

The code added for Grid is pretty clean, it follows the algorithm provided by the specification. The situation is much better than for Flex, and we can expect to keep most of this code unmodified in the future. Missing and buggy features are mainly caused by missing code, not by a broken code structure.

The current version is regularly tested using the W3C testing suite for Grid, there’s no crash for the 1500+ tests and references (even if some tests fail, of course).

The current algorithm is, as usually in WeasyPrint, a bit naive. We’ve put the accent on code clarity to improve readability and maintainability. We duplicated some lines on purpose, mainly to improve debugging sessions. We’ll probably keep this "simple" code for the next version and improve it (for performance and concision) in the future, when we have more experience and more tests.

Here are non-exhaustive lists of supported/unsupported features.

Supported:

• display: grid,
• grid-auto-*, grid-template-* and other grid-* properties,
• grid and other grid-* shorthands,
• flexible lengths (fr unit),
• line names,
• grid areas,
• auto rows and auto columns,
• z-index,
• repeat(X, *),
• minmax(),
• align-* and justify-* alignment properties,
• gap and *-gap properties for gutters,
• dense auto flow,
• z-index,
• order,
• margins, borders, padding on grid containers and grid items,
• fragmentation between rows.

Unsupported or buggy:

• display: inline-grid,
• auto content size for grid containers,
• grid-auto-flow: column,
• subgrids,
• repeat(auto-fill, *) and repeat(auto-fit, *),
• auto margins for grid items,
• span with line names,
• span for flexible tracks,
• safe and unsafe alignments,
• baseline alignment,
• grid items with intrinsic size (images),
• distribute space beyond limits,
• grid items larger than grid containers,
• min-width, max-width, min-height, max-height on grid items,
• complex min-content and max-content cases,
• absolutely positioned and floating grid items,
• fragmentation in rows.

Before merging this pull request, we’ll:

• add more tests,
• display warnings on unsupported features,
• add documentation,
• fix the main problems that will be reported.

[LukasKlement]

I tried to test it and installed the grid branch, but I'm unable to get grid to work. What am I doing wrong? See attached an example HTML and resulting PDF.

grid-test.html.zip
grid-test.pdf

[liZe]

I tried to test it and installed the grid branch, but I'm unable to get grid to work. What am I doing wrong?

Thanks for testing the branch!

It looks like you’ve tested the main branch or a release, not the grid branch. If another version of WeasyPrint is already installed, you can launch pip install --force git+https://github.com/Kozea/WeasyPrint@grid to force the update.

The result I get with the branch is better than what you get, but there’s a problem in the height of rows because the page is too narrow. We’ll fix that!

(We’ve also added the support of legacy grid-* properties.)

[liZe]

@LukasKlement We fixed the problem (there even already was a TODO in the code for this!), here’s what we get:
grid-test.pdf

[mcmahanp]

Works great on my (very simple) layout. Very appreciative that grid support is finally getting added!

[schneebuzz]

This is great!

I tried to align the terms of a description list with their first description element:

<dl>
    <dt>Term 1</dt>
    <dd>Description 1 1</dd>
    <dd>Description 1 2</dd>
    <dd>Description 1 3</dd>
    <dt>Term 2</dt>
    <dd>Description 2 1</dd>
    <dd>Description 2 2</dd>
    <dd>Description 2 3</dd>
</dl>

Using the following css:

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

This leads to the situation where Term 1 and Term 2 are on the first and second row of the first column instead of their corresponding position (1st and 4th). I could work around this by explicitly setting the grid-row-start of the Term 2 term element like so:

<dl>
    <dt>Term 1</dt>
    <dd>Description 1 1</dd>
    <dd>Description 1 2</dd>
    <dd>Description 1 3</dd>
    <dt style="grid-row-start: 4;">Term 2</dt>
    <dd>Description 2 1</dd>
    <dd>Description 2 2</dd>
    <dd>Description 2 3</dd>
</dl>

Any idea how to avoid this workaround?

Apart from this, I encountered no other issues while using the grid system, thanks a lot.
I really appreciate the effort to bring the grid layout support to weasyprint, and can't wait for its release! 😃

[liZe]

Hi @schneebuzz,

Thanks a lot for testing, and thanks for your failing example. Good news: it’s now fixed! 😄

[liZe]

We’ll merge this branch in a couple of days, last chance to test!