[css-grid] Applying 'justify-content' content distribution is in the wrong place in the overall grid sizing algo · Issue #2557 · w3c/csswg-drafts (original) (raw)

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