Content alignment should be done after track sizing

By design Issue #16903729

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

  • Actually this has been raised to the CSSWG and the decision has been to change the behavior to match Edge and Firefox:
    https://github.com/w3c/csswg-drafts/issues/2557

    Chromium is already updating its implementation and WebKit will follow too, so we can close this.

  • Hi Manuel,

    I appreciate the update.

    My testing shows the DIV 500 x 100 versus 500 x 150 in Chrome.  This is the case in 17134.112 and a nightly development build.  See the attached screenshot.

    Steve

  • Microsoft Edge Team

    Changed Status to “By design”

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

Sign in