Skip to content

Commit f0ba2fc

Browse files
BoCupp-MicrosoftBoCupp-Microsoft
committed
fixing validation errors
1 parent 9c64c8e commit f0ba2fc

2 files changed

Lines changed: 72 additions & 68 deletions

File tree

‎css3-grid-align/Overview.html‎

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<!DOCTYPE html>
22

33
<html lang=en>
4-
<head profile="http://www.w3.org/2006/03/hcard"><meta
5-
content="text/html; charset=utf-8" http-equiv=Content-Type>
4+
<head><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
65

76
<title>CSS Grid Layout</title>
87
<link href="../default.css" rel=stylesheet type="text/css">
@@ -333,9 +332,9 @@ <h3 id=basic-capabilities-of-the-grid><span class=secno>2.1. </span>Basic
333332
then precisely position and size the building block elements of their
334333
application by referencing the <a href="#grid-line"><i>Grid lines</i></a>
335334
between the columns and rows, or by defining and referencing a <a
336-
href="#grid-cell"><i>Grid cell</i></a>, which is a rectangular space
337-
covering an intersection of columns and rows. Figure 1 illustrates a basic
338-
layout which can be achieved with the Grid.</p>
335+
href="#grid-cell-concept"><i>Grid cell</i></a>, which is a rectangular
336+
space covering an intersection of columns and rows. Figure 1 illustrates a
337+
basic layout which can be achieved with the Grid.</p>
339338
<!--End Section: Basic Capabilities of the Grid--> </section> <section
340339
class=section id=adapting-to-available-space>
341340
<h3 id=adapting-layouts-to-available-space><span class=secno>2.2.
@@ -623,7 +622,7 @@ <h2 id=core-concepts-of-the-grid><span class=secno>3. </span>Core Concepts
623622

624623
<li><a href="#grid-line"><i>Grid lines</i></a>
625624

626-
<li><a href="#grid-cell"><i>Grid cells</i></a>
625+
<li><a href="#grid-cell-concept"><i>Grid cells</i></a>
627626
</ul>
628627

629628
<p> Figure 7 illustrates the relationship between these concepts and the
@@ -707,23 +706,23 @@ <h3 id=grid-lines><span class=secno>3.2. </span>Grid Lines</h3>
707706
id=grid-concepts-cells>
708707
<h3 id=grid-cells><span class=secno>3.3. </span>Grid Cells</h3>
709708

710-
<p> <dfn id=grid-cell>Grid Cell</dfn>s are the logical space used to lay
711-
out one or more <a href="#grid-item"><i>Grid items</i></a>. <a
712-
href="#grid-cell"><i>Grid cells</i></a> may be defined explicitly using
713-
the &lsquo;<a href="#grid-template"><code
709+
<p> <dfn id=grid-cell-concept>Grid Cell</dfn>s are the logical space used
710+
to lay out one or more <a href="#grid-item"><i>Grid items</i></a>. <a
711+
href="#grid-cell-concept"><i>Grid cells</i></a> may be defined explicitly
712+
using the &lsquo;<a href="#grid-template"><code
714713
class=property>grid-template</code></a>&rsquo; property, or implicitly by
715714
referencing a region of the Grid using the properties &lsquo;<a
716715
href="#grid-row"><code class=property>grid-row</code></a>&rsquo; and
717716
&lsquo;<a href="#grid-column"><code
718717
class=property>grid-column</code></a>&rsquo; on a <a
719718
href="#grid-item"><i>Grid item</i></a>.</p>
720719

721-
<p> Whether a <a href="#grid-cell"><i>Grid cell</i></a> is created
720+
<p> Whether a <a href="#grid-cell-concept"><i>Grid cell</i></a> is created
722721
explicitly or implicitly, there is no difference in the layout or drawing
723722
order of the <a href="#grid-item"><i>Grid items</i></a> which are
724-
associated with that <a href="#grid-cell"><i>Grid cell</i></a>. <a
725-
href="#grid-cell"><i>Grid cells</i></a> cannot be styled. Only the syntax
726-
used to refer to a region of space on the Grid differs between the
723+
associated with that <a href="#grid-cell-concept"><i>Grid cell</i></a>. <a
724+
href="#grid-cell-concept"><i>Grid cells</i></a> cannot be styled. Only the
725+
syntax used to refer to a region of space on the Grid differs between the
727726
implicit and explicit approach to provide authors with the tools to best
728727
suit their scenarios as illustrated in prior examples.</p>
729728

@@ -1385,18 +1384,18 @@ <h3 id=anonymous-grid-cells0><span class=secno>7.1. </span>Anonymous Grid
13851384
Cells</h3>
13861385

13871386
<p> Each <a href="#grid-item"><i>Grid item</i></a> is contained by a <a
1388-
href="#grid-cell"><i>Grid cell</i></a>, i.e. the <a
1389-
href="#grid-cell"><i>Grid cell</i></a> serves as the containing block for
1390-
the <a href="#grid-item"><i>Grid item</i></a>. The dimensions of an
1391-
anonymous <a href="#grid-cell"><i>Grid cell</i></a> are determined by
1392-
naming the starting and ending <a href="#grid-line"><i>Grid lines</i></a>
1393-
using the &lsquo;<a href="#grid-row"><code
1387+
href="#grid-cell-concept"><i>Grid cell</i></a>, i.e. the <a
1388+
href="#grid-cell-concept"><i>Grid cell</i></a> serves as the containing
1389+
block for the <a href="#grid-item"><i>Grid item</i></a>. The dimensions of
1390+
an anonymous <a href="#grid-cell-concept"><i>Grid cell</i></a> are
1391+
determined by naming the starting and ending <a href="#grid-line"><i>Grid
1392+
lines</i></a> using the &lsquo;<a href="#grid-row"><code
13941393
class=property>grid-row</code></a>&rsquo; and &lsquo;<a
13951394
href="#grid-column"><code class=property>grid-column</code></a>&rsquo;
13961395
properties on the <a href="#grid-item"><i>Grid item</i></a> which the <a
1397-
href="#grid-cell"><i>Grid cell</i></a> surrounds. The starting and ending
1398-
lines may be referred to by a string name, if one was defined by the
1399-
author, the <a href="#start-column-position">start</a> and <a
1396+
href="#grid-cell-concept"><i>Grid cell</i></a> surrounds. The starting and
1397+
ending lines may be referred to by a string name, if one was defined by
1398+
the author, the <a href="#start-column-position">start</a> and <a
14001399
href="#end-column-position">end</a> line keywords, or the <a
14011400
href="#grid-line"><i>Grid line</i></a>&rsquo;s number.</p>
14021401

@@ -1410,9 +1409,9 @@ <h3 id=anonymous-grid-cells0><span class=secno>7.1. </span>Anonymous Grid
14101409
line</i></a> of the &lsquo;<a href="#grid-row"><code
14111410
class=property>grid-row</code></a>&rsquo; or &lsquo;<a
14121411
href="#grid-column"><code class=property>grid-column</code></a>&rsquo;
1413-
properties are specified for the <a href="#grid-cell"><i>Grid
1414-
cell</i></a>, that the <a href="#grid-cell"><i>Grid cell</i></a> is
1415-
assumed to extend to the subsequent <a href="#grid-line"><i>Grid
1412+
properties are specified for the <a href="#grid-cell-concept"><i>Grid
1413+
cell</i></a>, that the <a href="#grid-cell-concept"><i>Grid cell</i></a>
1414+
is assumed to extend to the subsequent <a href="#grid-line"><i>Grid
14161415
line</i></a>.</p>
14171416

14181417
<pre class=example>&lt;style type=&quot;text/css&quot;&gt;
@@ -1456,15 +1455,15 @@ <h3 id=anonymous-grid-cells0><span class=secno>7.1. </span>Anonymous Grid
14561455
<h3 id=defining-grid-cells-with-a-template0><span class=secno>7.2.
14571456
</span>Defining Grid Cells with a Template</h3>
14581457

1459-
<p> <a href="#grid-cell"><i>Grid cells</i></a> can also be defined
1458+
<p> <a href="#grid-cell-concept"><i>Grid cells</i></a> can also be defined
14601459
explicitly using one-letter names via the &lsquo;<a
14611460
href="#grid-template"><code class=property>grid-template</code></a>&rsquo;
14621461
property. The &lsquo;<a href="#grid-template"><code
14631462
class=property>grid-template</code></a>&rsquo; property provides a
14641463
visualization of the <a href="#grid-element"><i>Grid
14651464
element</i></a>&rsquo;s structure while simultaneously defining the <a
1466-
href="#grid-cell"><i>Grid cells</i></a> which can be used to position and
1467-
size the child elements of the Grid.</p>
1465+
href="#grid-cell-concept"><i>Grid cells</i></a> which can be used to
1466+
position and size the child elements of the Grid.</p>
14681467

14691468
<p> In the following example, a &lsquo;<a href="#grid-template"><code
14701469
class=property>grid-template</code></a>&rsquo; property is used to create
@@ -1481,7 +1480,7 @@ <h3 id=defining-grid-cells-with-a-template0><span class=secno>7.2.
14811480
class=property>grid-cell</code></a>&rsquo; property is specified on <a
14821481
href="#grid-item"><i>Grid items</i></a> to position the <a
14831482
href="#grid-item"><i>Grid item</i></a> inside the explicitly named <a
1484-
href="#grid-cell"><i>Grid cell</i></a>.</p>
1483+
href="#grid-cell-concept"><i>Grid cell</i></a>.</p>
14851484

14861485
<pre class=example>&lt;style type=&quot;text/css&quot;&gt;
14871486
#grid {
@@ -1587,13 +1586,13 @@ <h3 id=grid-row-span-and-grid-column-span0><span class=secno>7.3.
15871586
</span>Grid-row-span and Grid-column-span</h3>
15881587

15891588
<p> As an alternative to specifying an ending line for a <a
1590-
href="#grid-cell"><i>Grid cell</i></a> or <a href="#grid-item"><i>Grid
1591-
item</i></a>, &lsquo;<a href="#grid-row-span"><code
1592-
class=property>grid-row-span</code></a>&rsquo; and &lsquo;<a
1593-
href="#grid-column-span"><code
1589+
href="#grid-cell-concept"><i>Grid cell</i></a> or <a
1590+
href="#grid-item"><i>Grid item</i></a>, &lsquo;<a
1591+
href="#grid-row-span"><code class=property>grid-row-span</code></a>&rsquo;
1592+
and &lsquo;<a href="#grid-column-span"><code
15941593
class=property>grid-column-span</code></a>&rsquo; properties are available
15951594
to specify a distance (line count) from the starting line to the ending
1596-
line to define the dimensions of a <a href="#grid-cell"><i>Grid
1595+
line to define the dimensions of a <a href="#grid-cell-concept"><i>Grid
15971596
cell</i></a>. Note that when &lsquo;<a href="#grid-column-span"><code
15981597
class=property>grid-column-span</code></a>&rsquo; and a &lsquo;<a
15991598
href="#grid-column"><code class=property>grid-column</code></a>&rsquo;
@@ -1872,8 +1871,8 @@ <h3 id=automatic-placement-of-grid-items0><span class=secno>7.5.
18721871
href="#grid-flow"><code class=property>grid-flow</code></a>&rsquo;
18731872
property controls the direction in which the search for unoccupied space
18741873
takes place, and whether rows or columns are added as needed to accomodate
1875-
the content. Note that <a href="#grid-cell"><i>Grid cells</i></a> cannot
1876-
be automatically placed.</p>
1874+
the content. Note that <a href="#grid-cell-concept"><i>Grid cells</i></a>
1875+
cannot be automatically placed.</p>
18771876

18781877
<p> A &lsquo;<a href="#grid-flow"><code
18791878
class=property>grid-flow</code></a>&rsquo; value of &lsquo;<a
@@ -2100,7 +2099,7 @@ <h4 id=automatic-grid-item-placement-algorithm0><span class=secno>7.5.1.
21002099
<a href="#grid-item"><i>Grid item</i></a> to be automatically placed:
21012100
<ol>
21022101
<li>Place the <a href="#grid-item"><i>Grid item</i></a> in the <a
2103-
href="#grid-cell"><i>Grid cell</i></a> currently defined by the
2102+
href="#grid-cell-concept"><i>Grid cell</i></a> currently defined by the
21042103
&lsquo;<a href="#grid-row"><code
21052104
class=property>grid-row</code></a>&rsquo; and &lsquo;<a
21062105
href="#grid-column"><code class=property>grid-column</code></a>&rsquo;
@@ -2366,12 +2365,12 @@ <h3 id=calculating-the-size-of-grid-items><span class=secno>8.1.
23662365
href="http://www.w3.org/TR/css3-box/#shrink-to-fit">CSS3 Box Model</a>.
23672366
Note that percentage lengths specified on a <a href="#grid-item"><i>Grid
23682367
item</i></a> resolve against the dimensions of the <a
2369-
href="#grid-cell"><i>Grid cell</i></a> (i.e. the <a
2370-
href="#grid-cell"><i>Grid cell</i></a> serves as the containing block for
2371-
the <a href="#grid-item"><i>Grid item</i></a>). Percentages specified for
2372-
margin-top, padding-top, margin-bottom, and padding-bottom resolve against
2373-
the height of the grid cell, rather than the width of the grid cell. If
2374-
the &lsquo;<a href="#min-content"><code
2368+
href="#grid-cell-concept"><i>Grid cell</i></a> (i.e. the <a
2369+
href="#grid-cell-concept"><i>Grid cell</i></a> serves as the containing
2370+
block for the <a href="#grid-item"><i>Grid item</i></a>). Percentages
2371+
specified for margin-top, padding-top, margin-bottom, and padding-bottom
2372+
resolve against the height of the grid cell, rather than the width of the
2373+
grid cell. If the &lsquo;<a href="#min-content"><code
23752374
class=property>min-content</code></a>&rsquo; size of the <a
23762375
href="#grid-item"><i>Grid item</i></a>&rsquo;s box is greater than the
23772376
size of its Cell, it will overflow the bounds of its Cell in a direction
@@ -2454,33 +2453,35 @@ <h3 id=definition-of-terms-for-use-in-calculati><span class=secno>10.1.
24542453
</span>Definition of Terms for use in Calculating Grid Track Sizes</h3>
24552454

24562455
<dl>
2457-
<dt> <dfn id="">AvailableSpace</dfn>
2456+
<dt> <dfn id=AvailableSpace-definition>AvailableSpace</dfn>
24582457

24592458
<dd>The <a href="#grid-element"><i>Grid element</i></a>&rsquo;s content
24602459
box size in the applicable dimension.
24612460

2462-
<dt> <dfn id="">MaxTrackSizingFunction</dfn>
2461+
<dt> <dfn
2462+
id=MaxTrackSizingFunction-definition>MaxTrackSizingFunction</dfn>
24632463

24642464
<dd>One of the <a
24652465
href="#grid-columns-and-rows-properties">&lt;track-breadth&gt;</a> sizing
24662466
functions assigned as the maximum breadth of a <a
24672467
href="#grid-track"><i>Grid track</i></a>.
24682468

2469-
<dt> <dfn id="">MinTrackSizingFunction</dfn>
2469+
<dt> <dfn
2470+
id=MinTrackSizingFunction-definition>MinTrackSizingFunction</dfn>
24702471

24712472
<dd>One of the <a
24722473
href="#grid-columns-and-rows-properties">&lt;track-breadth&gt;</a> sizing
24732474
functions assigned as the minimum breadth of a <a
24742475
href="#grid-track"><i>Grid track</i></a>.
24752476

2476-
<dt> <dfn id="">RemainingSpace</dfn>
2477+
<dt> <dfn id=RemainingSpace-definition>RemainingSpace</dfn>
24772478

24782479
<dd>The max of zero and the AvailableSpace less the sum of all <a
24792480
href="#grid-track"><i>Grid track</i></a> UsedBreadth values. This is
24802481
undefined if AvailableSpace is undefined (i.e. the Grid element is
24812482
shrink-to-fit or the height is auto.)
24822483

2483-
<dt> <dfn id="">SpanCount</dfn>
2484+
<dt> <dfn id=SpanCount-definition>SpanCount</dfn>
24842485

24852486
<dd>The number of <a href="#grid-track"><i>Grid tracks</i></a> crossed by
24862487
a <a href="#grid-item"><i>Grid item</i></a> in the applicable dimension.
@@ -3192,7 +3193,7 @@ <h3 id=grid-track-sizing-algorithm0><span class=secno>10.2. </span>Grid
31923193

31933194
<dl>
31943195
<dt> <dfn
3195-
id=function-CalculateNormalizedFractionBreadth-inputs>Returns</dfn>
3196+
id=function-CalculateNormalizedFractionBreadth-returns>Returns</dfn>
31963197

31973198
<dd>
31983199
<ul>
@@ -3268,13 +3269,14 @@ <h2 class=no-num id=changes-from-previous-version>Changes from <a
32683269

32693270
<li>Removed the pseudo-element selector ::grid-cell.
32703271

3271-
<li>Defined that <a href="#grid-cell"><i>Grid cells</i></a> named
3272+
<li>Defined that <a href="#grid-cell-concept"><i>Grid cells</i></a> named
32723273
explicitly using the <a href="#grid-template-property">grid-template</a>
32733274
property cannot be styled (with the removal of the ::grid-cell
32743275
pseudo-element selector they cannot be selected).
32753276

3276-
<li>Removed the notion that <a href="#grid-cell"><i>Grid cells</i></a>
3277-
could be given a display property which controls their inner layout.
3277+
<li>Removed the notion that <a href="#grid-cell-concept"><i>Grid
3278+
cells</i></a> could be given a display property which controls their
3279+
inner layout.
32783280

32793281
<li>Corrected an error in the automatic placement example. All children of
32803282
the form should be display:block to ensure they are valid <a
@@ -3446,7 +3448,7 @@ <h2 class=no-num id=index> Index</h2>
34463448
href="#auto-column-position" title=auto><strong>7.</strong></a>, <a
34473449
href="#auto-row-position" title=auto><strong>7.</strong></a>
34483450

3449-
<li>AvailableSpace, <a href="#"
3451+
<li>AvailableSpace, <a href="#AvailableSpace-definition"
34503452
title=AvailableSpace><strong>10.1.</strong></a>
34513453

34523454
<li>CalculateNormalizedFractionBreadth, <a
@@ -3483,7 +3485,7 @@ <h2 class=no-num id=index> Index</h2>
34833485

34843486
<li>grid, <a href="#grid" title=grid><strong>4.</strong></a>
34853487

3486-
<li>Grid Cell, <a href="#grid-cell"
3488+
<li>Grid Cell, <a href="#grid-cell-concept"
34873489
title="Grid Cell"><strong>3.3.</strong></a>
34883490

34893491
<li>grid-cell, <a href="#grid-cell"
@@ -3555,7 +3557,7 @@ <h2 class=no-num id=index> Index</h2>
35553557
<li>max-content, <a href="#max-content"
35563558
title=max-content><strong>6.5.</strong></a>
35573559

3558-
<li>MaxTrackSizingFunction, <a href="#"
3560+
<li>MaxTrackSizingFunction, <a href="#MaxTrackSizingFunction-definition"
35593561
title=MaxTrackSizingFunction><strong>10.1.</strong></a>
35603562

35613563
<li>min-content, <a href="#min-content"
@@ -3564,14 +3566,14 @@ <h2 class=no-num id=index> Index</h2>
35643566
<li>minmax(min, max), <a href="#minmax"
35653567
title="minmax(min, max)"><strong>6.5.</strong></a>
35663568

3567-
<li>MinTrackSizingFunction, <a href="#"
3569+
<li>MinTrackSizingFunction, <a href="#MinTrackSizingFunction-definition"
35683570
title=MinTrackSizingFunction><strong>10.1.</strong></a>
35693571

35703572
<li>none, <a href="#none-cell" title=none><strong>7.2.</strong></a>, <a
35713573
href="#none-flow" title=none><strong>7.5.</strong></a>, <a
35723574
href="#none-template" title=none><strong>7.2.</strong></a>
35733575

3574-
<li>RemainingSpace, <a href="#"
3576+
<li>RemainingSpace, <a href="#RemainingSpace-definition"
35753577
title=RemainingSpace><strong>10.1.</strong></a>
35763578

35773579
<li>ResolveContentBasedTrackSizingFunctions, <a
@@ -3583,12 +3585,14 @@ <h2 class=no-num id=index> Index</h2>
35833585
title=ResolveContentBasedTrackSizingFunctionsForItems><strong>10.2.</strong></a>
35843586

35853587

3586-
<li>Returns, <a href="#function-CalculateNormalizedFractionBreadth-inputs"
3588+
<li>Returns, <a
3589+
href="#function-CalculateNormalizedFractionBreadth-returns"
35873590
title=Returns><strong>10.2.</strong></a>
35883591

35893592
<li>rows, <a href="#rows" title=rows><strong>7.5.</strong></a>
35903593

3591-
<li>SpanCount, <a href="#" title=SpanCount><strong>10.1.</strong></a>
3594+
<li>SpanCount, <a href="#SpanCount-definition"
3595+
title=SpanCount><strong>10.1.</strong></a>
35923596

35933597
<li>start, <a href="#start-column-align"
35943598
title=start><strong>8.</strong></a>, <a href="#start-column-position"

0 commit comments

Comments
 (0)