- From: Alex Mogilevsky via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 21 Mar 2011 04:37:51 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-grid-align
In directory hutz:/tmp/cvs-serv580
Modified Files:
Overview.html
Log Message:
updates from Mountain View F2F
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-grid-align/Overview.html,v
retrieving revision 1.8
retrieving revision 1.9
diff -u -d -r1.8 -r1.9
--- Overview.html 8 Mar 2011 08:08:19 -0000 1.8
+++ Overview.html 21 Mar 2011 04:37:49 -0000 1.9
@@ -23,7 +23,7 @@
<div class="head">
<p><a href="http://www.w3.org/"><img src="http://www.w3.org/Icons/w3c_home" alt="W3C" width="72" height="48"></a></p>
<h1 class="title" id="title">CSS Grid Alignment Level 3</h1>
- <h2 id="w3c-editor-s-draft-2-november-2010">W3C Editor's Draft 8 March 2011</h2>
+ <h2 id="w3c-editor-s-draft-8-march-2011">W3C Editor's Draft 8 March 2011</h2>
<dl>
<dt>This version:</dt><dd><a href="http://dev.w3.org/csswg/css3-grid-align/">http://dev.w3.org/csswg/css3-grid-align/</a></dd>
<dt>Latest published version:</dt><dd>none</dd>
@@ -253,9 +253,15 @@
</ul>
<p>
- As an alternative to using script to control the absolute position, width, and height of all elements, the author can use the <a href="#grid-element">Grid element</a>, as shown in Figure 3.
- The following example shows how an author might achieve all the sizing, placement, and alignment rules declaratively.
+ As an alternative to using script to control the absolute position, width, and height of all elements, the author can use the <a href="#grid-element">Grid element</a>, as shown in Figure 3.
+ The following example shows how an author might achieve all the sizing, placement, and alignment rules declaratively.
</p>
+ <p>
+ Note that there are multiple ways to specify the structure of the <a href="#grid-element">Grid</a> and to position and size <a href="#grid-item">Grid Item</a>s, each optimized for different scenarios.
+ This example illustrates one that an author may use to define the position and space for each <a href="#grid-item">Grid Item</a> using the
+ <a href="#grid-rows-property"><code>grid-rows</code></a> and <a href="#grid-columns-property"><code>grid-columns</code></a> properties of the <a href="#grid-element">Grid element</a>,
+ and the <a href="#grid-row-property"><code>grid-row</code></a>, <a href="#grid-column-property"><code>grid-column</code></a>, <a href="#grid-row-span-property"><code>grid-row-span</code></a> and <a href="#grid-column-span-property"><code>grid-column-span</code></a> properties on each <a href="#grid-item">Grid Item</a>.
+ </p>
<pre class="example"><style type="text/css">
#grid { display: grid;
@@ -310,6 +316,10 @@
(Figures 4 and 5). By combining the CSS markup for the <a href="#grid-element">Grid element</a> with media queries, the author is able to use
the same semantic markup, but rearranged independent of its source order, to achieve the desired layout in both orientations.
</p>
+ <p>
+ The following example leverages the <a href="#grid-element">Grid</a>'s ability to name the space which will be occupied by a <a href="#grid-item">Grid Item</a>. This allows the author
+ to avoid rewriting rules for <a href="#grid-item">Grid Item</a>s as the <a href="#grid-element">Grid</a>'s definition changes.
+ </p>
<pre class="example"><style type="text/css">
@media (orientation: portrait) {
#grid {
@@ -385,7 +395,7 @@
The <code>z-index</code> property would have been used to control element drawing order.
By leveraging the <a href="#grid-element">Grid element</a>, the author can instead limit script usage to handling mouse events on the thumb,
which snaps to various positions along the track as the <a href="#grid-column-property"><code>grid-columns</code></a> property of the <a href="#grid-element">Grid element</a> is updated.
- The <code>grid-layer</code></a> property provides capabilities which are analagous to <code>z-index</code> for <a href="#grid-item">Grid Item</a>s.
+ The <a href="#grid-layer-property"><code>grid-layer</code></a> property provides capabilities which are analagous to <code>z-index</code> for <a href="#grid-item">Grid Item</a>s.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -457,7 +467,7 @@
<div id="grid-concepts-tracks" class="section">
<h4><span class="secno">3.1 </span>Grid Tracks</h4>
<p>
- <dfn id="grid-track">Grid Tracks</dfn> are the columns and rows of the Grid defined with the grid-rows and grid-columns properties on the <a href="#grid-element">Grid element</a>. Each Track is defined by declaring a sequential list of sizing functions, one for each Track. Tracks define the space between <a href="#grid-line">Grid Line</a>s.
+ <dfn id="grid-track">Grid Tracks</dfn> are the columns and rows of the Grid defined with the <a href="#grid-rows-property"><code>grid-rows</code></a> and <a href="#grid-columns-property"><code>grid-columns</code></a> properties on the <a href="#grid-element">Grid element</a>. Each Track is defined by declaring a sequential list of sizing functions, one for each Track. Tracks define the space between <a href="#grid-line">Grid Line</a>s.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -472,7 +482,10 @@
<div id="grid-concepts-lines" class="section">
<h4><span class="secno">3.2 </span>Grid Lines</h4>
<p>
- <dfn id="grid-line">Grid Lines</dfn> are the horizontal or vertical dividing lines that exist on either side of a column or row. <a href="#grid-line">Grid Line</a>s may be referred to by their implicit ordinal, or they may be named by the author. Authors use one or more quoted strings to assign names to a Line before or after a Track definition wherever the desired Line would logically exist. A <a href="#grid-item">Grid Item</a> then uses the <a href="#grid-line">Grid Line</a>s to determine its position and available space within the Grid by referencing the <a href="#grid-line">Grid Line</a>s using the shorthand properties grid-row and grid-column. Grid-row and grid-column accept a starting and optional ending Line.
+ <dfn id="grid-line">Grid Lines</dfn> are the horizontal or vertical dividing lines that exist on either side of a column or row. <a href="#grid-line">Grid Line</a>s may be referred to by their <a href="#grid-line">Grid Line</a> number, or they may be named by the author. Authors use one or more quoted strings to assign names to a Line before or after a Track definition wherever the desired Line would logically exist. A <a href="#grid-item">Grid Item</a> then uses the <a href="#grid-line">Grid Line</a>s to determine its position and available space within the Grid by referencing the <a href="#grid-line">Grid Line</a>s using the properties <a href="#grid-row-property"><code>grid-row</code></a> and <a href="#grid-column-property"><code>grid-column</code></a>. <a href="#grid-row-property"><code>Grid-row</code></a> and <a href="#grid-column-property"><code>grid-column</code></a> accept a starting and optional ending Line.
+ </p>
+ <p>
+ The following two examples create three column Grid Lines and four row <a href="#grid-line">Grid Line</a>s. The first example demonstrates how an author would refer to the <a href="#grid-line">Grid Line</a>s using <a href="#grid-line">Grid Line</a> numbers. The second example uses explicitly named <a href="#grid-line">Grid Line</a>s.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -482,8 +495,10 @@
}
#item1 { grid-column: 2; grid-row: 1 4 }
+</style></pre>
- /* equivalent to the above using named lines */
+ <pre class="example"><style type="text/css">
+ /* equivalent layout to the prior example, but using named lines */
#grid {
display: grid;
grid-columns: 150px "item1-start" 1fr "item1-end";
@@ -500,7 +515,7 @@
<div id="grid-concepts-cells" class="section">
<h4><span class="secno">3.3 </span>Grid Cells</h4>
<p>
- <dfn id="grid-cell">Grid Cells</dfn> are the logical space used to lay out one or more <a href="#grid-item">Grid Item</a>s. <a href="#grid-cell">Grid Cell</a>s may be defined explicitly using the grid-template property or the grid-cell pseudo-element. The grid-cell pseudo element uses a functional syntax which accepts a string name for the Cell. The space for the explicitly defined Cell is then defined by referencing <a href="#grid-line">Grid Line</a>s. When a <a href="#grid-cell">Grid Cell</a> is explicitly defined, multiple <a href="#grid-item">Grid Item</a>s may be stacked or layered into the same <a href="#grid-cell">Grid Cell</a>. When a <a href="#grid-item">Grid Item</a> refers to <a href="#grid-line">Grid Line</a>s directly, an anonymous <a href="#grid-cell">Grid Cell</a> is created which contains only the single <a href="#grid-item">Grid Item</a>.
+ <dfn id="grid-cell">Grid Cells</dfn> are the logical space used to lay out one or more <a href="#grid-item">Grid Item</a>s. <a href="#grid-cell">Grid Cell</a>s may be defined explicitly using the <a href="#grid-template-property"><code>grid-template</code></a> property or the <a href="#grid-cell-pseudo-element-selector"><code>grid-cell pseudo-element</code></a>. The <a href="#grid-cell-pseudo-element-selector"><code>grid-cell pseudo-element</code></a> uses a functional syntax which accepts a string name for the Cell. The space for the explicitly defined Cell is then defined by referencing <a href="#grid-line">Grid Line</a>s. When a <a href="#grid-cell">Grid Cell</a> is explicitly defined, multiple <a href="#grid-item">Grid Item</a>s may be stacked or layered into the same <a href="#grid-cell">Grid Cell</a>. When a <a href="#grid-item">Grid Item</a> refers to <a href="#grid-line">Grid Line</a>s directly, an anonymous <a href="#grid-cell">Grid Cell</a> is created which contains only the ingle <a href="#grid-item">Grid Item</a>.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -516,8 +531,10 @@
#item2 { grid-cell: "cell" }
#item3 { grid-cell: "cell" }
+</style></pre>
- /* equivalent markup using the template syntax */
+<pre class="example"><style type="text/css">
+ /* equivalent layout compared to the prior, but using the template syntax */
#grid {
display: grid;
grid-template: "ad"
@@ -570,20 +587,18 @@
</div>
<div id="grid-items" class="section">
- <!--OddPage--><h2><span class="secno">5. </span>Grid Items</h2>
+ <h2><span class="secno">5. </span>Grid Items</h2>
<p>
- Any child element of the Grid having a static or relative position and meeting either of the following two criteria are considered valid <dfn id="grid-item">Grid Items</dfn>:
- </p>
- <ol>
- <li>A computed display value of 'block' or 'inline-block', or</li>
- <li>A computed display value of 'inline' and the element is replaced</li>
- </ol>
+ The <a href="#grid-element">Grid element</a> performs lay out on <a href="#grid-item">Grid Item</a>s. Block-level children, replaced, inline-block children, and atomic, inline-level children of the Grid are considered <a href="#grid-item">Grid Item</a>s.
+ </p>
<p>
- All other children are considered to be invalid and are wrapped in an anonymous block with an 'auto' grid-row and column position. Contiguous runs of invalid <a href="#grid-item">Grid Item</a>s are wrapped in a single anonymous block. Also note that the definition of valid <a href="#grid-item">Grid Item</a>s includes floats, but that the float property is ignored for the purposes of Grid layout.
- </p>
+ Contiguous runs of non-replaced, inline content are wrapped in an anonymous, block-level box, which is then treated as a <a href="#grid-item">Grid Item</a> for the purposes of Grid lay out.
+ Out-of-flow elements (except floats, which are out-of-flow, but are irrelevant to Grid lay out since <a href="#grid-item">Grid Item</a>s can't float) leave behind a "placeholder" in their original source location which is treated like a non-replaced, inline element for the purpose of this wrapping.
+ Any indirect descendants of the <a href="#grid-element">Grid element</a>, including block elements that are contained in inline elements, are not <a href="#grid-item">Grid Item</a>s.
+ </p>
<p>
- The following example produces two <a href="#grid-item">Grid Items</a>: the first <a href="#grid-item">Grid Item</a> is the anonymous block
- wrapping the <code>A</code> and the subsequent <code><span></code>; the second <a href="#grid-item">Grid Item</a> is created by the <code>C <div></code>.
+ The following example produces two <a href="#grid-item">Grid Items</a>: the first <a href="#grid-item">Grid Item</a> is the anonymous block-level box
+ wrapping the <code>A</code> and the subsequent <code><span></code>; the second <a href="#grid-item">Grid Item</a> is created by the block-level box of the <code>C <div></code>.
</p>
<pre class="example"><div style="display:grid;">A<span>B</span><div>C</div></div></pre>
<!--End Section: Grid Items-->
@@ -605,7 +620,7 @@
A <a href="#grid-track">Grid Track</a> is a generic term for a column or row which separates two <a href="#grid-line">Grid Line</a>s. Each <a href="#grid-track">Grid Track</a> is assigned a sizing function, which controls how wide or tall the column or row may grow, and thus how far apart two <a href="#grid-line">Grid Line</a>s are. The sizing function specified can be a length, a percentage of the <a href="#grid-element">Grid element</a>'s size, derived from the contents occupying the column or row, or a proportion of the space which remains in the <a href="#grid-element">Grid element</a>. In the last case, remaining space refers to the width or height of the <a href="#grid-element">Grid element</a> after accounting for space already consumed by columns and rows sized with a length, percentage or content. The size can also be specified as a range using a minmax function, which can combine any of the previously mentioned mechanisms to define a min and max size for the column or row.
</p>
<p>
- In the following example there are two columns and three rows. The first column is 150px wide beginning from the starting edge of the <a href="#grid-element">Grid element</a>'s content box. The second column uses fractional sizing, which is a function of the remaining space in the Grid. It's size will vary as the width of the <a href="#grid-element">Grid element</a> changes. If the used width of the <a href="#grid-element">Grid element</a> is 200px, then the second column 50px wide. If the used width of the <a href="#grid-element">Grid element</a> is 100px, then the second column is 0px and any content positioned in the column will be overflowing the <a href="#grid-element">Grid element</a>. Sizing occurs in a similar fashion for the rows.
+ In the following example there are two columns and three rows. The first column is 150px wide beginning from the starting edge of the <a href="#grid-element">Grid element</a>'s content box. The second column uses fractional sizing, which is a function of the remaining space in the Grid. Its size will vary as the width of the <a href="#grid-element">Grid element</a> changes. If the used width of the <a href="#grid-element">Grid element</a> is 200px, then the second column 50px wide. If the used width of the <a href="#grid-element">Grid element</a> is 100px, then the second column is 0px and any content positioned in the column will be overflowing the <a href="#grid-element">Grid element</a>. Sizing occurs in a similar fashion for the rows.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -720,7 +735,10 @@
<li><strong>fit-content</strong> is equivalent to <code>minmax(min-content, max-content)</code>.</li>
<li><strong>auto</strong> is quivalent to <code>fit-content</code>.</li>
</ul>
-
+ <p class="issue">
+ Flex should also be allowed as a sizing function for a Grid Track. Update the grammar to accept the flex function when the Flexbox spec
+ stabilizes.
+ </p>
<table id="grid-columns-property" class="propdef">
<tbody>
<tr>
@@ -870,7 +888,7 @@
</div>
<script type="text/javascript">
// Returns '"a" 50px "b" 320px "c" "d" ("e" 40px)[2] (0px)[4] 50px'.
- getComputedStyle(document.getElementById("grid")).gridColumns
+ window.getComputedStyle(document.getElementById("grid"), null).getPropertyValue("grid-columns")
</script></pre>
<!--End Section: Fraction Values: 'fr'-->
</div>
@@ -1004,23 +1022,32 @@
The prior example created an anonymous <a href="#grid-cell">Grid Cell</a> that holds a single <a href="#grid-item">Grid Item</a>. <a href="#grid-cell">Grid Cell</a>s can be created explicitly using the grid-cell pseudo element function. The function accepts as its only parameter a string name to associate with the <a href="#grid-cell">Grid Cell</a>. <a href="#grid-cell">Grid Cell</a>s are positioned and sized using the grid-row and grid-column properties. Once defined, multiple <a href="#grid-item">Grid Item</a>s can be placed into the <a href="#grid-cell">Grid Cell</a> by referring to it by name using the grid-cell property.
</p>
<p>
- When multiple items are placed into a single <a href="#grid-cell">Grid Cell</a>, they can be stacked or layered. Layering places each <a href="#grid-item">Grid Item</a> over the other in accordance with the grid-layer property (described in <a href="#grid-item">Grid Item</a> Layering). Stacking places <a href="#grid-item">Grid Item</a>s one after the other in the direction of increasing column or row numbers depending on the value of the grid-cell-stacking property.
+ When multiple items are placed into a single <a href="#grid-cell">Grid Cell</a>, they can be stacked or layered. Layering places each <a href="#grid-item">Grid Item</a> over the other in accordance with the grid-layer property (described in <a href="#drawing-order-of-grid-items">Drawing Order of Grid Items</a>). Stacking places <a href="#grid-item">Grid Item</a>s one after the other in the direction of increasing column or row numbers depending on the value of the grid-cell-stacking property.
+ </p>
+ <p class="issue">
+ Grid-cell-stacking introduces behavior that is similar to Flexbox. Why not just allow an author to specify a display on explicitly defined Grid Cells
+ to control how its contents lay out instead? Setting <code>#grid::grid-cell("foo") { display:flexbox }</code> would trigger creation of an anonymous Flexbox that performs lay out
+ on every item placed into the Grid Cell as though they were Flex Items. <code>display:block</code> would cause items to lay out as though they were part
+ of the normal flow. What type of display would allow behavior that is consistent with the default layering though? <code>display: grid-item</code>?
</p>
<p>
The following example explicitly defines a <a href="#grid-cell">Grid Cell</a> 'nav' and stacks all child links of the <a href="#grid-element">Grid element</a> into the 'nav' <a href="#grid-cell">Grid Cell</a>.
</p>
<pre class="example"><style type="text/css">
#grid {
- grid-columns: auto 1fr;
- grid-rows: auto 1fr;
+ grid-columns: auto 1fr;
+ grid-rows: auto 1fr;
}
#grid::grid-cell("nav") {
- grid-column: start; /* first column */
- grid-row: start end; /* all rows */
+ grid-column: start; /* first column */
+ grid-row: start end; /* all rows */
+
+ /* stack items placed into this cell one after the other in the 'rows' direction */
+ grid-cell-stacking: rows;
}
#grid > a {
- display:block; /* make anchor tags valid Grid Items */
- grid-cell: "nav";
+ display:block; /* make anchor tags valid Grid Items */
+ grid-cell: "nav";
}
</style></pre>
@@ -1083,9 +1110,9 @@
<p>
The grid-cell-stacking property defines the stacking direction used to place <a href="#grid-item">Grid Item</a>s within a <a href="#grid-cell">Grid Cell</a>. When the value is 'columns', <a href="#grid-item">Grid Item</a>s
are stacked one after the other in the inline direction. Similarly for 'rows', <a href="#grid-item">Grid Item</a>s are stacked one after the other in the direction
- of block progression. When the value is 'layer', <a href="#grid-item">Grid Item</a>s are layered on top of one another. The order that <a href="#grid-item">Grid Item</a>s are stacked is specified by the
- ordinal-group property. The order that items are layered is specified by the grid-layer property. When the grid-layer or ordinal-group property is the same
- among <a href="#grid-item">Grid Item</a>s, they are layered or stacked in source order.
+ of block progression. When the value is 'layer', <a href="#grid-item">Grid Item</a>s are layered on top of one another. The order that <a href="#grid-item">Grid Item</a>s are stacked is
+ determined by source order. The order that items are layered is specified by the grid-layer property. When two or more <a href="grid-item">Grid Items</a> have the same vlaue for grid-layer, source order determines
+ which is layered first.
</p>
<p>
When <a href="#grid-item">Grid Item</a>s are stacked, the <a href="#grid-item">Grid Item</a> alignment properties only apply in the direction orthogonal to block progression. If the grid-cell-stacking
@@ -1112,7 +1139,7 @@
</tr>
<tr>
<td>Initial:</td>
- <td>'rows'</td>
+ <td>'layer'</td>
</tr>
<tr>
<td>Applies to:</td>
@@ -1211,6 +1238,8 @@
<h3><span class="secno">7.4</span> Grid-row-span and Grid-column-span</h3>
<p>
As an alternative to specifying an ending line for a <a href="#grid-cell">Grid Cell</a> or <a href="#grid-item">Grid Item</a>, grid-row-span and grid-column-span properties are available to specify a distance (line count) from the starting line to the ending line to define the dimensions of a <a href="#grid-cell">Grid Cell</a>.
+ Note that when grid-column-span and a grid-column ending line are both specified for a <a href="#grid-item">Grid Item</a>, that the ending line has priority. In such cases the computed value of grid-column-span will be the <a href="#grid-line">Grid Line</a> number of the specified column ending line minus the <a href="#grid-line">Grid Line</a> number of the specified column starting line.
+ The same holds true for the related row properties.
</p>
<pre class="example"><style type="text/css">
#item {
Received on Monday, 21 March 2011 04:37:55 UTC