Skip to content

Commit a5cb534

Browse files
committed
[css-grid] Integrate 'stretch'-ing of tracks better into the track sizing algorithm. Fixes w3c#1150
1 parent 1663fc4 commit a5cb534

File tree

1 file changed

+16
-6
lines changed

1 file changed

+16
-6
lines changed

css-grid/Overview.bs

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3537,9 +3537,10 @@ Grid Sizing Algorithm</h3>
35373537
using the resulting size of the <a>grid</a> as its content size,
35383538
and the tracks are aligned within the <a>grid container</a>
35393539
according to the 'align-content' and 'justify-content' properties.
3540-
<span class="note">Note: This can introduce extra space within or between tracks.</span>
3541-
When introducing space within tracks,
3542-
only tracks with an ''grid-template-rows/auto'' <a>max track sizing function</a> accept space.
3540+
3541+
Note: This can introduce extra space between tracks,
3542+
potentially enlarging the grid area of any grid items spanning the gaps
3543+
beyond the space allotted to during track sizing.
35433544
</ol>
35443545

35453546
Once the size of each <a>grid area</a> is thus established,
@@ -3600,13 +3601,14 @@ Track Sizing Algorithm</h3>
36003601
and which will eventually be the track's final size,
36013602
and a <dfn>growth limit</dfn>,
36023603
a <<length>> which provides a desired maximum size for the <a>base size</a>.
3603-
There are 4 steps:
3604+
There are 5 steps:
36043605

36053606
<ol>
36063607
<li><a href="#algo-init">Initialize Track Sizes</a>
36073608
<li><a href="#algo-content">Resolve Intrinsic Track Sizes</a>
36083609
<li><a href="#algo-grow-tracks">Maximize Tracks</a>
3609-
<li><a href="#algo-flex-tracks">Stretch Flexible Tracks</a>
3610+
<li><a href="#algo-flex-tracks">Expand Flexible Tracks</a>
3611+
<li><a href="#algo-stretch">Expand Stretched <css>auto</css> Tracks</a>
36103612
</ol>
36113613

36123614
<h3 id="algo-init">
@@ -3926,7 +3928,7 @@ Maximize Tracks</h3>
39263928
when it's sized to its <a property lt=max-width>max-width/height</a>.
39273929

39283930
<h3 id="algo-flex-tracks">
3929-
Stretch Flexible Tracks</h3>
3931+
Expand Flexible Tracks</h3>
39303932

39313933
This step sizes flexible tracks
39323934
using the largest value it can assign to an ''fr''
@@ -4010,6 +4012,14 @@ Find the Size of an ''fr''</h4>
40104012
Return the <a>hypothetical fr size</a>.
40114013
</ol>
40124014

4015+
<h3 id="algo-flex-tracks">
4016+
Stretch <css>auto</css> Tracks</h3>
4017+
4018+
This step sizes expands tracks that have
4019+
an ''grid-template-columns/auto'' <a>max track sizing function</a>
4020+
by dividing any remaining positive, <a>definite</a> <a>free space</a>
4021+
equally amongst them.
4022+
40134023
<!--
40144024
████████ ████████ ███ ██████ ██ ██ ████████ ██ ██ ████████ ████ ██ ██ ██████
40154025
██ ██ ██ ██ ██ ██ ██ ███ ███ ██ ███ ██ ██ ██ ███ ██ ██ ██

0 commit comments

Comments
 (0)