1857658 - [css-grid] Consider adding a special case to improve printing experience for single-row grids where the row is taller than a page

Status: NEW

(Core :: Layout: Grid, defect)

Description

[Daniel Holbert [:dholbert]]

Spinning this off from bug 1852515, for mitigating what seems to be a common case...

Background: We currently don't support "real" fragmentation of grid items, except at grid row boundaries, I think. So if we've got a tall grid row (e.g. sized to content, with its content being something super-tall like an article), then we don't end up fragmenting its content properly. See bug 1852515 comment 2 (and bug 1417615 which was filed on this before we landed the "fragmentation fallback" slicing mitigation).

This is annoying since it makes us push the grid to the next page and potentially leave a bunch of blank space, and it can make us slice text or content in half (via the fragmentation fallback).

Fixing this in general is pretty complex, but it might be possible and worth exploring a restricted special-case solution for the "common pain-point" case where there's just a single row; we could potentially even just target the situation where we've got that setup and a align-self:stretch grid items, if that helps. In that sort of setup, we could theoretically ignore the grid row and just let the child fragment as it normally would, if it weren't a grid item.

(Other browsers might already do something like this? I'm not sure. They do have weird printing edge cases for grid in general, as noted in bug 1852515 comment 8, but they seem to handle the simple case of a single grid-row much better than we do, from my testing at least.)

--> Filing this bug to track this sort of special-case, if anyone ends up getting time to try it while looking at grid code.