Skip to content

[css-grid] Intrinsic size computation with orthogonal grid items. #537

@javifernandez

Description

@javifernandez

Given the following example:

<div style="display: grid; grid: 50px / auto; width: min-content; font: 25px/1 Ahem; border: 5px solid;">
   <div style="color: magenta; background: cyan;  writing-mode: vertical-lr;">XX X</div>
   <div style="color: red; background: blue; grid-column: 2;">XX X</div>
</div>

Loading this example in Chrome or Firefox we've got the following results:

Chrome
Current result in Chrome

Firefox
Current result in Firefox

Current draft of Grid Layout specification states the following regarding grid container's intrinsic size computation:

5.2. Sizing Grid Container

The min-content size of a grid container is the sum of the grid container’s track sizes (including gutters) in the appropriate axis, when the grid is sized under a min-content constraint.

In the example defined above, we need to use grid's container intrinsic size as the available space for steps 1 and 2 of the Grid Sizing Algorithm. After executing them, the orthogonal item has changed its min-content contribution, so as it' state in the specs we need to repeat steps 1 and 2 with such new min-content contribution.

Since we are in the middle of a layout, we shouldn't compute again grid's container size, so even though column tracks's size have changed after running step 3, they is not reflected in the grid's intrinsic size.

3- Then, if the min-content contribution of any grid items have changed based on the row sizes calculated in step 2, steps 1 and 2 are repeated with the new min-content contribution and max-content contribution (once only).

Hence, I think we have an issue on how grid's intrinsic size is defined when there are orthogonal grid items; at least, if we really want to apply step 3 of the tracks sizing algorithm. I assume it's clear that we shouldn't make intrinsic size computation to depend on layout.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions