Skip to content

Commit 2e2fd24

Browse files
tabatkinstabatkins
committed
[css-grid] Clean up some headings.
1 parent 90a7884 commit 2e2fd24

2 files changed

Lines changed: 116 additions & 111 deletions

File tree

‎css-grid/Overview.html‎

Lines changed: 64 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,8 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
255255
class=property>grid-template-columns</code>’ properties</a>
256256
<ul class=toc>
257257
<li><a href="#named-lines"><span class=secno>5.1.1. </span> Named Grid
258-
Lines</a>
258+
Lines: the ‘<code class=css>(<var>&lt;ident></var>*)</code>’
259+
syntax</a>
259260

260261
<li><a href="#repeat-notation"><span class=secno>5.1.2. </span>
261262
Repeating Rows and Columns: the ‘<code class=css>repeat()</code>’
@@ -264,10 +265,11 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
264265
<li><a href="#fr-unit"><span class=secno>5.1.3. </span> Flexible
265266
Lengths: the ‘<code class=css>fr</code>’ unit</a>
266267

267-
<li><a href="#resolved-track-list"><span class=secno>5.1.4. </span>
268-
Resolved Values</a>
268+
<li><a href="#subgrids"><span class=secno>5.1.4. </span> Subgrids: the
269+
‘<code class=css>subgrid</code>’ keyword</a>
269270

270-
<li><a href="#subgrids"><span class=secno>5.1.5. </span> Subgrids</a>
271+
<li><a href="#resolved-track-list"><span class=secno>5.1.5. </span>
272+
Resolved Values</a>
271273
</ul>
272274

273275
<li><a href="#grid-template-areas-property"><span class=secno>5.2.
@@ -278,8 +280,9 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
278280
Implicit Named Lines</a>
279281
</ul>
280282

281-
<li><a href="#grid-template-property"><span class=secno>5.3. </span> The
282-
‘<code class=property>grid-template</code>’ shorthand property</a>
283+
<li><a href="#grid-template-property"><span class=secno>5.3. </span>
284+
Grid Definition Shorthand: the ‘<code
285+
class=property>grid-template</code>’ property</a>
283286

284287
<li><a href="#auto-tracks"><span class=secno>5.4. </span> Auto-generated
285288
Rows and Columns: the ‘<code class=property>grid-auto-rows</code>’
@@ -1368,7 +1371,8 @@ <h3 id=track-sizing><span class=secno>5.1. </span> Track Sizing: the ‘<a
13681371
href="http://lists.w3.org/Archives/Public/www-style/2013May/0077.html">Our
13691372
proposal.</a>
13701373

1371-
<h4 id=named-lines><span class=secno>5.1.1. </span> Named Grid Lines</h4>
1374+
<h4 id=named-lines><span class=secno>5.1.1. </span> Named Grid Lines: the
1375+
‘<code class=css>(<var>&lt;ident></var>*)</code>’ syntax</h4>
13721376

13731377
<p> While <a href="#grid-line"><i>grid lines</i></a> can always be referred
13741378
to by their numerical index, they can also be explicitly named in the
@@ -1494,54 +1498,8 @@ <h4 id=fr-unit><span class=secno>5.1.3. </span> Flexible Lengths: the
14941498
multiplied by each <a href="#grid-track"><i>grid track</i></a>’s flex
14951499
factor to determine its final size.
14961500

1497-
<h4 id=resolved-track-list><span class=secno>5.1.4. </span> Resolved Values</h4>
1498-
1499-
<p> The <a href="http://www.w3.org/TR/cssom/#resolved-values">resolved
1500-
value</a> of the ‘<a href="#grid-template-rows"><code
1501-
class=property>grid-template-rows</code></a>’ and ‘<a
1502-
href="#grid-template-columns"><code
1503-
class=property>grid-template-columns</code></a>’ properties is the used
1504-
value, serialized as follows:
1505-
1506-
<ul>
1507-
<li> Every track listed, whether implicitly or explicitly created.
1508-
1509-
<li> Every track size given as a length in pixels, regardless of sizing
1510-
function.
1511-
1512-
<li> A contiguous run of two or more tracks that have the same size and
1513-
associated line names may be serialized with the ‘<code
1514-
class=css>repeat()</code>’ notation.
1515-
</ul>
1516-
1517-
<div class=example>
1518-
<pre>
1519-
&lt;style>
1520-
#grid {
1521-
width: 500px;
1522-
grid-template-columns:
1523-
(a) auto
1524-
(b) minmax(min-content, 1fr)
1525-
(b c d) repeat(2, (e) 40px)
1526-
repeat(5, auto);
1527-
}
1528-
&lt;/style>
1529-
&lt;div id="grid">
1530-
&lt;div style="grid-column-start:1; width:50px">&lt;/div>
1531-
&lt;div style="grid-column-start:9; width:50px">&lt;/div>
1532-
&lt;/div>
1533-
&lt;script>
1534-
var gridElement = document.getElementById("grid");
1535-
getComputedStyle(gridElement).gridDefinitionColumns;
1536-
// (a) 50px (b) 320px (b c d) repeat(2, (e) 40px) repeat(4, 0px) 50px
1537-
&lt;/script></pre>
1538-
</div>
1539-
1540-
<p class=issue> In general, resolved values are the computed values, except
1541-
for a small list of legacy 2.1 properties. Do we really want these
1542-
properties to return the used value here?
1543-
1544-
<h4 id=subgrids><span class=secno>5.1.5. </span> Subgrids</h4>
1501+
<h4 id=subgrids><span class=secno>5.1.4. </span> Subgrids: the ‘<a
1502+
href="#subgrid0"><code class=css>subgrid</code></a>’ keyword</h4>
15451503

15461504
<p> A <a href="#grid-item"><i>grid item</i></a> can itself be a <a
15471505
href="#grid-container"><i>grid container</i></a> by giving it ‘<code
@@ -1656,6 +1614,53 @@ <h4 id=subgrids><span class=secno>5.1.5. </span> Subgrids</h4>
16561614
<p class=issue> Do we want to allow ‘<code class=css>repeat()</code>’
16571615
when specifying named lines for subgrids?
16581616

1617+
<h4 id=resolved-track-list><span class=secno>5.1.5. </span> Resolved Values</h4>
1618+
1619+
<p> The <a href="http://www.w3.org/TR/cssom/#resolved-values">resolved
1620+
value</a> of the ‘<a href="#grid-template-rows"><code
1621+
class=property>grid-template-rows</code></a>’ and ‘<a
1622+
href="#grid-template-columns"><code
1623+
class=property>grid-template-columns</code></a>’ properties is the used
1624+
value, serialized as follows:
1625+
1626+
<ul>
1627+
<li> Every track listed, whether implicitly or explicitly created.
1628+
1629+
<li> Every track size given as a length in pixels, regardless of sizing
1630+
function.
1631+
1632+
<li> A contiguous run of two or more tracks that have the same size and
1633+
associated line names may be serialized with the ‘<code
1634+
class=css>repeat()</code>’ notation.
1635+
</ul>
1636+
1637+
<div class=example>
1638+
<pre>
1639+
&lt;style>
1640+
#grid {
1641+
width: 500px;
1642+
grid-template-columns:
1643+
(a) auto
1644+
(b) minmax(min-content, 1fr)
1645+
(b c d) repeat(2, (e) 40px)
1646+
repeat(5, auto);
1647+
}
1648+
&lt;/style>
1649+
&lt;div id="grid">
1650+
&lt;div style="grid-column-start:1; width:50px">&lt;/div>
1651+
&lt;div style="grid-column-start:9; width:50px">&lt;/div>
1652+
&lt;/div>
1653+
&lt;script>
1654+
var gridElement = document.getElementById("grid");
1655+
getComputedStyle(gridElement).gridDefinitionColumns;
1656+
// (a) 50px (b) 320px (b c d) repeat(2, (e) 40px) repeat(4, 0px) 50px
1657+
&lt;/script></pre>
1658+
</div>
1659+
1660+
<p class=issue> In general, resolved values are the computed values, except
1661+
for a small list of legacy 2.1 properties. Do we really want these
1662+
properties to return the used value here?
1663+
16591664
<h3 id=grid-template-areas-property><span class=secno>5.2. </span> Named
16601665
Areas: the ‘<a href="#grid-template-areas"><code
16611666
class=property>grid-template-areas</code></a>’ property</h3>
@@ -1802,9 +1807,9 @@ <h4 id=implicit-named-lines><span class=secno>5.2.1. </span> Implicit Named
18021807
line of the same name is defined, the implicit named lines are just more
18031808
lines with the same name.
18041809

1805-
<h3 id=grid-template-property><span class=secno>5.3. </span> The ‘<a
1806-
href="#grid-template"><code class=property>grid-template</code></a>’
1807-
shorthand property</h3>
1810+
<h3 id=grid-template-property><span class=secno>5.3. </span> Grid
1811+
Definition Shorthand: the ‘<a href="#grid-template"><code
1812+
class=property>grid-template</code></a>’ property</h3>
18081813

18091814
<table class=propdef>
18101815
<tbody>
@@ -4165,7 +4170,7 @@ <h2 class=no-num id=index> Index</h2>
41654170

41664171
<li>subgrid, <a href="#subgrid"
41674172
title="section 5.1."><strong>5.1.</strong></a>, <a href="#subgrid0"
4168-
title="section 5.1.5."><strong>5.1.5.</strong></a>
4173+
title="section 5.1.4."><strong>5.1.4.</strong></a>
41694174

41704175
<li>&lt;track-breadth>, <a href="#lttrack-breadth"
41714176
title="section 5.1."><strong>5.1.</strong></a>

‎css-grid/Overview.src.html‎

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -973,7 +973,7 @@ <h3 id='track-sizing'>
973973

974974

975975
<h4 id='named-lines'>
976-
Named Grid Lines</h4>
976+
Named Grid Lines: the ''(<var>&lt;ident></var>*)'' syntax</h4>
977977

978978
<p>
979979
While <i>grid lines</i> can always be referred to by their numerical index,
@@ -1084,58 +1084,9 @@ <h4 id='fr-unit'>
10841084
The maximum of those is used as the ''1fr'' length,
10851085
which is then multiplied by each <i>grid track</i>’s flex factor to determine its final size.
10861086

1087-
<h4 id='resolved-track-list'>
1088-
Resolved Values</h4>
1089-
1090-
<p>
1091-
The <a href="http://www.w3.org/TR/cssom/#resolved-values">resolved value</a> of the 'grid-template-rows' and 'grid-template-columns' properties is the used value,
1092-
serialized as follows:
1093-
1094-
<ul>
1095-
<li>
1096-
Every track listed,
1097-
whether implicitly or explicitly created.
1098-
1099-
<li>
1100-
Every track size given as a length in pixels,
1101-
regardless of sizing function.
1102-
1103-
<li>
1104-
A contiguous run of two or more tracks that have the same size and associated line names
1105-
may be serialized with the ''repeat()'' notation.
1106-
</ul>
1107-
1108-
<div class="example">
1109-
<pre>
1110-
&lt;style>
1111-
#grid {
1112-
width: 500px;
1113-
grid-template-columns:
1114-
(a) auto
1115-
(b) minmax(min-content, 1fr)
1116-
(b c d) repeat(2, (e) 40px)
1117-
repeat(5, auto);
1118-
}
1119-
&lt;/style>
1120-
&lt;div id="grid">
1121-
&lt;div style="grid-column-start:1; width:50px">&lt;/div>
1122-
&lt;div style="grid-column-start:9; width:50px">&lt;/div>
1123-
&lt;/div>
1124-
&lt;script>
1125-
var gridElement = document.getElementById("grid");
1126-
getComputedStyle(gridElement).gridDefinitionColumns;
1127-
// (a) 50px (b) 320px (b c d) repeat(2, (e) 40px) repeat(4, 0px) 50px
1128-
&lt;/script></pre>
1129-
</div>
1130-
1131-
<p class='issue'>
1132-
In general, resolved values are the computed values,
1133-
except for a small list of legacy 2.1 properties.
1134-
Do we really want these properties to return the used value here?
1135-
11361087

11371088
<h4 id="subgrids">
1138-
Subgrids</h4>
1089+
Subgrids: the ''subgrid'' keyword</h4>
11391090

11401091
<p>
11411092
A <i>grid item</i> can itself be a <i>grid container</i> by giving it ''display: grid'';
@@ -1227,6 +1178,55 @@ <h4 id="subgrids">
12271178
<p class='issue'>
12281179
Do we want to allow ''repeat()'' when specifying named lines for subgrids?
12291180

1181+
<h4 id='resolved-track-list'>
1182+
Resolved Values</h4>
1183+
1184+
<p>
1185+
The <a href="http://www.w3.org/TR/cssom/#resolved-values">resolved value</a> of the 'grid-template-rows' and 'grid-template-columns' properties is the used value,
1186+
serialized as follows:
1187+
1188+
<ul>
1189+
<li>
1190+
Every track listed,
1191+
whether implicitly or explicitly created.
1192+
1193+
<li>
1194+
Every track size given as a length in pixels,
1195+
regardless of sizing function.
1196+
1197+
<li>
1198+
A contiguous run of two or more tracks that have the same size and associated line names
1199+
may be serialized with the ''repeat()'' notation.
1200+
</ul>
1201+
1202+
<div class="example">
1203+
<pre>
1204+
&lt;style>
1205+
#grid {
1206+
width: 500px;
1207+
grid-template-columns:
1208+
(a) auto
1209+
(b) minmax(min-content, 1fr)
1210+
(b c d) repeat(2, (e) 40px)
1211+
repeat(5, auto);
1212+
}
1213+
&lt;/style>
1214+
&lt;div id="grid">
1215+
&lt;div style="grid-column-start:1; width:50px">&lt;/div>
1216+
&lt;div style="grid-column-start:9; width:50px">&lt;/div>
1217+
&lt;/div>
1218+
&lt;script>
1219+
var gridElement = document.getElementById("grid");
1220+
getComputedStyle(gridElement).gridDefinitionColumns;
1221+
// (a) 50px (b) 320px (b c d) repeat(2, (e) 40px) repeat(4, 0px) 50px
1222+
&lt;/script></pre>
1223+
</div>
1224+
1225+
<p class='issue'>
1226+
In general, resolved values are the computed values,
1227+
except for a small list of legacy 2.1 properties.
1228+
Do we really want these properties to return the used value here?
1229+
12301230

12311231
<h3 id="grid-template-areas-property">
12321232
Named Areas: the 'grid-template-areas' property</h3>
@@ -1354,7 +1354,7 @@ <h4 id="implicit-named-lines">
13541354
the implicit named lines are just more lines with the same name.
13551355

13561356
<h3 id='grid-template-property'>
1357-
The 'grid-template' shorthand property</h3>
1357+
Grid Definition Shorthand: the 'grid-template' property</h3>
13581358

13591359
<table class="propdef">
13601360
<tr>

0 commit comments

Comments
 (0)