@@ -406,20 +406,20 @@ Overview</h2>
406406
407407 <ul>
408408 <li>
409- fixed, flexible, and content-based <a href=" #track-sizing"> track sizing functions</a>
409+ fixed, flexible, and content-based [[ #track-sizing| track sizing functions]]
410410 <li>
411- <a href=" #placement"> explicit item placement</a> via forwards (positive) and backwards (negative) numerical grid coordinates,
411+ [[ #placement| explicit item placement]] via forwards (positive) and backwards (negative) numerical grid coordinates,
412412 named grid lines, and named grid areas;
413- automatic item placement into empty areas, including <a href="#order-property">reordering with <css>order</css></a>
413+ automatic item placement into empty areas, including <a section href="#order-property">reordering with <css>order</css></a>
414414 <li>
415415 space-sensitive track repetition
416416 and
417417 automatic addition of rows or columns to accommodate additional content
418418 <li>
419419 control over alignment and spacing with
420- <a href=" #auto-margins"> margins</a> , <a>gutters</a> , and the <a href="http://www.w3.org/TR/css-align/">alignment properties</a>
420+ [[ #auto-margins| margins]] , <a>gutters</a> , and the <a href="http://www.w3.org/TR/css-align/">alignment properties</a>
421421 <li>
422- the ability to overlap content and <a href="#z-order">control layering with <css>z-index</css></a>
422+ the ability to overlap content and <a section href="#z-order">control layering with <css>z-index</css></a>
423423 </ul>
424424
425425 <a>Grid containers</a> can be nested or mixed with <a>flex containers</a>
@@ -498,7 +498,7 @@ Placing Items</h3>
498498 (analogous to <a>flex items</a> ),
499499 which are then assigned to predefined [=grid areas|areas=] in the <a>grid</a> .
500500 They can be explicitly placed using coordinates through the <a>grid-placement properties</a>
501- or implicitly placed into empty areas using <a href="# auto-placement">auto-placement</a> .
501+ or implicitly placed into empty areas using [= auto-placement=] .
502502 [[#placement]]
503503
504504 <div class="example">
@@ -537,11 +537,11 @@ Placing Items</h3>
537537<h3 id="overview-sizing">
538538Sizing the Grid</h3>
539539
540- Once the <a>grid items</a> have been <a href=" #placement"> placed</a> ,
540+ Once the <a>grid items</a> have been [[ #placement| placed]] ,
541541 the sizes of the <a>grid tracks</a> (rows and columns) are calculated,
542542 accounting for the sizes of their contents and/or available space as specified in the grid definition.
543543
544- The resulting sized grid is <a href=" #grid-align"> aligned</a> within the <a>grid container</a>
544+ The resulting sized grid is [[ #grid-align| aligned]] within the <a>grid container</a>
545545 according to the <a>grid container</a> ’s 'align-content' and 'justify-content' properties.
546546 [[#alignment]]
547547
@@ -611,7 +611,7 @@ Grid Lines</h3>
611611 They can be referred to by numerical index,
612612 or by an author-specified name.
613613 A <a>grid item</a> references the <a>grid lines</a> to determine its position within the <a>grid</a>
614- using the <a href=" #placement"> grid-placement properties</a> .
614+ using the [[ #placement| grid-placement properties]] .
615615
616616 <div class="example">
617617 The following two examples both create three column <a>grid lines</a> and four row <a>grid lines</a> .
@@ -653,7 +653,7 @@ Grid Tracks and Cells</h3>
653653 Each <a>grid track</a> is assigned a sizing function,
654654 which controls how wide or tall the column or row may grow,
655655 and thus how far apart its bounding <a>grid lines</a> are.
656- Adjacent <a>grid tracks</a> can be separated by <a href=" #gutters"> gutters</a>
656+ Adjacent <a>grid tracks</a> can be separated by [[ #gutters| gutters]]
657657 but are otherwise packed tightly.
658658
659659 A <dfn export>grid cell</dfn> is the intersection of a grid row and a grid column.
@@ -687,7 +687,7 @@ Grid Areas</h3>
687687 A <a>grid area</a> can be named explicitly using the 'grid-template-areas' property of the <a>grid container</a> ,
688688 or referenced implicitly by its bounding <a>grid lines</a> .
689689 A <a>grid item</a> is assigned to a <a>grid area</a>
690- using the <a href=" #placement"> grid-placement properties</a> .
690+ using the [[ #placement| grid-placement properties]] .
691691
692692 <div class="example">
693693 <pre>
@@ -1187,7 +1187,7 @@ Non-children Grid Items</h3>
11871187Reordered Grid Items: the 'order' property</h3>
11881188
11891189 The 'order' property also applies to <a>grid items</a> .
1190- It affects their <a href=" #grid-auto-flow-property"> auto-placement</a> and <a href=" #z-order"> painting order</a> .
1190+ It affects their [[ #grid-auto-flow-property| auto-placement]] and [[ #z-order| painting order]] .
11911191
11921192 Advisement: As with reordering flex items,
11931193 the 'order' property must only be used
@@ -1457,7 +1457,7 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
14571457 Indicates that no <a>explicit</a> grid tracks are created by this property
14581458 (though <a>explicit grid</a> tracks could still be created by 'grid-template-areas' ).
14591459
1460- Note: In the absence of an <a>explicit grid</a> any rows/columns will be <a href=" #implicit-grids"> implicitly generated</a> ,
1460+ Note: In the absence of an <a>explicit grid</a> any rows/columns will be [[ #implicit-grids| implicitly generated]] ,
14611461 and their size will be determined by the 'grid-auto-rows' and 'grid-auto-columns' properties.
14621462
14631463 <dt> <dfn id="track-listing"><<track-list>> | <<auto-track-list>></dfn>
@@ -1786,7 +1786,7 @@ Repeat-to-fill: ''auto-fill'' and ''auto-fit'' repetitions</h5>
17861786 </div>
17871787
17881788 The <dfn value for="repeat()">auto-fit</dfn> keyword behaves the same as ''auto-fill'' ,
1789- except that after <a href=" #auto-placement-algo"> grid item placement</a>
1789+ except that after [[ #auto-placement-algo| grid item placement]]
17901790 any empty repeated tracks are <a>collapsed</a> .
17911791 An empty track is one with no in-flow grid items placed into or spanning across it.
17921792 (This can result in <em> all</em> tracks being <a>collapsed</a> ,
@@ -2065,7 +2065,7 @@ Named Areas: the 'grid-template-areas' property</h3>
20652065 are defined by this property
20662066 (though <a>explicit grid</a> tracks could still be created by 'grid-template-columns' or 'grid-template-rows' ).
20672067
2068- Note: In the absence of an <a>explicit grid</a> any rows/columns will be <a href=" #implicit-grids"> implicitly generated</a> ,
2068+ Note: In the absence of an <a>explicit grid</a> any rows/columns will be [[ #implicit-grids| implicitly generated]] ,
20692069 and their size will be determined by the 'grid-auto-rows' and 'grid-auto-columns' properties.
20702070
20712071 <dt> <dfn><<string>>+</dfn>
@@ -2342,8 +2342,8 @@ Implicit Track Sizing: the 'grid-auto-rows' and 'grid-auto-columns' properties</
23422342 Initial : auto
23432343 Applies to : <a>grid containers</a>
23442344 Inherited : no
2345- Percentages : see <a href=" #track-sizing"> Track Sizing</a>
2346- Computed value : see <a href=" #track-sizing"> Track Sizing</a>
2345+ Percentages : see [[ #track-sizing| Track Sizing]]
2346+ Computed value : see [[ #track-sizing| Track Sizing]]
23472347 Animation type : by computed value type
23482348 </pre>
23492349
@@ -3532,7 +3532,7 @@ Gutters: the 'row-gap', 'column-gap', and 'gap' properties</h3>
35323532Aligning with <a value for="margin">auto</a> margins</h3>
35333533
35343534 <em> This section is non-normative.
3535- The normative definition of how margins affect grid items is in <a section href=" #layout-algorithm"></a> .</em>
3535+ The normative definition of how margins affect grid items is in [[ #layout-algorithm]] .</em>
35363536
35373537 Auto margins on <a>grid items</a> have an effect very similar to auto margins in block flow:
35383538
@@ -3920,7 +3920,7 @@ Track Sizing Terminology</h3>
39203920 The number of <a>grid tracks</a> crossed by a <a>grid item</a> in the applicable dimension.
39213921 </dl>
39223922
3923- Note: Remember that <a href=" #gutters"> gutters</a> are treated as fixed-size tracks--
3923+ Note: Remember that [[ #gutters| gutters]] are treated as fixed-size tracks--
39243924 tracks with their min and max sizing functions both set to the gutter’s used size--
39253925 for the purpose of the grid sizing algorithm.
39263926 Their widths need to be incorporated into
@@ -3940,11 +3940,11 @@ Track Sizing Algorithm</h3>
39403940 There are 5 steps:
39413941
39423942 <ol>
3943- <li> <a href=" #algo-init"> Initialize Track Sizes</a>
3944- <li> <a href=" #algo-content"> Resolve Intrinsic Track Sizes</a>
3945- <li> <a href=" #algo-grow-tracks"> Maximize Tracks</a>
3946- <li> <a href=" #algo-flex-tracks"> Expand Flexible Tracks</a>
3947- <li> <a href=" #algo-stretch"> Expand Stretched <css>auto</css> Tracks</a>
3943+ <li> [[ #algo-init| Initialize Track Sizes]]
3944+ <li> [[ #algo-content| Resolve Intrinsic Track Sizes]]
3945+ <li> [[ #algo-grow-tracks| Maximize Tracks]]
3946+ <li> [[ #algo-flex-tracks| Expand Flexible Tracks]]
3947+ <li> [[ #algo-stretch| Expand Stretched <css>auto</css> Tracks]]
39483948 </ol>
39493949
39503950<h3 id="algo-init">
@@ -4043,7 +4043,7 @@ Resolve Intrinsic Track Sizes</h3>
40434043
40444044 Note: Since <a>grid items</a> whose own size
40454045 depends on the size of an intrinsically-sized track
4046- <a href=" #row-align"> do not participate in baseline alignment</a> ,
4046+ [[ #row-align| do not participate in baseline alignment]] ,
40474047 they are not shimmed.
40484048
40494049 <li id="algo-single-span-items">
@@ -4109,7 +4109,7 @@ Resolve Intrinsic Track Sizes</h3>
41094109 Note: For items with a specified minimum size of ''min-width/auto'' (the initial value),
41104110 the <a>minimum contribution</a> is usually equivalent to
41114111 the <a>min-content contribution</a> --
4112- but can differ in some cases, see <a href=" #min-size-auto"></a> .
4112+ but can differ in some cases, see [[ #min-size-auto]] .
41134113 Also, <a>minimum contribution</a> ≤ <a>min-content contribution</a> ≤ <a>max-content contribution</a> .
41144114
41154115 <dt> For min-content maximums:
@@ -4145,7 +4145,7 @@ Resolve Intrinsic Track Sizes</h3>
41454145 <strong> For intrinsic minimums:</strong>
41464146 First increase the <a>base size</a> of tracks with
41474147 an <a lt="intrinsic sizing function">intrinsic</a> <a>min track sizing function</a>
4148- by <a href=" #extra-space"> distributing extra space</a> as needed
4148+ by [[ #extra-space| distributing extra space]] as needed
41494149 to accommodate these items’ <a>minimum contributions</a> .
41504150
41514151 If the grid container is being sized under a
@@ -4164,7 +4164,7 @@ Resolve Intrinsic Track Sizes</h3>
41644164 <strong> For content-based minimums:</strong>
41654165 Next continue to increase the <a>base size</a> of tracks with
41664166 a <a>min track sizing function</a> of ''min-content'' or ''max-content''
4167- by <a href=" #extra-space"> distributing extra space</a> as needed
4167+ by [[ #extra-space| distributing extra space]] as needed
41684168 to account for these items' <a>min-content contributions</a> .
41694169
41704170 <li id="track-size-max-content-min">
@@ -4174,13 +4174,13 @@ Resolve Intrinsic Track Sizes</h3>
41744174 continue to increase the <a>base size</a> of tracks with
41754175 a <a>min track sizing function</a> of
41764176 ''grid-template-columns/auto'' or ''max-content''
4177- by <a href=" #extra-space"> distributing extra space</a> as needed
4177+ by [[ #extra-space| distributing extra space]] as needed
41784178 to account for these items' <a>limited max-content contributions</a> .
41794179
41804180 In all cases,
41814181 continue to increase the <a>base size</a> of tracks with
41824182 a <a>min track sizing function</a> of ''max-content''
4183- by <a href=" #extra-space"> distributing extra space</a> as needed
4183+ by [[ #extra-space| distributing extra space]] as needed
41844184 to account for these items' <a>max-content contributions</a> .
41854185 <li>
41864186 If at this point any track’s <a>growth limit</a> is now less than its <a>base size</a> ,
@@ -4190,7 +4190,7 @@ Resolve Intrinsic Track Sizes</h3>
41904190 <strong> For intrinsic maximums:</strong>
41914191 Next increase the <a>growth limit</a> of tracks with
41924192 an <a lt="intrinsic sizing function">intrinsic</a> <a>max track sizing function</a>
4193- by <a href=" #extra-space"> distributing extra space</a> as needed
4193+ by [[ #extra-space| distributing extra space]] as needed
41944194 to account for these items' <a>min-content contributions</a> .
41954195 Mark any tracks whose <a>growth limit</a> changed
41964196 from infinite to finite in this step
@@ -4240,7 +4240,7 @@ Resolve Intrinsic Track Sizes</h3>
42404240 <strong> For max-content maximums:</strong>
42414241 Lastly continue to increase the <a>growth limit</a> of tracks with
42424242 a <a>max track sizing function</a> of ''max-content''
4243- by <a href=" #extra-space"> distributing extra space</a> as needed
4243+ by [[ #extra-space| distributing extra space]] as needed
42444244 to account for these items' <a>max-content contributions</a> .
42454245 However, limit the growth of any ''fit-content()'' tracks
42464246 by their ''fit-content()'' argument.
@@ -4334,12 +4334,12 @@ Distributing Extra Space Across Spanned Tracks</h4>
43344334
43354335 <ul>
43364336 <li>
4337- when <a href=" #track-size-intrinsic-min" >accommodating minimum contributions</a>
4338- or <a href=" #track-size-content-min" >accommodating min-content contributions</a> :
4337+ when <a href=#track-size-intrinsic-min>accommodating minimum contributions</a>
4338+ or <a href=#track-size-content-min>accommodating min-content contributions</a> :
43394339 any affected track that happens to also have an intrinsic <a>max track sizing function</a> ;
43404340 if there are no such tracks, then all affected tracks.
43414341 <li>
4342- when <a href=" #track-size-max-content-min" >accommodating max-content contributions</a> :
4342+ when <a href=#track-size-max-content-min>accommodating max-content contributions</a> :
43434343 any affected track that happens to also have a ''max-content'' <a>max track sizing function</a> ;
43444344 if there are no such tracks, then all affected tracks.
43454345 <li>
@@ -4414,7 +4414,7 @@ Expand Flexible Tracks</h3>
44144414 <dt> Otherwise, if the <a>free space</a> is a <a>definite</a> length:
44154415 <dd>
44164416 The used <a>flex fraction</a> is the result of
4417- <a href=" #algo-find-fr-size"> finding the size of an fr</a>
4417+ [[ #algo-find-fr-size| finding the size of an fr]]
44184418 using all of the <a>grid tracks</a>
44194419 and a <a>space to fill</a> of the <a>available grid space</a> .
44204420
@@ -4433,7 +4433,7 @@ Expand Flexible Tracks</h3>
44334433 <li>
44344434 For each [=grid item=] that crosses a flexible track,
44354435 the result of
4436- <a href=" #algo-find-fr-size"> finding the size of an fr</a>
4436+ [[ #algo-find-fr-size| finding the size of an fr]]
44374437 using all the grid tracks that the item crosses
44384438 and a <a>space to fill</a> of the item's <a>max-content contribution</a> .
44394439 </ul>
@@ -4581,7 +4581,7 @@ Sample Fragmentation Algorithm</h3>
45814581
45824582 <ol>
45834583 <li>
4584- Layout the grid following the <a section href=" #layout-algorithm"></a> by using the
4584+ Layout the grid following the [[ #layout-algorithm]] by using the
45854585 <a>fragmentation container</a> ’s inline size and assume unlimited block size.
45864586 During this step all 'grid-row' ''auto'' and ''fr'' values must be resolved.
45874587
@@ -5097,7 +5097,7 @@ Minor Changes</h4>
50975097 <p><strong> For intrinsic maximums:</strong>
50985098 Next increase the <a>growth limit</a> of tracks with
50995099 an <a lt="intrinsic sizing function">intrinsic</a> <a>max track sizing function</a>
5100- by <a href=" #extra-space"> distributing extra space</a> as needed
5100+ by [[ #extra-space| distributing extra space]] as needed
51015101 to account for these items' <del> minimum</del> <ins> min-content</ins> contributions.
51025102 </blockquote>
51035103 <wpt>
@@ -5149,7 +5149,7 @@ Clarifications</h4>
51495149 that span across its corresponding <a>grid line</a> </ins> .
51505150 </blockquote>
51515151 <blockquote>
5152- <p class="note"><ins> Note: Remember that <a href=" #gutters"> gutters</a> are treated as fixed-size tracks--
5152+ <p class="note"><ins> Note: Remember that [[ #gutters| gutters]] are treated as fixed-size tracks--
51535153 tracks with their min and max sizing functions both set to the gutter’s used size--
51545154 for the purpose of the grid sizing algorithm.
51555155 Their widths need to be incorporated into
@@ -5313,12 +5313,12 @@ Major Changes</h4>
53135313 (<a href="https://github.com/w3c/csswg-drafts/issues/1696">Issue 1696</a> )
53145314
53155315 <li id="change-2016-auto-ratio">
5316- Changed <a href=" #grid-item-sizing"> automatic sizing</a>
5316+ Changed [[ #grid-item-sizing| automatic sizing]]
53175317 of grid items (such as images) with an intrinsic size or ratio
53185318 so that they maintain their intrinsic size/ratio
53195319 whenever the alignment properties are ''align-self/normal'' (the default case).
53205320 (<a href="https://github.com/w3c/csswg-drafts/issues/523">Issue #523</a> )
5321- See <a href=" #grid-item-sizing"></a>
5321+ See [[ #grid-item-sizing]]
53225322 (vs. <a href="https://www.w3.org/TR/2016/CR-css-grid-1-20160929/#grid-item-sizing">original</a> ).
53235323
53245324 <li id="change-2016-auto-percent-track">
@@ -5395,11 +5395,11 @@ Significant Adjustments and Fixes</h4>
53955395 <p> There are <del> 4</del><ins> 5</ins> steps:
53965396
53975397 <ol>
5398- <li> <a href=" #algo-init"> Initialize Track Sizes</a>
5399- <li> <a href=" #algo-content"> Resolve Intrinsic Track Sizes</a>
5400- <li> <a href=" #algo-grow-tracks"> Maximize Tracks</a>
5401- <li> <a href=" #algo-flex-tracks"> Expand Flexible Tracks</a>
5402- <li><ins> <a href="#algo-stretch">Expand Stretched <css>auto</css> Tracks</a> </ins>
5398+ <li> [[ #algo-init| Initialize Track Sizes]]
5399+ <li> [[ #algo-content| Resolve Intrinsic Track Sizes]]
5400+ <li> [[ #algo-grow-tracks| Maximize Tracks]]
5401+ <li> [[ #algo-flex-tracks| Expand Flexible Tracks]]
5402+ <li><ins> <a section href="#algo-stretch">Expand Stretched <css>auto</css> Tracks</a> </ins>
54035403 </ol>
54045404 </blockquote>
54055405 <blockquote>
@@ -5457,13 +5457,13 @@ Significant Adjustments and Fixes</h4>
54575457
54585458 Note: Since <a>grid items</a> whose own size
54595459 depends on the size of an intrinsically-sized track
5460- <a href=" #row-align"> do not participate in baseline alignment</a> ,
5460+ [[ #row-align| do not participate in baseline alignment]] ,
54615461 they are not shimmed.
54625462 </ins>
54635463 </blockquote>
54645464
54655465 <li id="change-2016-auto-min-fixed-tracks">
5466- Adjusted <a href=" #min-size-auto"> automatic minimum size</a> of grid items
5466+ Adjusted [[ #min-size-auto| automatic minimum size]] of grid items
54675467 to only trigger when spanning ''grid-template-columns/auto'' tracks
54685468 (<a href="https://drafts.csswg.org/css-grid-1/issues-cr-2016#issue-12">Issue 12</a> )
54695469 and ensured that this correctly affects the transferred size when the item has an aspect ratio
@@ -5487,7 +5487,7 @@ Significant Adjustments and Fixes</h4>
54875487 </blockquote>
54885488
54895489 <li id="change-2016-auto-min-fallback">
5490- Adjusted <a href=" #min-size-auto"> automatic minimum size</a> of grid items
5490+ Adjusted [[ #min-size-auto| automatic minimum size]] of grid items
54915491 to use the transferred size in preference to the content size,
54925492 rather than taking the smaller of the two.
54935493 (<a href="https://github.com/w3c/csswg-drafts/issues/1149">Issue #1149</a> )
@@ -5527,14 +5527,14 @@ Significant Adjustments and Fixes</h4>
55275527 a <a>min track sizing function</a> of ''min-content'' or ''max-content'' <del> ,
55285528 and tracks with a <a>min track sizing function</a> of ''auto''
55295529 if the <a>grid container</a> is being sized under a <a>min-content constraint</a> ,</del>
5530- by <a href=" #extra-space"> distributing extra space</a> as needed
5530+ by [[ #extra-space| distributing extra space]] as needed
55315531 to account for these items' <a>min-content contributions</a> .
55325532 <li><strong> For max-content minimums:</strong>
55335533 Third continue to increase the <a>base size</a> of tracks with
55345534 a <a>min track sizing function</a> of ''max-content'' <del> ,<
9945
/div>
55355535 and tracks with a <a>max track sizing function</a> of ''auto''
55365536 if the <a>grid container</a> is being sized under a <a>max-content constraint</a> ,</del>
5537- by <a href=" #extra-space"> distributing extra space</a> as needed
5537+ by [[ #extra-space| distributing extra space]] as needed
55385538 to account for these items' <a>max-content contributions</a> .
55395539 </ol>
55405540 </ol>
@@ -5681,7 +5681,7 @@ Clarifications</h4>
56815681 to avoid mixing up concepts under the same name.
56825682 (<a href="https://github.com/w3c/csswg-drafts/issues/1120">Issue #1120</a> )
56835683 <li id="change-2016-maximize-base-sizes">
5684- Clarified that the <a href=" #algo-grow-tracks"> Maximize Tracks</a> step
5684+ Clarified that the [[ #algo-grow-tracks| Maximize Tracks]] step
56855685 grows the <a>base sizes</a> of the tracks.
56865686 (<a href="https://github.com/w3c/csswg-drafts/issues/1120">Issue #1120</a> )
56875687 <blockquote>
0 commit comments