Skip to content

Commit c9e9f7f

Browse files
committed
[css-grid-1] Incorporate track alignment into grid sizing algo per #2557
1 parent 277817b commit c9e9f7f

File tree

1 file changed

+19
-6
lines changed

1 file changed

+19
-6
lines changed

css-grid-1/Overview.bs

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3617,22 +3617,35 @@ Grid Sizing Algorithm</h3>
36173617

36183618
<li>
36193619
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'.
36213622

36223623
<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'.
36273631

36283632
<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>
36303634
depends on the <a>block size</a> of its <a>grid area</a>.
36313635
Examples include wrapped column <a>flex containers</a> (''flex-flow: column wrap''),
36323636
<a>orthogonal flows</a> ('writing-mode'),
36333637
and <a spec=css-multicol>multi-column containers</a>.
36343638
</div>
36353639

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+
36363649
<li>
36373650
Finally, the <a>grid container</a> is sized
36383651
using the resulting size of the <a>grid</a> as its content size,

0 commit comments

Comments
 (0)