Skip to content

Commit ea3bbc2

Browse files
committed
[css-grid-2] More cross-linking.
1 parent da04c63 commit ea3bbc2

File tree

1 file changed

+57
-53
lines changed

1 file changed

+57
-53
lines changed

css-grid-2/Overview.bs

+57-53
Original file line numberDiff line numberDiff line change
@@ -1494,7 +1494,7 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
14941494

14951495
These properties specify,
14961496
as a space-separated <dfn export>track list</dfn>,
1497-
the line names and <a>track sizing functions</a> of the <a>grid</a>.
1497+
the [=line names=] and <a>track sizing functions</a> of the <a>grid</a>.
14981498
The 'grid-template-columns' property specifies the <a>track list</a> for the grid's columns,
14991499
while 'grid-template-rows' specifies the <a>track list</a> for the grid's rows.
15001500

@@ -1512,7 +1512,7 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
15121512
<dt><dfn id="track-listing"><<track-list>> | <<auto-track-list>></dfn>
15131513
<dd>
15141514
Specifies the <a>track list</a> as a series of <a>track sizing functions</a>
1515-
and line names.
1515+
and [=line names=].
15161516
Each <dfn dfn lt="track sizing function|sizing function">track sizing function</dfn> can be specified as a length,
15171517
a percentage of the <a>grid container</a>’s size,
15181518
a measurement of the contents occupying the column or row,
@@ -1525,26 +1525,28 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
15251525
<dt><dfn id="subgrid-listing">subgrid <<line-name-list>>?</dfn>
15261526
<dd>
15271527
The <dfn value for="grid-template-rows, grid-template-columns">subgrid</dfn> value
1528-
indicates that the grid will adopt the spanned portion of its parent grid in that axis
1528+
indicates that the grid will adopt the spanned portion
1529+
of its [=parent grid=] in that axis
15291530
(the <dfn dfn for local-lt="subgridded">subgridded axis</dfn>).
15301531
Rather than being specified explicitly,
15311532
the sizes of the grid rows/columns
1532-
will be taken from the parent grid's definition,
1533+
will be taken from the [=parent grid=]'s definition,
15331534
and the <a>subgrid</a>’s items will participate
15341535
in the <a href="https://www.w3.org/TR/css-grid-1/#algo-content">intrinsic size calculations</a> ([[css-grid-1#algo-content]])
1535-
of any tracks shared with the parent grid.
1536+
of any tracks shared with the [=parent grid=].
15361537
Essentially,
15371538
<a>subgrids</a> provide the ability to pass grid parameters down through nested elements,
1538-
and content-based sizing information back up to their parent grid.
1539+
and content-based sizing information back up to their [=parent grid=].
15391540

1540-
The <<line-name-list>> argument allows local naming of the grid lines propagated from the parent grid:
1541+
The <<line-name-list>> argument allows local naming of
1542+
the grid lines shared with the [=parent grid=]:
15411543
if a <<line-name-list>> is given,
15421544
the specified <<line-names>>s are assigned to
1543-
the lines of the subgrid’s <a>explicit grid</a>,
1545+
the lines of the [=subgrid=]’s [=explicit grid=],
15441546
one per line, starting with line 1.
15451547
Excess <<line-names>> are ignored.
15461548

1547-
If there is no parent grid,
1549+
If there is no [=parent grid=],
15481550
this value is equivalent to
15491551
the initial value, ''grid-template-rows/none'',
15501552
and the [=grid container=] is not a [=subgrid=].
@@ -1756,7 +1758,7 @@ Naming Grid Lines: the <css>[<<custom-ident>>*]</css> syntax</h4>
17561758
</figure>
17571759
</div>
17581760

1759-
A line name cannot be <css>span</css> or <css>auto</css>,
1761+
A [=line name=] cannot be <css>span</css> or <css>auto</css>,
17601762
i.e. the <<custom-ident>> in the <<line-names>> production
17611763
excludes the keywords <css>span</css> and <css>auto</css>.
17621764

@@ -1828,9 +1830,9 @@ Syntax of ''repeat()''</h5>
18281830
but requires <a>definite</a> track sizes so that the number of repetitions can be calculated.
18291831
It can only appear once in the <a>track list</a>,
18301832
but the same <a>track list</a> can also contain <<fixed-repeat>>s.
1831-
* The <<name-repeat>> variant is for adding line names to [=subgrids=].
1833+
* The <<name-repeat>> variant is for adding [=line names=] to [=subgrids=].
18321834
It can only be used with the ''grid-template-rows/subgid'' keyword
1833-
and cannot specify track sizes, only line names.
1835+
and cannot specify track sizes, only [=line names=].
18341836

18351837
If a ''repeat()'' function that is not a <<name-repeat>>
18361838
ends up placing two <<line-names>> adjacent to each other,
@@ -1842,7 +1844,8 @@ Repeat-to-fill: ''auto-fill'' and ''auto-fit'' repetitions</h5>
18421844

18431845
On a [=subgridded axis=],
18441846
the ''auto-fill'' keyword is only valid once per <<line-name-list>>,
1845-
and repeats enough times for the name list to match the subgrid’s specified <a>grid span</a>
1847+
and repeats enough times for the name list to match
1848+
the [=subgrid=]’s specified <a>grid span</a>
18461849
(falling back to 0 if the span is already fulfilled).
18471850

18481851
Otherwise on a [=standalone axis=],
@@ -2136,8 +2139,8 @@ Resolved Value of a Subgridded Track Listing</h5>
21362139
serialized as the ''subgrid'' keyword
21372140
followed by a list representing each of its lines
21382141
as a [=line name set=] of all the line's names
2139-
explicitly defined on the subgrid
2140-
(not including those adopted from the parent grid),
2142+
explicitly defined on the [=subgrid=]
2143+
(not including those adopted from the [=parent grid=]),
21412144
without using the ''repeat()'' notation.
21422145

21432146
<div class="example">
@@ -2171,7 +2174,7 @@ Resolved Value of a Subgridded Track Listing</h5>
21712174
"shortest equivalent serialization" principle
21722175
by serializing empty trailing [=line name sets=],
21732176
as the trailing [=line name sets=] provide potentially-useful information
2174-
about how many tracks the subgrid is spanning.
2177+
about how many tracks the [=subgrid=] is spanning.
21752178

21762179
<!--
21772180
██████ ████████ ████ ████████ ███ ████████ ████████ ███ ██████
@@ -3508,15 +3511,15 @@ Subgrids</h2>
35083511
<ul style="list-style-type: lower-alpha">
35093512
<li id="subgrid-tracks">
35103513
Placing the <a>subgrid</a>
3511-
creates a correspondence between its subgridded tracks
3512-
and those that it spans in its parent grid.
3513-
The grid lines thus shared between the subgrid and its parent
3514+
creates a correspondence between its [=subgridded=] tracks
3515+
and those that it spans in its [=parent grid=].
3516+
The grid lines thus shared between the [=subgrid=] and its parent
35143517
form the subgrid’s <a>explicit grid</a>,
3515-
and its track sizes are governed by the parent grid.
3518+
and its track sizes are governed by the [=parent grid=].
35163519

35173520
<li id="subgrid-span">
35183521
The number of explicit tracks in the <a>subgrid</a>
3519-
in a subgridded dimension
3522+
in a [=subgridded=] dimension
35203523
always corresponds to the number of <a>grid tracks</a>
35213524
that it spans in its parent <a>grid</a>:
35223525

@@ -3538,24 +3541,24 @@ Subgrids</h2>
35383541
<li id="subgrid-indexing">
35393542
The <a>grid-placement properties</a> of the <a>subgrid</a>’s <a>grid items</a>
35403543
and the line numbers they use
3541-
are scoped to the lines covered by the subgrid,
3542-
exactly consistent with the lines outside the subgrid
3544+
are scoped to the lines covered by the [=subgrid=],
3545+
exactly consistent with the lines outside the [=subgrid=]
35433546
being excluded from its <a>explicit grid</a>.
3544-
E.g. numeric indices count starting from the first line of the subgrid
3545-
rather than the first line of the parent grid.
3547+
E.g. numeric indices count starting from the first line of the [=subgrid=]
3548+
rather than the first line of the [=parent grid=].
35463549

35473550
Line numbering and placement rules
3548-
obey the subgrid’s own <a>writing mode</a>,
3551+
obey the [=subgrid=]’s own <a>writing mode</a>,
35493552
just as they would for a nested independent grid.
35503553

35513554
<li id="subgrid-line-name-inheritance">
35523555
Since <a>subgrids</a> can be placed before their contents are placed,
3553-
the subgridded lines
3554-
automatically receive the explicit line names
3556+
the [=subgridded=] lines
3557+
automatically receive the [=explicitly-created line names=]
35553558
specified on the corresponding lines of the parent <a>grid</a>.
35563559

35573560
These names are in <em>addition</em> to
3558-
any line names specified locally on the subgrid.
3561+
any [=line names=] specified locally on the [=subgrid=].
35593562

35603563
<li id="subgrid-area-inheritance">
35613564
When a <a>subgrid</a> overlaps a <a>named grid area</a> in its parent
@@ -3576,7 +3579,7 @@ Subgrids</h2>
35763579
to the [=line name=] assignments of the parent <a>grid</a>.
35773580

35783581
These names are also in <em>addition</em> to
3579-
any line names specified locally on the subgrid.
3582+
any [=line names=] specified locally on the [=subgrid=].
35803583

35813584
<div class="example">
35823585
In the following example,
@@ -3619,19 +3622,20 @@ Subgrids</h2>
36193622
.inner = [center info-start] [info-end photos-start] [main-end photos-end]
36203623
</pre>
36213624

3622-
Notice that all the explicit names inherit straight through to .inner,
3623-
but the implicit names are calculated based on
3624-
each subgrid's overlap of the original <a>named grid area</a>.
3625+
Notice that all the [=explicitly-created names=]
3626+
inherit straight through to .inner,
3627+
but the [=implicitly-created names=] are calculated based on
3628+
each [=subgrid=]'s overlap of the original <a>named grid area</a>.
36253629
</div>
36263630

36273631
<li id="subgrid-implicit">
36283632
The <a>subgrid</a> does not have any <a>implicit grid tracks</a>
3629-
in the subgridded dimension(s).
3633+
in the [=subgridded=] dimension(s).
36303634
Hypothetical <a>implicit grid lines</a> are used to resolve placement
36313635
as usual when the <a>explicit grid</a> does not have enough lines;
36323636
however
36333637
each <a>grid item</a>’s <a>grid area</a>
3634-
is <a lt="clamp a grid area">clamped</a> to the subgrid’s <a>explicit grid</a>
3638+
is <a lt="clamp a grid area">clamped</a> to the [=subgrid=]’s <a>explicit grid</a>
36353639
(using the same procedure as for clamping placement in an overly-large grid).
36363640

36373641
<div class="example">
@@ -3640,13 +3644,13 @@ Subgrids</h2>
36403644
</div>
36413645

36423646
<li id="subgrid-size-contribution">
3643-
The <a>subgrid</a> itself lays out as an ordinary <a>grid item</a> in its parent grid,
3647+
The <a>subgrid</a> itself lays out as an ordinary <a>grid item</a> in its [=parent grid=],
36443648
but acts as if it was completely empty for track sizing purposes
3645-
in the subgridded dimension.
3649+
in the [=subgridded=] dimension.
36463650

36473651
<li id="subgrid-item-contribution">
36483652
The <a>subgrid</a>'s own <a>grid items</a> participate
3649-
in the sizing of its parent grid in the subgridded dimension(s)
3653+
in the sizing of its in the [=subgridded=] dimension(s)
36503654
and are aligned to it in those dimensions.
36513655

36523656
<p id="subgrid-margins">
@@ -3655,7 +3659,7 @@ Subgrids</h2>
36553659
are applied as an extra layer of (potentially negative) margin
36563660
to the items at those edges.
36573661
This extra layer of “margin” accumulates
3658-
through multiple levels of subgrids.
3662+
through multiple levels of [=subgrids=].
36593663

36603664
<div class="example">
36613665
For example, if we have a 3&times;3 grid with the following tracks:
@@ -3688,21 +3692,21 @@ Subgrids</h2>
36883692
<p id="subgrid-gaps">
36893693
Meanwhile,
36903694
half the size of the difference between
3691-
the subgrid’s <a>gutters</a> ('row-gap'/'column-gap')
3692-
and its parent grid’s <a>gutters</a>
3695+
the [=subgrid=]’s <a>gutters</a> ('row-gap'/'column-gap')
3696+
and its [=parent grid=]’s <a>gutters</a>
36933697
is applied as an extra layer of (potentially negative) margin
36943698
to the items not at those edges.
36953699
This extra layer of “margin” also accumulates
3696-
through multiple levels of subgrids.
3700+
through multiple levels of [=subgrids=].
36973701
A value of ''row-gap/normal''
3698-
indicates that the subgrid has the same size <a>gutters</a>
3699-
as its parent grid,
3702+
indicates that the [=subgrid=] has the same size <a>gutters</a>
3703+
as its [=parent grid=],
37003704
i.e. the applied difference is zero.
37013705

37023706
Note: The end result will be that the parent’s grid tracks
37033707
will be sized as specified,
3704-
and that the subgrid’s gaps will visually center-align
3705-
with the parent grid’s gaps.
3708+
and that the [=subgrid=]’s [=gutters=] will visually center-align
3709+
with the [=parent grid=]’s [=gutters=].
37063710

37073711
<div class="example">
37083712
<p>For example,
@@ -3807,7 +3811,7 @@ Subgrids</h2>
38073811
</div>
38083812

38093813
<li id="subgrid-edge-placeholders">
3810-
For each edge of a non-empty subgrid,
3814+
For each edge of a non-empty [=subgrid=],
38113815
to account for the subgrid’s margin/border/padding at that edge,
38123816
a hypothetical item is contributed to the track sizing algorithm
38133817
for each span size
@@ -3822,10 +3826,10 @@ Subgrids</h2>
38223826
Similarly, the hypothetical item’s span is taken
38233827
from that same real item’s span,
38243828
and inflated by the number of empty tracks between it
3825-
and the relevant subgrid’s edge(s).
3829+
and the relevant [=subgrid=]’s edge(s).
38263830

38273831
Note: This step can be shortcut if
3828-
the tracks closest to the subgrid’s edges contain real items,
3832+
the tracks closest to the [=subgrid=]’s edges contain real items,
38293833
which would have already
38303834
<a href="#subgrid-item-contribution">accounted for the subgrid’s margin/border/padding</a>
38313835
as described above.
@@ -3859,15 +3863,15 @@ Subgrids</h2>
38593863
</div>
38603864

38613865
<li id="subgrid-box-alignment">
3862-
The <a>subgrid</a> is always stretched in its subgridded dimension(s):
3866+
The <a>subgrid</a> is always stretched in its [=subgridded=] dimension(s):
38633867
the 'align-self'/'justify-self' properties on it are ignored,
38643868
as are any specified width/height constraints.
38653869

38663870
<li id="subgrid-grid-alignment">
38673871
Layoutwise, the <a>subgrid</a>’s <a>grid</a>
38683872
is always aligned with the corresponding section of the parent <a>grid</a>;
38693873
the 'align-content'/'justify-content' properties on it are also ignored
3870-
in the subgridded dimension.
3874+
in the [=subgridded=] dimension.
38713875

38723876
<li id="subgrid-overflow">
38733877
The 'overflow' property does apply to <a>subgrids</a>,
@@ -4326,7 +4330,7 @@ Grid Sizing Algorithm</h3>
43264330
(see <a href="https://www.w3.org/TR/css-grid-1/#algo-content">Resolve Intrinsic Track Sizes</a>)
43274331
is taken under the provision
43284332
of having determined its track sizing only up to the same point
4329-
in the Grid Sizing Algorithm as this parent grid itself.
4333+
in the Grid Sizing Algorithm as this itself.
43304334
E.g. for the first pass through this step,
43314335
the item will have its tracks sized only through this first step;
43324336
if a second pass of this step is triggered then
@@ -4424,7 +4428,7 @@ Grid Sizing Algorithm</h3>
44244428

44254429
Note: Track sizing in a [=subgridded=] dimension
44264430
treats each item in a given track in that axis
4427-
as members of the parent grid.
4431+
as members of the [=parent grid=].
44284432
This interlacing requires that grid sizing
44294433
drill down per axis into [=subgrids=],
44304434
rather than completing both axes as it recurses.

0 commit comments

Comments
 (0)