Skip to content

Commit ea707f4

Browse files
committed
[css3-grid-layout] Partially done rewrite of the subgrid section.
1 parent ddcd3ec commit ea707f4

2 files changed

Lines changed: 23 additions & 17 deletions

File tree

css3-grid-layout/Overview.html

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -943,23 +943,24 @@ <h3 id=subgrids-the-subgrid-display-value><span class=secno>3.2.
943943
<p class=issue> This is a proposal to address the alignment of sub-items
944944
across grid items
945945

946-
<p> A grid item can itself be a grid element by giving it ‘<code
946+
<p> A <a href="#grid-item"><i>grid item</i></a> can itself be a <a
947+
href="#grid-container"><i>grid container</i></a> by giving it ‘<code
947948
class=css>display: grid</code>’; in this case the layout of its contents
948949
will be independent of the layout of the grid it participates in.
949950

950-
<p> In some cases it might be necessary for the contents of multiple grid
951-
items to align to each other; in this case ‘<code class=css>display:
952-
subgrid</code>’ can be used. A grid item with ‘<code
953-
class=css>display: subgrid</code>’ behaves just like one with ‘<code
954-
class=css>display: grid</code>’ except that:
951+
<p> In some cases it might be necessary for the contents of multiple <a
952+
href="#grid-item"><i>grid items</i></a> to align to each other; in this
953+
case ‘<code class=css>display: subgrid</code>’ can be used. A <a
954+
href="#grid-item"><i>grid item</i></a> with ‘<code class=css>display:
955+
subgrid</code>’ behaves just like one with ‘<code class=css>display:
956+
grid</code>’ except that:
955957

956958
<ul>
957-
<li> The ‘<code class=property>grid-column-definition</code>’ and
958-
<code class=property>grid-row-definition</code>’ properties do not
959-
apply. Instead the number of explicit tracks is given by its ‘<code
960-
class=property>grid-column-span</code>’ and ‘<code
961-
class=property>grid-row-span</code>’ properties, and their sizes are
962-
determined by the parent grid.
959+
<li> The ‘<a href="#grid-definition-columns"><code
960+
class=property>grid-definition-columns</code></a>’ and ‘<code
961+
class=property>grid-definition-row</code>’ properties do not apply.
962+
Instead the number of explicit tracks is given by its <a
963+
href="#grid-span"><i>grid span</i></a>.
963964

964965
<li> The used ‘<code class=property>grid-column-span</code>’ and
965966
<code class=property>grid-row-span</code>’ of the item is determined

css3-grid-layout/Overview.src.html

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -631,17 +631,22 @@ <h3>Subgrids: the ''subgrid'' 'display' value</h3>
631631
This is a proposal to address the alignment of sub-items across grid items
632632

633633
<p>
634-
A grid item can itself be a grid element by giving it ''display: grid''; in this case the layout of its contents will be independent of the layout of the grid it participates in.
634+
A <i>grid item</i> can itself be a <i>grid container</i> by giving it ''display: grid'';
635+
in this case the layout of its contents will be independent of the layout of the grid it participates in.
635636

636637
<p>
637-
In some cases it might be necessary for the contents of multiple grid items to align to each other; in this case ''display: subgrid'' can be used. A grid item with ''display: subgrid'' behaves just like one with ''display: grid'' except that:
638+
In some cases it might be necessary for the contents of multiple <i>grid items</i> to align to each other;
639+
in this case ''display: subgrid'' can be used.
640+
A <i>grid item</i> with ''display: subgrid'' behaves just like one with ''display: grid'' except that:
641+
638642
<ul>
639643
<li>
640-
The 'grid-column-definition' and 'grid-row-definition' properties do not apply.
641-
Instead the number of explicit tracks is given by its 'grid-column-span' and 'grid-row-span' properties,
642-
and their sizes are determined by the parent grid.
644+
The 'grid-definition-columns' and 'grid-definition-row' properties do not apply.
645+
Instead the number of explicit tracks is given by its <i>grid span</i>.
646+
643647
<li>
644648
The used 'grid-column-span' and 'grid-row-span' of the item is determined by the number of grid rows and grid columns it contains.
649+
645650
<li>
646651
Its own grid items participate in the sizing of its parent grid and are aligned to it.
647652
In this process, the sum of the item's margin, padding, and borders are applied as an extra layer of margin to the items at those edges.

0 commit comments

Comments
 (0)