Skip to content

Commit 7d18b38

Browse files
committed
[css-grid] track sizing function + sizing function, fix up some flex factor definitions, wordsmith some algorithm bits. hopefully nothing of significance
1 parent f874b46 commit 7d18b38

2 files changed

Lines changed: 114 additions & 60 deletions

File tree

css-grid/Overview.bs

Lines changed: 53 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -716,13 +716,15 @@ Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties</h
716716

717717
These properties specify,
718718
as a space-separated <dfn export>track list</dfn>,
719-
the line names and track <a>sizing functions</a> of the <a>grid</a>.
720-
Each <dfn export>sizing function</dfn> can be specified as a length,
719+
the line names and <a>track sizing functions</a> of the <a>grid</a>.
720+
Each <dfn title="track sizing function|sizing function">track sizing function</dfn> can be specified as a length,
721721
a percentage of the <a>grid container</a>’s size,
722722
a measurement of the contents occupying the column or row,
723723
or a fraction of the free space in the grid.
724724
It can also be specified as a range using the ''minmax()'' notation,
725-
which can combine any of the previously mentioned mechanisms to define a min and max size for the column or row.
725+
which can combine any of the previously mentioned mechanisms
726+
to specify separate <i title="min track sizing function">min</i>
727+
and <i>max track sizing functions</i> for the column or row.
726728

727729
The 'grid-template-columns' property specifies the <a>track list</a> for the grid's columns,
728730
while 'grid-template-rows' specifies the <a>track list</a> for the grid's rows.
@@ -754,7 +756,7 @@ Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties</h
754756
<dt><dfn><<flex>></dfn>
755757
<dd>
756758
A non-negative dimension with the unit ''fr'' specifying the track's <dfn noexport>flex factor</dfn>.
757-
Each <<flex>> value takes a share of the remaining space in proportion to its value.
759+
Each <<flex>>-sized track takes a share of the remaining space in proportion to its <i>flex factor</i>.
758760
See <a href="#fr-unit">Flexible Lengths</a> for more details.
759761

760762
<dt><dfn>max-content</dfn>
@@ -774,6 +776,9 @@ Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties</h
774776
and less than or equal to <var>max</var>.
775777
If <var>max</var> &lt; <var>min</var>,
776778
then <var>max</var> is ignored and ''minmax(min,max)'' is treated as <var>min</var>.
779+
As a maximum, a <<flex>> value sets the track's <i>flex factor</i>.
780+
As a minimum, it is treated as zero
781+
(or ''min-content'', if the <i>grid container</i> is sized under a <i>min-size constraint</i>).
777782

778783
<dt><dfn>auto</dfn>
779784
<dd>
@@ -929,7 +934,7 @@ Flexible Lengths: the ''fr'' unit</h4>
929934
A <dfn export>flexible length</dfn> or <dfn><<flex>></dfn> is a dimension with the ''fr'' unit,
930935
which represents a fraction of the <a>free space</a> in the <a>grid container</a>.
931936

932-
The distribution of <a>free space</a> occurs after all non-flexible <a>sizing functions</a> have reached their maximum.
937+
The distribution of <a>free space</a> occurs after all non-flexible <a>track sizing functions</a> have reached their maximum.
933938
The total size of such rows or columns is subtracted from the available space, yielding the <dfn export>free space</dfn>,
934939
which is then divided among the flex-sized rows and columns in proportion to their <i>flex factor</i>.
935940

@@ -3303,19 +3308,18 @@ Rewritten Grid Layout Algorithm</h2>
33033308
Note: We are exploring alternate ways of writing the same algorithm at the moment.
33043309
All three of these layout algorithms are intended to produce identical results.
33053310

3306-
Each track has a <dfn title="minimum track size">minimum</dfn> and
3307-
a <dfn title="maximum track size">maximum</dfn> <i>sizing function</i>
3311+
Each track has specified <dfn title="minimum track size">minimum</dfn> and
3312+
<dfn title="maximum track size">maximum</dfn> <i>sizing functions</i>
33083313
(which may be the same).
33093314
Each <i>sizing function</i> is either:
33103315

33113316
<ul>
3312-
<li>A fixed size (<<length>> or resolved <<percentage>>).
3313-
<li>An intrinsic size (''min-content'' or ''max-content'').
3314-
<li>A flexible size (<<flex>>).
3317+
<li>A <dfn>fixed sizing function</dfn> (<<length>> or resolveable <<percentage>>).
3318+
<li>An <dfn>intrinsic sizing function</dfn> (''min-content'' or ''max-content'').
3319+
<li>A <dfn>flexible sizing function</dfn> (<<flex>>).
33153320
</ul>
33163321

33173322
The grid layout algorithm defines how to resolve these sizing constraints into used track sizes.
3318-
The grid items are then laid out into their respective <i>grid areas</i>.
33193323

33203324
<ol>
33213325
<li>First, the <i>track sizing algorithm</i> is used to resolve the sizes of the grid columns.
@@ -3327,7 +3331,14 @@ Rewritten Grid Layout Algorithm</h2>
33273331
What is this solving and is this the right solution?
33283332
</ol>
33293333

3330-
The remainder of this section is the <dfn>track sizing algorithm</dfn>. There are four steps:
3334+
Once the size of each <i>grid area</i> is thus established,
3335+
the <i>grid items</i> are laid out into their respective containing blocks.
3336+
3337+
The remainder of this section is the <dfn>track sizing algorithm</dfn>.
3338+
It calculates from the <i title="min track sizing function">min</i> and <i>max track sizing functions</i>
3339+
a corresponding <i>minimum track size</i> and <i>maximum track size</i>
3340+
and finally a used track size.
3341+
There are four steps:
33313342
<ol>
33323343
<li><a href="#init-sizes">Initializing Used Sizes</a>
33333344
<li><a href="#resolve-intrinsic">Resolving Intrinsic Track Sizes</a>
@@ -3338,40 +3349,54 @@ Rewritten Grid Layout Algorithm</h2>
33383349
<h3 id='init-sizes'>
33393350
Initialize Minimum and Maximum Track Sizes</h3>
33403351

3341-
For fixed track sizes,
3342-
use that resolved size.
3352+
Since the size contribution of an item to an intrinsically-sized track depends
3353+
depends on the sizes of any other tracks it spans,
3354+
each track size is associated with an absolute length as follows
3355+
before calculating intrinsic sizes:
33433356

3344-
For intrinsic track sizes,
3345-
use an initial <i>minimum track size</i> of zero and an initial <i>maximum track size</i> of infinity.
3357+
<ul>
3358+
<li>
3359+
For fixed track sizes,
3360+
resolve to an absolute length and use that size.
3361+
<li>
3362+
For intrinsic track sizes,
3363+
use an initial <i>minimum track size</i> of zero and an initial <i>maximum track size</i> of infinity.
33463364

3347-
For flexible track sizes,
3348-
use an initial <i>maximum track size</i> of infinity.
3365+
<li>
3366+
For flexible track sizes,
3367+
use an initial <i>maximum track size</i> of infinity.
3368+
</ul>
33493369

3350-
A flexible <i>minimum track size</i> is treated exactly as a fixed track size of zero;
3351-
except when the <i>grid container</i> is being sized under a <i>min-content constraint</i>,
3370+
A track with a flexible <em>minimum</em> <i>sizing function</i>
3371+
is treated exactly as if it had a fixed <i>min track sizing function</i> of zero;
3372+
except when the <i>grid container</i> is being sized under a <i>min-content constraint</i>,
33523373
in which case it is treated exactly as ''min-content''.
33533374
<span class='issue'>This seems correct, but should be checked because it wasn't in the original algorithm.</span>
33543375

3355-
These initial sizes will be resolved in subsequent steps.
3356-
33573376
<h3 id="resolve-intrinsic">
33583377
Resolve Intrinsic Track Sizes</h3>
33593378

3360-
The following steps resolve intrinsic track sizes to used lengths.
3379+
The following steps resolve intrinsic track sizes to absolute lengths.
33613380
First it resolves those sizes based on items that are contained wholly within a single track.
33623381
Then it gradually adds in the space requirements of items that span multiple tracks,
3363-
evenly increasing their sizes insofar as possible.
3382+
evenly distributing the extra space across those tracks
3383+
insofar as possible.
33643384

33653385
<ol>
33663386
<li>
3367-
For each track with an intrinsic size, consider the items with a span of 1:
3387+
For each track with an intrinsic <i>track sizing function</i>,
3388+
consider the items in it with a span of 1:
33683389
<ul>
3369-
<li>Set any ''min-content'' track size to the maximum of their <i>min-size contributions</i>.
3370-
<li>Set any ''max-content'' track size to the maximum of their <i>max-size contributions</i>.
3390+
<li>
3391+
If the track has any ''min-content'' <i>sizing functions</i>,
3392+
set the used size to the maximum of their <i>min-size contributions</i>.
3393+
<li>
3394+
If the track has any ''max-content'' <i>sizing functions</i>,
3395+
set the used size to the maximum of their <i>max-size contributions</i>.
33713396
</ul>
33723397
<li>
33733398
Next, consider the items with a span of 2
3374-
and that do not span a track with a flexible maximum size:
3399+
that do not span a track with a <i>flexible sizing function</i>:
33753400
<ol>
33763401
<li>
33773402
First increase any ''min-content'' <i>minimum track sizes</i>

0 commit comments

Comments
 (0)