Content alignment should be done after track sizing

Issue #16903729 • Assigned to Steven K.

Details

Author
Manuel R.
Created
Apr 12, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

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).

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

You need to sign in to your Microsoft account to add a comment.

Sign in