Skip to content

Commit 43841d4

Browse files
alexmog1alexmog1
committed
*** empty log message ***
1 parent 9094b2b commit 43841d4

1 file changed

Lines changed: 184 additions & 3 deletions

File tree

‎css3-grid-align/Overview.html‎

Lines changed: 184 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,11 @@ <h2 class="introductory">Table of Contents</h2>
153153
<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>
154154
</ul>
155155
</li>
156+
<li class="tocline"><a class="tocxref" href="#automatic-placement-of-grid-items"><span class="secno">7.6 </span>Automatic Placement of Grid Items</a>
157+
<ul class="toc">
158+
<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>
159+
</ul>
160+
</li>
156161
</ul>
157162
</li>
158163
<li class="tocline"><a class="tocxref" href="#grid-item-alignment"><span class="secno">8. </span>Grid Item Alignment</a>
@@ -203,7 +208,7 @@ <h2><span class="secno">2. </span>Introduction</h2>
203208
<h3><span class="secno">2.1 </span>Basic Capabilities of the Grid</h3>
204209

205210
<div class="sidefigure">
206-
<img class="figure" alt="Image: Application layout example requiring horizontal and vertical alignment." src="files/basic-form.png">
211+
<img class="figure" alt="Image: Application layout example requiring horizontal and vertical alignment." src="files/basic-form.png" />
207212
<p class="caption">Application layout example requiring horizontal and vertical alignment.</p>
208213
</div>
209214

@@ -1410,6 +1415,182 @@ <h4><span class="secno">7.5.1</span> Defining a Default Size for Implicit Column
14101415
<!--End Section: Implicit Columns and Rows-->
14111416
</div>
14121417

1418+
<div id="automatic-placement-of-grid-items" class="section">
1419+
<h3><span class="secno">7.6</span> Automatic Placement of Grid Items</h3>
1420+
<p class="note">
1421+
This section describes early thinking around automatic placement of Grid Items. Multiple algorithms are possible for such a feature.
1422+
One is proposed here.
1423+
</p>
1424+
<p>
1425+
<a href="#grid-item">Grid Item</a>s can be automatically placed into an unoccupied space of the Grid.
1426+
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.
1427+
Note that <a href="#grid-cell">Grid Cell</a>s cannot be automatically placed.
1428+
</p>
1429+
<p>
1430+
A grid-flow value of 'rows' will search across columns and then rows for unoccupied space, and will create additional rows
1431+
as needed to accomodate content. Similarly, a grid-flow value of 'columns' searches rows first and creates additional
1432+
columns as needed until sufficient space is found.
1433+
</p>
1434+
<table id="grid-flow-property" class="propdef">
1435+
<tbody>
1436+
<tr>
1437+
<td>Name:</td>
1438+
<td><dfn id="grid-flow">grid-flow</dfn></td>
1439+
</tr>
1440+
<tr>
1441+
<td>Value:</td>
1442+
<td>'none' | 'rows' | 'columns'</td>
1443+
</tr>
1444+
<tr>
1445+
<td>Initial:</td>
1446+
<td>none</td>
1447+
</tr>
1448+
<tr>
1449+
<td>Applies to:</td>
1450+
<td>Grid elements</td>
1451+
</tr>
1452+
<tr>
1453+
<td>Inherited:</td>
1454+
<td>no</td>
1455+
</tr>
1456+
<tr>
1457+
<td>Percentages:</td>
1458+
<td>n/a</td>
1459+
</tr>
1460+
<tr>
1461+
<td>Media:</td>
1462+
<td>visual, paged</td>
1463+
</tr>
1464+
<tr>
1465+
<td>Computed value:</td>
1466+
<td>specified value</td>
1467+
</tr>
1468+
</tbody>
1469+
</table>
1470+
<div class="sidefigure">
1471+
<p>
1472+
<img alt="Image: A form arranged using automatic placement." src="files/auto-placed-form.png" />
1473+
</p>
1474+
<p class="caption">A form arranged using automatic placement.</p>
1475+
</div>
1476+
<p>
1477+
The search for unoccupied space is conducted one <a href="#grid-item">Grid Item</a> at a time.
1478+
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
1479+
<a href="#grid-item">Grid Item</a>s which have both a grid-row and grid-column value of 'auto'.
1480+
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
1481+
an auto value for grid-column. The reverse is true when grid-flow is 'columns'.
1482+
</p>
1483+
<p>
1484+
In the following example, there are three columns, each auto-sized to their contents.
1485+
No rows are explicitly defined. The grid-flow property is 'rows' which instructs the grid
1486+
to search across its three columns starting with the first row, then the next, adding rows
1487+
as needed until sufficient space is located to accomodate the position of any auto-placed
1488+
<a href="#grid-item">Grid Item</a>.
1489+
Figure 11 illustrates the result.
1490+
</p>
1491+
<pre class="example">&lt;style type="text/css"&gt;
1492+
form {
1493+
display: grid;
1494+
grid-columns: "labels" auto "controls" auto "oversized" auto;
1495+
grid-flow: rows
1496+
}
1497+
form &gt; input, form &gt; select {
1498+
/* Place all controls in the "controls" column and automatically find the next available row. */
1499+
grid-column: "controls";
1500+
grid-row: auto
1501+
}
1502+
form &gt; label {
1503+
/* Ensure that label is a valid grid item by setting its display to 'block'. */
1504+
display: block;
1505+
1506+
/* Place all labels in the "labels" column and automatically find the next available row. */
1507+
grid-column: "labels";
1508+
grid-row: auto
1509+
}
1510+
1511+
#department {
1512+
/* Auto place this item in the "oversized" column in the first row where a cell that spans three rows */
1513+
/* won't overlap other explicitly placed items or cells or any items automatically placed prior to */
1514+
/* this cell. */
1515+
grid-column: "oversized";
1516+
grid-row: auto;
1517+
grid-row-span: 3;
1518+
}
1519+
1520+
/* Place all the buttons of the form in the explicitly defined grid cell. */
1521+
#buttons {
1522+
grid-row: auto;
1523+
1524+
/* Ensure the button cell spans the entire grid element in the column direction. */
1525+
grid-column: start end;
1526+
grid-column-align: end
1527+
}
1528+
&lt;/style&gt;
1529+
&lt;form action="#"&gt;
1530+
&lt;label for="firstname"&gt;First name:&lt;/label&gt;
1531+
&lt;input type="text" id="firstname" name="firstname" /&gt;
1532+
&lt;label for="lastname"&gt;Last name:&lt;/label&gt;
1533+
&lt;input type="text" id="lastname" name="lastname" /&gt;
1534+
&lt;label for="address"&gt;Address:&lt;/label&gt;
1535+
&lt;input type="text" id="address" name="address" /&gt;
1536+
&lt;label for="address2"&gt;Address 2:&lt;/label&gt;
1537+
&lt;input type="text" id="address2" name="address2" /&gt;
1538+
&lt;label for="city"&gt;City:&lt;/label&gt;
1539+
&lt;input type="text" id="city" name="city" /&gt;
1540+
&lt;label for="state"&gt;State:&lt;/label&gt;
1541+
&lt;select type="text" id="state" name="state"&gt;
1542+
&lt;option value="WA"&gt;Washington&lt;/option&gt;
1543+
&lt;/select&gt;
1544+
&lt;label for="zip"&gt;Zip:&lt;/label&gt;
1545+
&lt;input type="text" id="zip" name="zip" /&gt;
1546+
1547+
&lt;div id="department"&gt;
1548+
&lt;label for="department"&gt;Department:&lt;/label&gt;
1549+
&lt;select id="department" name="department" multiple&gt;
1550+
&lt;option value="finance"&gt;Finance&lt;/option&gt;
1551+
&lt;option value="humanresources"&gt;Human Resources&lt;/option&gt;
1552+
&lt;option value="marketing"&gt;Marketing&lt;/option&gt;
1553+
&lt;option value="payroll"&gt;Payroll&lt;/option&gt;
1554+
&lt;option value="shipping"&gt;Shipping&lt;/option&gt;
1555+
&lt;/select&gt;
1556+
&lt;/div&gt;
1557+
1558+
&lt;div id="buttons"&gt;
1559+
&lt;button id="cancel"&gt;Cancel&lt;/button&gt;
1560+
&lt;button id="back"&gt;Back&lt;/button&gt;
1561+
&lt;button&gt; id="next"&gt;Next&lt;/button&gt;
1562+
&lt;/div&gt;
1563+
&lt;/form&gt;</pre>
1564+
<div id="automatic-grid-item-placement-algorithm" class="section">
1565+
<h4><span class="secno">7.6.1</span> Automatic Grid Item Placement Algorithm</h4>
1566+
<p>
1567+
The following summarizes the algorithm for auto placement of Grid Items. For each Grid Item in source order:
1568+
</p>
1569+
<ol>
1570+
<li>If both grid-row and grid-column are not 'auto' the Grid Item is placed as specified:
1571+
<ol>
1572+
<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>
1573+
<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>
1574+
</ol>
1575+
</li>
1576+
<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:
1577+
<ol>
1578+
<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>
1579+
<li>Otherwise:
1580+
<ol>
1581+
<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>
1582+
<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>
1583+
</ol>
1584+
</li>
1585+
</ol>
1586+
</li>
1587+
</ol>
1588+
<!--End Section: Automatic Grid Item Placement Algorithm-->
1589+
</div>
1590+
<!--End Section: Grid Item Auto Placement-->
1591+
</div>
1592+
1593+
14131594
<!--End Section: Grid Item Placement-->
14141595
</div>
14151596

@@ -1453,7 +1634,7 @@ <h2><span class="secno">8. </span>Grid Item Alignment</h2>
14531634
and for the definitions of inline direction and block flow direction. [<cite><a href="#bib-CSS3WRITINGMODES" rel="biblioentry" class="bibref">CSS3WRITINGMODES</a></cite>]
14541635
</p>
14551636
<p>
1456-
Figures 11, 12, and 13 illustrate the placement and orientation of the <a href="#grid-element">Grid element's</a> rows, columns, and
1637+
Figures 12, 13, and 14 illustrate the placement and orientation of the <a href="#grid-element">Grid element's</a> rows, columns, and
14571638
<a href="#grid-item">Grid Item</a>s using different writing modes on the <a href="#grid-element">Grid element</a>.
14581639
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.
14591640
<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 @@ <h2><span class="secno">9. </span>Drawing Order of Grid Items</h2>
16041785
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.
16051786
</p>
16061787
<p>
1607-
Figure 14 illustrates the drawing order of the markup shown in the following example.
1788+
Figure 15 illustrates the drawing order of the markup shown in the following example.
16081789
</p>
16091790
<pre class="example">&lt;style type="text/css"&gt;
16101791
#grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr }

0 commit comments

Comments
 (0)