[csswg-drafts] [css-grid] Applying 'justify-content' content distribution is in the wrong place in the overall grid sizing algo

MatsPalmgren has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Applying 'justify-content' content distribution is in the wrong place in the overall grid sizing algo ==
The Grid spec currently says that "the tracks are aligned within the grid container according to the `align-content` and `justify-content` properties." in [step 4](https://drafts.csswg.org/css-grid/#algo-overview), after the sizes of both columns and rows have been determined. This leads to the wrong layout because intrinsic row sizes are then determined using the wrong Containing Block inline-size for spanning items. Here's [a testcase](https://bug1453627.bmoattachments.org/attachment.cgi?id=8967327) demonstrating the wrong layout in Chrome (the row size is too large for the text). The layout in Firefox is IMHO the correct one - it sizes the row based on the height of the text when the CB inline-size is 500px, which is what the `grid-column: span 2` grid area is sized to after `justify-content` is applied.

The correct place to apply `justify-content` in the overall algo is between step 1 and 2, i.e. first you determine the column sizes, then you apply `justify-content`.  This allows you to calculate the correct CB inline-size (and padding/margin percentage basis) for the items. Now you can calculate the correct row sizes, and after that apply `align-content`.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2557 using your GitHub account

Received on Thursday, 12 April 2018 20:50:37 UTC