Steps to reproduce
A grid container with a fixed width of 500px and 2 columns of 100px (the row is “auto”).
It has a grid spanning both columns.
And the grid has "justify-content: space-between
The final size of the row is 100px, because of “justify-content” makes the item wider (500px) so it just needs 2 lines for the text (thus 100px height).
“justify-content” alignment should be done once we’re over with the track sizing algorithm,
in the last step (https://drafts.csswg.org/css-grid/#algo-overview):
“4. Finally, the grid container is sized using the resulting size of the grid as its content size,
and the tracks are aligned within the grid container according to the align-content and justify-content properties.”
And there’s a specific note that says:
“Note: This can introduce extra space between tracks,
potentially enlarging the grid area of any grid items spanning the gaps
beyond the space allotted to during track sizing.”
So the final size should be 300px instead of 100px (the 6 lines it orginally needed to layout the test with a 200px width).
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Steven K.”