- From: Alex Mogilevsky via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 08 Mar 2011 08:06:29 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-grid-align
In directory hutz:/tmp/cvs-serv23687
Modified Files:
Overview.html
Log Message:
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-grid-align/Overview.html,v
retrieving revision 1.6
retrieving revision 1.7
diff -u -d -r1.6 -r1.7
--- Overview.html 8 Mar 2011 02:05:39 -0000 1.6
+++ Overview.html 8 Mar 2011 08:06:27 -0000 1.7
@@ -153,6 +153,11 @@
<li class="tocline"><a class="tocxref" href="#defining-default-size-for-implicit-columns-and-rows"><span class="secno">7.5.1 </span>Defining a Default Size for Implicit Columns and Rows</a></li>
</ul>
</li>
+ <li class="tocline"><a class="tocxref" href="#automatic-placement-of-grid-items"><span class="secno">7.6 </span>Automatic Placement of Grid Items</a>
+ <ul class="toc">
+ <li class="tocline"><a class="tocxref" href="#automatic-grid-item-placement-algorithm"><span class="secno">7.6.1 </span>Automatic Grid Item Placement Algorithm</a></li>
+ </ul>
+ </li>
</ul>
</li>
<li class="tocline"><a class="tocxref" href="#grid-item-alignment"><span class="secno">8. </span>Grid Item Alignment</a>
@@ -203,7 +208,7 @@
<h3><span class="secno">2.1 </span>Basic Capabilities of the Grid</h3>
<div class="sidefigure">
- <img class="figure" alt="Image: Application layout example requiring horizontal and vertical alignment." src="files/basic-form.png">
+ <img class="figure" alt="Image: Application layout example requiring horizontal and vertical alignment." src="files/basic-form.png" />
<p class="caption">Application layout example requiring horizontal and vertical alignment.</p>
</div>
@@ -1410,6 +1415,182 @@
<!--End Section: Implicit Columns and Rows-->
</div>
+ <div id="automatic-placement-of-grid-items" class="section">
+ <h3><span class="secno">7.6</span> Automatic Placement of Grid Items</h3>
+ <p class="note">
+ This section describes early thinking around automatic placement of Grid Items. Multiple algorithms are possible for such a feature.
+ One is proposed here.
+ </p>
+ <p>
+ <a href="#grid-item">Grid Item</a>s can be automatically placed into an unoccupied space of the Grid.
+ The grid-flow property controls the direction in which the search for unoccupied space takes place, and whether rows or columns are added as needed to accomodate the content.
+ Note that <a href="#grid-cell">Grid Cell</a>s cannot be automatically placed.
+ </p>
+ <p>
+ A grid-flow value of 'rows' will search across columns and then rows for unoccupied space, and will create additional rows
+ as needed to accomodate content. Similarly, a grid-flow value of 'columns' searches rows first and creates additional
+ columns as needed until sufficient space is found.
+ </p>
+ <table id="grid-flow-property" class="propdef">
+ <tbody>
+ <tr>
+ <td>Name:</td>
+ <td><dfn id="grid-flow">grid-flow</dfn></td>
+ </tr>
+ <tr>
+ <td>Value:</td>
+ <td>'none' | 'rows' | 'columns'</td>
+ </tr>
+ <tr>
+ <td>Initial:</td>
+ <td>none</td>
+ </tr>
+ <tr>
+ <td>Applies to:</td>
+ <td>Grid elements</td>
+ </tr>
+ <tr>
+ <td>Inherited:</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>Percentages:</td>
+ <td>n/a</td>
+ </tr>
+ <tr>
+ <td>Media:</td>
+ <td>visual, paged</td>
+ </tr>
+ <tr>
+ <td>Computed value:</td>
+ <td>specified value</td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="sidefigure">
+ <p>
+ <img alt="Image: A form arranged using automatic placement." src="files/auto-placed-form.png" />
+ </p>
+ <p class="caption">A form arranged using automatic placement.</p>
+ </div>
+ <p>
+ The search for unoccupied space is conducted one <a href="#grid-item">Grid Item</a> at a time.
+ First <a href="#grid-item">Grid Item</a>s which have a constraint on either their grid-row or grid-column are placed, followed by
+ <a href="#grid-item">Grid Item</a>s which have both a grid-row and grid-column value of 'auto'.
+ If grid-flow is 'rows', <a href="#grid-item">Grid Item</a>s having an auto value for grid-row are placed before those with
+ an auto value for grid-column. The reverse is true when grid-flow is 'columns'.
+ </p>
+ <p>
+ In the following example, there are three columns, each auto-sized to their contents.
+ No rows are explicitly defined. The grid-flow property is 'rows' which instructs the grid
+ to search across its three columns starting with the first row, then the next, adding rows
+ as needed until sufficient space is located to accomodate the position of any auto-placed
+ <a href="#grid-item">Grid Item</a>.
+ Figure 11 illustrates the result.
+ </p>
+ <pre class="example"><style type="text/css">
+ form {
+ display: grid;
+ grid-columns: "labels" auto "controls" auto "oversized" auto;
+ grid-flow: rows
+ }
+ form > input, form > select {
+ /* Place all controls in the "controls" column and automatically find the next available row. */
+ grid-column: "controls";
+ grid-row: auto
+ }
+ form > label {
+ /* Ensure that label is a valid grid item by setting its display to 'block'. */
+ display: block;
+
+ /* Place all labels in the "labels" column and automatically find the next available row. */
+ grid-column: "labels";
+ grid-row: auto
+ }
+
+ #department {
+ /* Auto place this item in the "oversized" column in the first row where a cell that spans three rows */
+ /* won't overlap other explicitly placed items or cells or any items automatically placed prior to */
+ /* this cell. */
+ grid-column: "oversized";
+ grid-row: auto;
+ grid-row-span: 3;
+ }
+
+ /* Place all the buttons of the form in the explicitly defined grid cell. */
+ #buttons {
+ grid-row: auto;
+
+ /* Ensure the button cell spans the entire grid element in the column direction. */
+ grid-column: start end;
+ grid-column-align: end
+ }
+</style>
+<form action="#">
+ <label for="firstname">First name:</label>
+ <input type="text" id="firstname" name="firstname" />
+ <label for="lastname">Last name:</label>
+ <input type="text" id="lastname" name="lastname" />
+ <label for="address">Address:</label>
+ <input type="text" id="address" name="address" />
+ <label for="address2">Address 2:</label>
+ <input type="text" id="address2" name="address2" />
+ <label for="city">City:</label>
+ <input type="text" id="city" name="city" />
+ <label for="state">State:</label>
+ <select type="text" id="state" name="state">
+ <option value="WA">Washington</option>
+ </select>
+ <label for="zip">Zip:</label>
+ <input type="text" id="zip" name="zip" />
+
+ <div id="department">
+ <label for="department">Department:</label>
+ <select id="department" name="department" multiple>
+ <option value="finance">Finance</option>
+ <option value="humanresources">Human Resources</option>
+ <option value="marketing">Marketing</option>
+ <option value="payroll">Payroll</option>
+ <option value="shipping">Shipping</option>
+ </select>
+ </div>
+
+ <div id="buttons">
+ <button id="cancel">Cancel</button>
+ <button id="back">Back</button>
+ <button> id="next">Next</button>
+ </div>
+</form></pre>
+ <div id="automatic-grid-item-placement-algorithm" class="section">
+ <h4><span class="secno">7.6.1</span> Automatic Grid Item Placement Algorithm</h4>
+ <p>
+ The following summarizes the algorithm for auto placement of Grid Items. For each Grid Item in source order:
+ </p>
+ <ol>
+ <li>If both grid-row and grid-column are not 'auto' the Grid Item is placed as specified:
+ <ol>
+ <li>If grid-row is not auto, the Grid Item is placed between the starting and ending lines specified by the grid-row property. An implicit Grid Line number is assigned as the starting line for grid-column such that the Grid Item does not overlap Grid Items already placed in the Grid. If necessary, new column Grid Lines are created to satisfy this constraint.</li>
+ <li>If grid-column is not auto, the Grid Item is placed between the starting and ending lines specified by the grid-column property. An implicit Grid Line number is assigned as the starting line for grid-row such that the Grid Item does not overlap Grid Items already placed in the Grid. If necessary, new row Grid Lines are created to satisfy this constraint.</li>
+ </ol>
+ </li>
+ <li>Otherwise when both grid-column and grid-row are 'auto', beginning with the implicit Grid Line numbers of the previously placed Grid Item, or (1, 1) if this is the first Grid Item to be automatically placed:
+ <ol>
+ <li>Place the Grid Item in the Grid Cell currently defined by the grid-row and grid-column auto position if not already occupied by another Grid Item.</li>
+ <li>Otherwise:
+ <ol>
+ <li>If grid-flow is 'rows', increment the grid-column. If the grid-column value is outside of bounds of the grid (as defined at this point, explicitly or by previously placed items), set grid-column to one and increment grid-row (creating new row Grid Lines as needed).</li>
+ <li>If grid-flow is 'columns', increment grid-row. If the grid-row value is outside of bounds of the grid (as defined at this point, explicitly or by previously placed items), set grid-row to one and increment grid-column (creating new column Grid Lines as needed).</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ <!--End Section: Automatic Grid Item Placement Algorithm-->
+ </div>
+ <!--End Section: Grid Item Auto Placement-->
+ </div>
+
+
<!--End Section: Grid Item Placement-->
</div>
@@ -1453,7 +1634,7 @@
and for the definitions of inline direction and block flow direction. [<cite><a href="#bib-CSS3WRITINGMODES" rel="biblioentry" class="bibref">CSS3WRITINGMODES</a></cite>]
</p>
<p>
- Figures 11, 12, and 13 illustrate the placement and orientation of the <a href="#grid-element">Grid element's</a> rows, columns, and
+ Figures 12, 13, and 14 illustrate the placement and orientation of the <a href="#grid-element">Grid element's</a> rows, columns, and
<a href="#grid-item">Grid Item</a>s using different writing modes on the <a href="#grid-element">Grid element</a>.
In each of the figures, the markup shown in the following example is used to place <a href="#grid-item">Grid Item</a> A in column 1, row 1, and <a href="#grid-item">Grid Item</a> B in column 2, row 2.
<a href="#grid-item">Grid Item</a> A is aligned in each figure to the starting edges of its row and column.
@@ -1604,7 +1785,7 @@
In cases where <a href="#grid-item">Grid Item</a>s occupy the same <a href="#grid-layer">grid-layer</a>, source order determines which item will be drawn first.
</p>
<p>
- Figure 14 illustrates the drawing order of the markup shown in the following example.
+ Figure 15 illustrates the drawing order of the markup shown in the following example.
</p>
<pre class="example"><style type="text/css">
#grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr }
Received on Tuesday, 8 March 2011 08:06:32 UTC