Navigation Menu

Skip to content

Commit

Permalink
[css-grid-1] 'implicit named line' => 'implicitly-named line', and df…
Browse files Browse the repository at this point in the history
…n 'explicitly-named line' as well.
  • Loading branch information
tabatkins committed Aug 4, 2020
1 parent d8c62a9 commit 4ac5959
Showing 1 changed file with 14 additions and 12 deletions.
26 changes: 14 additions & 12 deletions css-grid-1/Overview.bs
Expand Up @@ -1655,8 +1655,8 @@ Naming Grid Lines: the <css>[<<custom-ident>>*]</css> syntax</h4>
While <a>grid lines</a> can always be referred to by their numerical index,
<dfn export lt="named line">named lines</dfn>
can make the <a>grid-placement properties</a> easier to understand and maintain.
Lines can be explicitly named in the 'grid-template-rows' and 'grid-template-columns' properties,
or <a href="#implicit-named-lines">implicitly named</a> by creating <a>named grid areas</a> with the 'grid-template-areas' property.
Lines can be <dfn lt="explicitly-named line">explicitly named</dfn> in the 'grid-template-rows' and 'grid-template-columns' properties,
or [=implicitly-named lines|implicitly named=] by creating <a>named grid areas</a> with the 'grid-template-areas' property.

<div class='example'>
For example,
Expand Down Expand Up @@ -2160,25 +2160,25 @@ Serialization Of Template Strings</h4>
with all other white space elided.

<h4 id="implicit-named-lines">
Implicit Named Lines</h4>
Implicitly-Named Lines</h4>

The 'grid-template-areas' property creates <dfn export lt="implicit named line">implicit named lines</dfn> from the <a>named grid areas</a> in the template.
For each <a>named grid area</a> <var>foo</var>, four <a>implicit named lines</a> are created:
The 'grid-template-areas' property creates <dfn export lt="implicitly-named line">implicitly-named lines</dfn> from the <a>named grid areas</a> in the template.
For each <a>named grid area</a> <var>foo</var>, four <a>implicitly-named lines</a> are created:
two named <css><var>foo</var>-start</css>, naming the row-start and column-start lines of the <a>named grid area</a>,
and two named <css><var>foo</var>-end</css>, naming the row-end and column-end lines of the <a>named grid area</a>.

These named lines behave just like any other named line,
except that they do not appear in the value of 'grid-template-rows'/'grid-template-columns'.
Even if an explicit line of the same name is defined,
the implicit named lines are just more lines with the same name.
Even if an [=explicitly-named line=] of the same name is defined,
the [=implicitly-named lines=] are just more lines with the same name.

<h4 id="implicit-named-areas">
Implicit Named Areas</h4>
Implicitly-Named Areas</h4>

Since a <a>named grid area</a> is referenced by the <a>implicit named lines</a> it produces,
Since a <a>named grid area</a> is referenced by the <a>implicitly-named lines</a> it produces,
explicitly adding named lines of the same form (''foo-start''/''foo-end'')
effectively creates a <a>named grid area</a>.
Such <dfn export lt="implicit named area">implicit named areas</dfn> do not appear in the value of 'grid-template-areas',
Such <dfn export lt="implicitly-named area">implicitly-named areas</dfn> do not appear in the value of 'grid-template-areas',
but can still be referenced by the <a>grid-placement properties</a>.

<!--
Expand Down Expand Up @@ -2273,7 +2273,7 @@ Explicit Grid Shorthand: the 'grid-template' property</h3>
</ul>
</object>
<figcaption>The grid created by the declarations above.
(The “a/b-start/end” names are created <a href="#implicit-named-lines">implicitly</a> by the <a>named grid areas</a>.)
(The “a/b-start/end” names are created [=implicitly-named line|implicitly=] by the <a>named grid areas</a>.)
</figcaption>
</figure>
</div>
Expand Down Expand Up @@ -2949,7 +2949,7 @@ Line-based Placement: the 'grid-row-start', 'grid-column-start', 'grid-row-end',
if there is a <a>named line</a> with the name <css><<custom-ident>>-start</css> (for 'grid-*-start') / <css><<custom-ident>>-end</css> (for 'grid-*-end'),
contributes the first such line to the <a>grid item</a>’s <a>placement</a>.

Note: <a>Named grid areas</a> automatically generate <a>implicit named lines</a> of this form,
Note: <a>Named grid areas</a> automatically generate <a>implicitly-named lines</a> of this form,
so specifying ''grid-row-start: foo'' will choose the start edge of that <a>named grid area</a>
(unless another line named ''foo-start'' was explicitly specified before it).

Expand Down Expand Up @@ -4927,8 +4927,10 @@ Major Changes</h4>

<p><ins>Otherwise, the used <a>automatic minimum size</a> is <del>otherwise</del> zero, as usual.</p>
</blockquote>

<wpt>
layout-algorithm/grid-flex-track-intrinsic-sizes-003.html
layout-algorithm/flex-and-intrinsic-sizes-002.html
</wpt>
</ul>
<h4 id="minor-2017">
Expand Down

0 comments on commit 4ac5959

Please sign in to comment.