@@ -1494,7 +1494,7 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
1494
1494
1495
1495
These properties specify,
1496
1496
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> .
1498
1498
The 'grid-template-columns' property specifies the <a>track list</a> for the grid's columns,
1499
1499
while 'grid-template-rows' specifies the <a>track list</a> for the grid's rows.
1500
1500
@@ -1512,7 +1512,7 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
1512
1512
<dt> <dfn id="track-listing"><<track-list>> | <<auto-track-list>></dfn>
1513
1513
<dd>
1514
1514
Specifies the <a>track list</a> as a series of <a>track sizing functions</a>
1515
- and line names.
1515
+ and [= line names=] .
1516
1516
Each <dfn dfn lt="track sizing function|sizing function">track sizing function</dfn> can be specified as a length,
1517
1517
a percentage of the <a>grid container</a> ’s size,
1518
1518
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
1525
1525
<dt> <dfn id="subgrid-listing">subgrid <<line-name-list>>?</dfn>
1526
1526
<dd>
1527
1527
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
1529
1530
(the <dfn dfn for local-lt="subgridded">subgridded axis</dfn> ).
1530
1531
Rather than being specified explicitly,
1531
1532
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,
1533
1534
and the <a>subgrid</a> ’s items will participate
1534
1535
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=] .
1536
1537
Essentially,
1537
1538
<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=] .
1539
1540
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=] :
1541
1543
if a <<line-name-list>> is given,
1542
1544
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=] ,
1544
1546
one per line, starting with line 1.
1545
1547
Excess <<line-names>> are ignored.
1546
1548
1547
- If there is no parent grid,
1549
+ If there is no [= parent grid=] ,
1548
1550
this value is equivalent to
1549
1551
the initial value, ''grid-template-rows/none'' ,
1550
1552
and the [=grid container=] is not a [=subgrid=] .
@@ -1756,7 +1758,7 @@ Naming Grid Lines: the <css>[<<custom-ident>>*]</css> syntax</h4>
1756
1758
</figure>
1757
1759
</div>
1758
1760
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> ,
1760
1762
i.e. the <<custom-ident>> in the <<line-names>> production
1761
1763
excludes the keywords <css> span</css> and <css> auto</css> .
1762
1764
@@ -1828,9 +1830,9 @@ Syntax of ''repeat()''</h5>
1828
1830
but requires <a>definite</a> track sizes so that the number of repetitions can be calculated.
1829
1831
It can only appear once in the <a>track list</a> ,
1830
1832
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=] .
1832
1834
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=] .
1834
1836
1835
1837
If a ''repeat()'' function that is not a <<name-repeat>>
1836
1838
ends up placing two <<line-names>> adjacent to each other,
@@ -1842,7 +1844,8 @@ Repeat-to-fill: ''auto-fill'' and ''auto-fit'' repetitions</h5>
1842
1844
1843
1845
On a [=subgridded axis=] ,
1844
1846
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>
1846
1849
(falling back to 0 if the span is already fulfilled).
1847
1850
1848
1851
Otherwise on a [=standalone axis=] ,
@@ -2136,8 +2139,8 @@ Resolved Value of a Subgridded Track Listing</h5>
2136
2139
serialized as the ''subgrid'' keyword
2137
2140
followed by a list representing each of its lines
2138
2141
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=] ),
2141
2144
without using the ''repeat()'' notation.
2142
2145
2143
2146
<div class="example">
@@ -2171,7 +2174,7 @@ Resolved Value of a Subgridded Track Listing</h5>
2171
2174
"shortest equivalent serialization" principle
2172
2175
by serializing empty trailing [=line name sets=] ,
2173
2176
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.
2175
2178
2176
2179
<!--
2177
2180
██████ ████████ ████ ████████ ███ ████████ ████████ ███ ██████
@@ -3508,15 +3511,15 @@ Subgrids</h2>
3508
3511
<ul style="list-style-type: lower-alpha">
3509
3512
<li id="subgrid-tracks">
3510
3513
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
3514
3517
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=] .
3516
3519
3517
3520
<li id="subgrid-span">
3518
3521
The number of explicit tracks in the <a>subgrid</a>
3519
- in a subgridded dimension
3522
+ in a [= subgridded=] dimension
3520
3523
always corresponds to the number of <a>grid tracks</a>
3521
3524
that it spans in its parent <a>grid</a> :
3522
3525
@@ -3538,24 +3541,24 @@ Subgrids</h2>
3538
3541
<li id="subgrid-indexing">
3539
3542
The <a>grid-placement properties</a> of the <a>subgrid</a> ’s <a>grid items</a>
3540
3543
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=]
3543
3546
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=] .
3546
3549
3547
3550
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> ,
3549
3552
just as they would for a nested independent grid.
3550
3553
3551
3554
<li id="subgrid-line-name-inheritance">
3552
3555
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=]
3555
3558
specified on the corresponding lines of the parent <a>grid</a> .
3556
3559
3557
3560
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=] .
3559
3562
3560
3563
<li id="subgrid-area-inheritance">
3561
3564
When a <a>subgrid</a> overlaps a <a>named grid area</a> in its parent
@@ -3576,7 +3579,7 @@ Subgrids</h2>
3576
3579
to the [=line name=] assignments of the parent <a>grid</a> .
3577
3580
3578
3581
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=] .
3580
3583
3581
3584
<div class="example">
3582
3585
In the following example,
@@ -3619,19 +3622,20 @@ Subgrids</h2>
3619
3622
.inner = [center info-start] [info-end photos-start] [main-end photos-end]
3620
3623
</pre>
3621
3624
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> .
3625
3629
</div>
3626
3630
3627
3631
<li id="subgrid-implicit">
3628
3632
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).
3630
3634
Hypothetical <a>implicit grid lines</a> are used to resolve placement
3631
3635
as usual when the <a>explicit grid</a> does not have enough lines;
3632
3636
however
3633
3637
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>
3635
3639
(using the same procedure as for clamping placement in an overly-large grid).
3636
3640
3637
3641
<div class="example">
@@ -3640,13 +3644,13 @@ Subgrids</h2>
3640
3644
</div>
3641
3645
3642
3646
<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=] ,
3644
3648
but acts as if it was completely empty for track sizing purposes
3645
- in the subgridded dimension.
3649
+ in the [= subgridded=] dimension.
3646
3650
3647
3651
<li id="subgrid-item-contribution">
3648
3652
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)
3650
3654
and are aligned to it in those dimensions.
3651
3655
3652
3656
<p id="subgrid-margins">
@@ -3655,7 +3659,7 @@ Subgrids</h2>
3655
3659
are applied as an extra layer of (potentially negative) margin
3656
3660
to the items at those edges.
3657
3661
This extra layer of “margin” accumulates
3658
- through multiple levels of subgrids.
3662
+ through multiple levels of [= subgrids=] .
3659
3663
3660
3664
<div class="example">
3661
3665
For example, if we have a 3×3 grid with the following tracks:
@@ -3688,21 +3692,21 @@ Subgrids</h2>
3688
3692
<p id="subgrid-gaps">
3689
3693
Meanwhile,
3690
3694
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>
3693
3697
is applied as an extra layer of (potentially negative) margin
3694
3698
to the items not at those edges.
3695
3699
This extra layer of “margin” also accumulates
3696
- through multiple levels of subgrids.
3700
+ through multiple levels of [= subgrids=] .
3697
3701
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=] ,
3700
3704
i.e. the applied difference is zero.
3701
3705
3702
3706
Note: The end result will be that the parent’s grid tracks
3703
3707
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=] .
3706
3710
3707
3711
<div class="example">
3708
3712
<p> For example,
@@ -3807,7 +3811,7 @@ Subgrids</h2>
3807
3811
</div>
3808
3812
3809
3813
<li id="subgrid-edge-placeholders">
3810
- For each edge of a non-empty subgrid,
3814
+ For each edge of a non-empty [= subgrid=] ,
3811
3815
to account for the subgrid’s margin/border/padding at that edge,
3812
3816
a hypothetical item is contributed to the track sizing algorithm
3813
3817
for each span size
@@ -3822,10 +3826,10 @@ Subgrids</h2>
3822
3826
Similarly, the hypothetical item’s span is taken
3823
3827
from that same real item’s span,
3824
3828
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).
3826
3830
3827
3831
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,
3829
3833
which would have already
3830
3834
<a href="#subgrid-item-contribution">accounted for the subgrid’s margin/border/padding</a>
3831
3835
as described above.
@@ -3859,15 +3863,15 @@ Subgrids</h2>
3859
3863
</div>
3860
3864
3861
3865
<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):
3863
3867
the 'align-self' /'justify-self' properties on it are ignored,
3864
3868
as are any specified width/height constraints.
3865
3869
3866
3870
<li id="subgrid-grid-alignment">
3867
3871
Layoutwise, the <a>subgrid</a> ’s <a>grid</a>
3868
3872
is always aligned with the corresponding section of the parent <a>grid</a> ;
3869
3873
the 'align-content' /'justify-content' properties on it are also ignored
3870
- in the subgridded dimension.
3874
+ in the [= subgridded=] dimension.
3871
3875
3872
3876
<li id="subgrid-overflow">
3873
3877
The 'overflow' property does apply to <a>subgrids</a> ,
@@ -4326,7 +4330,7 @@ Grid Sizing Algorithm</h3>
4326
4330
(see <a href="https://www.w3.org/TR/css-grid-1/#algo-content">Resolve Intrinsic Track Sizes</a> )
4327
4331
is taken under the provision
4328
4332
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.
4330
4334
E.g. for the first pass through this step,
4331
4335
the item will have its tracks sized only through this first step;
4332
4336
if a second pass of this step is triggered then
@@ -4424,7 +4428,7 @@ Grid Sizing Algorithm</h3>
4424
4428
4425
4429
Note: Track sizing in a [=subgridded=] dimension
4426
4430
treats each item in a given track in that axis
4427
- as members of the parent grid.
4431
+ as members of the [= parent grid=] .
4428
4432
This interlacing requires that grid sizing
4429
4433
drill down per axis into [=subgrids=] ,
4430
4434
rather than completing both axes as it recurses.
0 commit comments