@@ -3617,22 +3617,35 @@ Grid Sizing Algorithm</h3>
3617
3617
3618
3618
<li>
3619
3619
Next, the <a>track sizing algorithm</a> resolves the sizes of the <a>grid rows</a> ,
3620
- using the <a>grid column</a> sizes calculated in the previous step.
3620
+ using the <a>grid column</a> sizes calculated in the previous step
3621
+ and the effective column gap sizes after applying 'justify-content' .
3621
3622
3622
3623
<li>
3623
- Then, if the <a>min-content contribution</a> of any grid items have changed
3624
- based on the row sizes calculated in step 2,
3625
- steps 1 and 2 are repeated with the new <a>min-content contribution</a>
3626
- and <a>max-content contribution</a> (once only).
3624
+ Then, if the <a>min-content contribution</a> of any grid item has changed
3625
+ based on the row sizes and alignment calculated in step 2,
3626
+ re-resolve the sizes of the <a>grid columns</a>
3627
+ with the new <a lt="min-content contribution">min-content</a>
3628
+ and <a>max-content contributions</a> (once only),
3629
+ using the <a>grid row</a> sizes calculated in the previous step
3630
+ along with the effective row gap sizes calculated by applying 'align-content' .
3627
3631
3628
3632
<div class="note">
3629
- This cycle is necessary for cases where the <a>inline size</a> of a <a>grid item</a>
3633
+ This repetition is necessary for cases where the <a>inline size</a> of a <a>grid item</a>
3630
3634
depends on the <a>block size</a> of its <a>grid area</a> .
3631
3635
Examples include wrapped column <a>flex containers</a> (''flex-flow: column wrap'' ),
3632
3636
<a>orthogonal flows</a> ('writing-mode' ),
3633
3637
and <a spec=css-multicol>multi-column containers</a> .
3634
3638
</div>
3635
3639
3640
+ <li>
3641
+ Next, if the <a>min-content contribution</a> of any grid item has changed
3642
+ based on the column sizes and alignment calculated in step 3,
3643
+ re-resolve the sizes of the <a>grid rows</a>
3644
+ with the new <a lt="min-content contribution">min-content</a>
3645
+ and <a>max-content contributions</a> (once only),
3646
+ using the <a>grid column</a> sizes calculated in the previous step
3647
+ along with the effective column gap sizes calculated by applying 'justify-content' .
3648
+
3636
3649
<li>
3637
3650
Finally, the <a>grid container</a> is sized
3638
3651
using the resulting size of the <a>grid</a> as its content size,
0 commit comments