Grid support enhancements

[grewn0uille]

This issue is for grouping grid features requests and bugs.

If you’d like to have a new feature regarding grid properties or encounter an issue related to grid, you can check here if an issue isn’t already opened.
If not, please open an issue and we’ll link it there :)

• display: inline-grid
• auto content size for grid containers – Support for layouts with nested CSS grids and auto-height rows #2354
• grid-auto-flow: column − Support grid-auto-flow: column #2142
• 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 and break-inside: avoid for grid items – Allow fragmentation in grid rows #2397
• display at least one row on empty pages - c10c689
• break-inside: avoid for grid containers
• break-before and break-after for grid items

[charliesneath]

Great to see this list! One clarification to see if this relates to a problem I've noticed:

auto content size for grid containers

Does this mean that, for example, rows within a display: grid container layout would automatically resize their height to fit the size of their content? If so, then I can file a more specific issue to detail the behavior I'm looking for because this doesn't work now.

(My usual process is to get something working in Chrome, and then compare to the output of Weasyprint; Chrome is more forgiving but I want to make sure I can point to specific issues where possible).

Thanks for all your work on this!

[liZe]

Does this mean that, for example, rows within a display: grid container layout would automatically resize their height to fit the size of their content?

No, it means for example that a grid can’t find the maximum width of its content. Here’s an example:

<div style="float: left">
  <div style="display: grid; grid: 1fr / 1fr 1fr; border: 1px solid red">
    <div>abc def</div>
    <div>abc def</div>
  </div>
</div>

In this example, we have one row with two columns with "abc def", so its maximum width is the width of "abc defabc def". WeasyPrint can’t find this width yet, it assumes that it is the width of "abc def", just as if it was a block containing other blocks.

If so, then I can file a more specific issue to detail the behavior I'm looking for because this doesn't work now.

Yes, you can open another issue, and give us an example so that we can reproduce the problem.