- From: Alex Mogilevsky via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 08 Mar 2011 02:05:41 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-grid-align
In directory hutz:/tmp/cvs-serv19766
Modified Files:
Overview.html
Log Message:
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-grid-align/Overview.html,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- Overview.html 7 Mar 2011 19:59:41 -0000 1.5
+++ Overview.html 8 Mar 2011 02:05:39 -0000 1.6
@@ -49,12 +49,12 @@
Like tables, the Grid enables an author to align elements into columns and rows,
but unlike tables, the Grid doesn't have content structure, and thus enables a wide
variety of layouts not possible with tables. For example, the children of the Grid
- can position themselves with Grid Lines such that they overlap and layer similar to
+ can position themselves with <a href="#grid-line">Grid Line</a>s such that they overlap and layer similar to
positioned elements.
</p>
<p>
In addition, the absence of content structure in the Grid helps to manage changes to layout
- by using fluid and source order independent layout techniques. By combining media queries
+ by using fluid and source order independent lay out techniques. By combining media queries
with the CSS properties that control layout of the Grid and its children, authors can adapt
their layout to changes in device form factors, orientation, and available space, without needing to
alter the semantic nature of their content.
@@ -104,10 +104,9 @@
<li class="tocline"><a class="tocxref" href="#Introduction"><span class="secno">2. </span>Introduction</a>
<ul class="toc">
<li class="tocline"><a class="tocxref" href="#basic-capabilities"><span class="secno">2.1 </span>Basic Capabilities of the Grid</a></li>
- <li class="tocline"><a class="tocxref" href="#adapting-to-available-space"><span class="secno">2.2 </span>Adapting to Available Space for Layout</a></li>
+ <li class="tocline"><a class="tocxref" href="#adapting-to-available-space"><span class="secno">2.2 </span>Adapting Layouts to Available Space</a></li>
<li class="tocline"><a class="tocxref" href="#source-independence"><span class="secno">2.3 </span>Source Independence</a></li>
<li class="tocline"><a class="tocxref" href="#grid-layering-of-elements"><span class="secno">2.4 </span>Grid Layering of Elements</a></li>
- <li class="tocline"><a class="tocxref" href="#automatic-placement"><span class="secno">2.5 </span>Automatic Placement</a></li>
</ul>
</li>
<li class="tocline"><a class="tocxref" href="#grid-concepts"><span class="secno">3. </span>Core Concepts of the Grid</a>
@@ -154,7 +153,6 @@
<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="#grid-item-and-grid-cell-auto-placement"><span class="secno">7.6 </span>Grid Item and Grid Cell Auto Placement</a></li>
</ul>
</li>
<li class="tocline"><a class="tocxref" href="#grid-item-alignment"><span class="secno">8. </span>Grid Item Alignment</a>
@@ -210,18 +208,18 @@
</div>
<p>
- As websites evolved from simple documents into complex, interactive applications, tools for document layout, e.g. floats, were not necessarily well suited for layout of applications. By using a combination of tables, JavaScript, or careful measurements on floated elements, authors discovered workarounds to achieve desired layouts. Layouts that adapted to the available space were often brittle and resulted in counter-intuitive behavior as space became constrained. As an alternative, authors of many web applications opted for a fixed layout that cannot take advantage of changes in the available rendering space on a screen.
+ As websites evolved from simple documents into complex, interactive applications, tools for document lay out, e.g. floats, were not necessarily well suited for application lay out. By using a combination of tables, JavaScript, or careful measurements on floated elements, authors discovered workarounds to achieve desired layouts. Layouts that adapted to the available space were often brittle and resulted in counter-intuitive behavior as space became constrained. As an alternative, authors of many web applications opted for a fixed layout that cannot take advantage of changes in the available rendering space on a screen.
</p>
<p>
- The layout capabilities of the Grid address these problems. The Grid provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their application by referencing the Grid Lines between the columns and rows, or by defining and referencing a Grid Cell, which is a rectangular space covering an intersection of columns and rows. Figure 1 illustrates a basic layout which can be achieved with the Grid.
+ The lay out capabilities of the Grid address these problems. The Grid provides a mechanism for authors to divide available space for lay out into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their application by referencing the <a href="#grid-line">Grid Line</a>s between the columns and rows, or by defining and referencing a <a href="#grid-cell">Grid Cell</a>, which is a rectangular space covering an intersection of columns and rows. Figure 1 illustrates a basic layout which can be achieved with the Grid.
</p>
<!--End Section: Basic Capabilities of the Grid-->
</div>
<div id="adapting-to-available-space" class="section">
- <h3><span class="secno">2.2 </span>Adapting to Available Space for Layout</h3>
+ <h3><span class="secno">2.2 </span>Adapting Layouts to Available Space</h3>
<div class="sidefigure">
<p>
<img alt="Image: Five grid items arranged according to content size and available space." src="files/game-smaller.png" />
@@ -343,11 +341,11 @@
}
/* The grid-cell property places a grid item into named region (cell) of the grid. */
- #title { grid-cell: t }
- #score { grid-cell: s }
- #stats { grid-cell: a }
- #board { grid-cell: b }
- #controls { grid-cell: c }
+ #title { grid-cell: "t" }
+ #score { grid-cell: "s" }
+ #stats { grid-cell: "a" }
+ #board { grid-cell: "b" }
+ #controls { grid-cell: "c" }
</style>
<div id="grid">
@@ -382,7 +380,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 Grid Items.
+ 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.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -398,6 +396,7 @@
"fill-split" auto
"thumb-end" 0.5fr
"track-end" auto
+ "end";
}
/* Grid-column and grid-row accept a starting and optional endling line. Below the lines are referred to by name. */
@@ -429,139 +428,17 @@
<!--End Section: Grid Layering of Elements-->
</div>
- <div id="automatic-placement" class="section">
- <h3><span class="secno">2.5</span> Automatic Placement</h3>
- <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>
- Form layout is a common scenario for web application authors. Labels and controls are commonly arranged using tables to ensure that wrapping lines of label text remain in alignment with the correct control and with other labels. Achieving a layout that ensures proper alignment with tables is trivial, but requires additional markup that detracts from its meaning while complicating the document processing for assistive technologies.
- </p>
- <p>
- The Grid offers an alternative mechanism for form layout. The markup for the form remains simple as the Grid has no content structure of its own. Further, the Grid has an automatic layout system that keeps the required CSS to a minimum for simple scenarios.
- </p>
- <p>
- Compare Figure 7 to Figure 1. The Grid layout specified in CSS in the following example would be same for either figure. As new items are added to the form new rows are created to accomodate the content.
- </p>
- <pre class="example"><style type="text/css">
- form {
- display: grid;
-
- /* Three columns, each sized to content. Label the grid lines which start each column with a meaningful name. */
- grid-columns: "labels" auto "controls" auto "oversized" auto;
-
- /* Allow automatically placed items that require additional space to create new rows. The search for suitable */
- /* existing space proceeds across columns then rows when grid-flow is rows. Rows are added as needed. */
- 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
- }
-
- /* Establish a grid cell to hold all buttons explicitly using the grid-cell pseudo-element. */
- form::grid-cell("buttons") {
- /* Stack all items placed in this cell such that the blocks progress in the same direction as the columns */
- /* of the Grid. */
- grid-cell-stacking: columns;
-
- /* Find the next available row. Grid cells can be automatically placed just like grid items if their */
- /* ordinal group property is set such that their order can be determined relative to other placed items. */
- ordinal-group: 100;
- grid-row: auto;
-
- /* Ensure the button cell spans the entire grid element in the column direction. */
- grid-column: start end;
-
- /* When the cell uses a stacking type other than layered, its alignment can be set in a meaningful way */
- /* such that the stacked contents of the cell align to the edges as indicated by the alignment properties */
- /* assigned to the cell itself. Note that this alignment applies to the stacked contents inside the cell */
- /* and not the cell itself. The edges of the cell always touch the grid lines which define its bounds. */
- grid-column-align: end
- }
- /* Place all the buttons of the form in the explicitly defined grid cell. */
- form > button {
- grid-cell: "buttons";
- }
-
- form::grid-cell("department") {
- /* Stack contents in the rows direction. */
- grid-cell-stacking: rows;
-
- /* 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;
- }
- form > label[for=department] {
- grid-cell: "department"
- }
- form > #department {
- display: block;
- grid-cell: "department";
- }
-</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" />
-
- <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>
-
- <button id="cancel">Cancel</button>
- <button id="back">Back</button>
- <button> id="next">Next</button>
-</form></pre>
-
- <!--End Section: Automatic Placement-->
- </div>
-
<!--End Section: Introduction-->
</div>
<div id="grid-concepts" class="section">
<h2><span class="secno">3 </span>Core Concepts of the Grid</h2>
<div class="sidefigure">
- <img class="figure" alt="Image: A diagram illustrating the relationship between the Grid Element and its Tracks, Lines, Cells and Items." src="files/grid-concepts.png">
- <p class="caption">A diagram illustrating the relationship between the Grid Element and its Tracks, Lines, Cells and Items.</p>
+ <img class="figure" alt="Image: A diagram illustrating the relationship between the Grid Element and its Tracks, Lines, Cells and Items." src="files/grid-concepts.png" />
+ <p class="caption">A diagram illustrating the relationship between the <a href="#grid-element">Grid element</a> and its Tracks, Lines, Cells and Items.</p>
</div>
<p>
- A Grid element is declared in markup by setting the display property of an element to 'grid'. Child elements of the Grid are termed Grid Items and may be positioned and sized by the Grid element by leveraging the following logical concepts.
+ A <dfn id="grid-element">Grid element</dfn> is declared in markup by setting the display property of an element to 'grid'. Child elements of the Grid are termed <a href="#grid-item">Grid Item</a>s and may be positioned and sized by the <a href="#grid-element">Grid element</a> by leveraging the following logical concepts.
</p>
<ul>
<li>Grid Tracks</li>
@@ -575,7 +452,7 @@
<div id="grid-concepts-tracks" class="section">
<h4><span class="secno">3.1 </span>Grid Tracks</h4>
<p>
- Grid tracks are the columns and rows of the Grid defined with the grid-rows and grid-columns properties on the Grid element. Each Track is defined by declaring a sequential list of sizing functions, one for each Track. Tracks define the space between Grid Lines.
+ <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.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -590,7 +467,7 @@
<div id="grid-concepts-lines" class="section">
<h4><span class="secno">3.2 </span>Grid Lines</h4>
<p>
- Grid Lines are the horizontal or vertical dividing lines that exist on either side of a column or row. Grid Lines 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 Grid Item then uses the Grid Lines to determine its position and available space within the Grid by referencing the Grid Lines 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 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.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -618,7 +495,7 @@
<div id="grid-concepts-cells" class="section">
<h4><span class="secno">3.3 </span>Grid Cells</h4>
<p>
- Grid Cells are the logical space used to layout one or more Grid Items. Grid Cells 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 Grid Lines. When a Grid Cell is explicitly defined, multiple Grid Items may be stacked or layered into the same Grid Cell. When a Grid Item refers to Grid Lines directly, an anonymous Grid Cell is created which contains only the single Grid Item.
+ <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>.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -690,14 +567,14 @@
<div id="grid-items" class="section">
<!--OddPage--><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="Dfn2">Grid Items</dfn>:
+ 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>
<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 Grid Items are wrapped in a single anonymous block. Also note that the definition of valid Grid Items includes floats, but that the float property is ignored for the purposes of Grid layout.
+ 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>
<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
@@ -717,13 +594,13 @@
<p class="caption">Grid Lines.</p>
</div>
<p>
- Grid elements use Grid Lines to divide their space. There are two sets of Grid Lines: one set defined by the columns that run in the direction of block progression, and another orthogonal set defined by rows. Block progression is a writing-mode term that defines a logical direction. In English it means vertical.
+ <a href="#grid-element">Grid element</a>s use <a href="#grid-line">Grid Line</a>s to divide their space. There are two sets of <a href="#grid-line">Grid Line</a>s: one set defined by the columns that run in the direction of block progression, and another orthogonal set defined by rows. Block progression is a writing-mode term that defines a logical direction. In English it means vertical.
</p>
<p>
- A Grid Track is a generic term for a column or row which separates two Grid Lines. Each Grid Track is assigned a sizing function, which controls how wide or tall the column or row may grow, and thus how far apart two Grid Lines are. The sizing function specified can be a length, a percentage of the Grid element's size, derived from the contents occupying the column or row, or a proportion of the space which remains in the Grid element. In the last case, remaining space refers to the width or height of the Grid element 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.
+ 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 Grid Element'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 Grid element changes. If the used width of the Grid element is 200px, then the second column 50px wide. If the used width of the Grid element is 100px, then the second column is 0px and any content positioned in the column will be overflowing the Grid element. 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. 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.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -742,7 +619,7 @@
<p class="caption">Named Grid Lines.</p>
</div>
<p>
- A Grid Line exists on either side of a column or row. The Grid Line may be named using one or more quoted strings which are positioned in the grid-rows or grid-columns definitions where the Grid Line would logically occur (in between the sizing functions that define the Grid's columns and rows). Each name associated with a Grid Line must be unique for the set of columns or rows. If the name is specified multiple times in the same column or row definition, it is associated with the first Grid Line to which the name was assigned. When a name is not specified, Grid Lines can be referred to in the order which they occur. The first line is 1, the second 2 and so on. The next example builds on the prior by assigning each line one or more names.
+ A <a href="#grid-line">Grid Line</a> exists on either side of a column or row. The <a href="#grid-line">Grid Line</a> may be named using one or more quoted strings which are positioned in the grid-rows or grid-columns definitions where the <a href="#grid-line">Grid Line</a> would logically occur (in between the sizing functions that define the Grid's columns and rows). Each name associated with a <a href="#grid-line">Grid Line</a> must be unique for the set of columns or rows. If the name is specified multiple times in the same column or row definition, it is associated with the first <a href="#grid-line">Grid Line</a> to which the name was assigned. When a name is not specified, <a href="#grid-line">Grid Line</a>s can be referred to in the order which they occur. The first line is 1, the second 2 and so on. The next example builds on the prior by assigning each line one or more names.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -757,10 +634,10 @@
<div class="section" id="grid-starting-and-ending-lines">
<h3><span class="secno">6.3 </span>Starting and Ending Grid Lines</h3>
<p>
- In addition to any explicitly named Grid Lines defined by the author, a Grid Element also has four implicitly defined Grid Lines: a start and end line for both columns and rows. The start line is always positioned on the starting edge of the Grid element's content box. The end line is positioned at a distance from the last Grid Line equal to the used size of the Grid element's content box less the sum of the sizes for all prior columns or rows, or 0px, whichever is greater.
+ In addition to any explicitly named <a href="#grid-line">Grid Line</a>s defined by the author, a <a href="#grid-element">Grid element</a> also has four implicitly defined <a href="#grid-line">Grid Line</a>s: a start and end line for both columns and rows. The start line is always positioned on the starting edge of the <a href="#grid-element">Grid element</a>'s content box. The end line is positioned at the ending edge of the <a href="#grid-element">Grid element</a>'s content box, or at the same location as the last explicitly or implicitly defined <a href="#grid-line">Grid Line</a> when it extends past the content box of the <a href="#grid-element">Grid element</a>.
</p>
<p>
- In the following example, the column end Grid Line is positioned on the ending edge of the Grid element's content box. The row end Grid Line is positioned past the ending edge in overflow at the same location as the Grid Line named "last."
+ In the following example, the 'end' column <a href="#grid-line">Grid Line</a> is positioned on the ending edge of the <a href="#grid-element">Grid element</a>'s content box. The 'end' row <a href="#grid-line">Grid Line</a> is positioned past the ending edge in overflow at the same location as the <a href="#grid-line">Grid Line</a> named "last."
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -768,7 +645,17 @@
width: auto;
height: 500px;
grid-columns: 50px 1fr;
- grid-rows: 250px 250px 250px "last";
+ grid-rows: "first" 250px 250px 250px "last";
+ }
+
+ #item {
+ /* cover explicitly defined columns and rows */
+ grid-column: 1 3;
+ grid-row: "first" "last";
+
+ /* equivalent (assuming no implicitly created tracks) */
+ grid-column: start end;
+ grid-row: start end;
}
</style></pre>
<!--End Section: Starting and Ending Grid Lines-->
@@ -780,7 +667,7 @@
If there are large number of columns or rows that are the same or exhibit a recurring pattern, a repeat syntax can be applied to define the columns or rows in a more compact form.
</p>
<p>
- The next two examples are equivalent. There is a single row, and a pattern of repetitive column Grid Lines: a 250px column followed by a 10px gutter. Note that when repeat syntax is used with Grid Line naming, that the names are assigned to the first occurrence of the pattern.
+ The next two examples are equivalent. There is a single row, and a pattern of repetitive column <a href="#grid-line">Grid Line</a>s: a 250px column followed by a 10px gutter. Note that when repeat syntax is used with <a href="#grid-line">Grid Line</a> naming, that the names are assigned to the first occurrence of the pattern.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -805,22 +692,23 @@
The following grammar expresses the allowable values for the grid-rows and grid-columns properties.
</p>
<pre><track-list> => [ <track-group> ]+ | 'none'
-<track-group> => [ '(' [ <track-minmax> ]+ ')' [ '[' <positive-number> ']' ]? | <track-minmax>
+<track-group> => [ <string>* '(' <string>* [ <track-minmax> ]+ <string>* ')' [ '[' <positive-number> ']' ]? <string>*
+ | <string>* <track-minmax> <string>*
<track-minmax> => 'minmax(' <track-breadth> ',' <track-breadth> ')' | 'auto' | <track-breadth>
<track-breadth> => <length> | <percentage> | <fraction> | 'min-content' | 'max-content'</pre>
<p>Where:</p>
<ul>
<li><strong>length</strong> is as defined by CSS3 Values. [<cite><a href="#bib-CSS3VAL" rel="biblioentry" class="bibref">CSS3VAL</a></cite>]</li>
- <li><strong>percentage</strong> expresses a size for a Grid Track as a percentage of the Grid element's logical width (for columns) or logical height (for rows).
- When the width or height of the Grid element is undefined, the percentage is ignored and the Grid Track will be auto-sized.</li>
+ <li><strong>percentage</strong> expresses a size for a <a href="#grid-track">Grid Track</a> as a percentage of the <a href="#grid-element">Grid element</a>'s logical width (for columns) or logical height (for rows).
+ When the width or height of the <a href="#grid-element">Grid element</a> is undefined, the percentage is ignored and the <a href="#grid-track">Grid Track</a> will be auto-sized.</li>
<li><strong>fraction</strong> is a non-negative floating-point number followed
by 'fr'. Each <code>fraction</code> value takes a share of the remaining space proportional to
its number. See <a href="#fraction-values-fr">fraction values</a> for more details.</li>
- <li><strong>max-content</strong> is a keyword which refers to the maximum of the max sizes of Grid Items occupying
- the Grid Track.</li>
- <li><strong>min-content</strong> is a keyword which refers to the maximum of the min sizes of Grid Items occupying
- the Grid Track.</li>
+ <li><strong>max-content</strong> is a keyword which refers to the maximum of the max sizes of <a href="#grid-item">Grid Item</a>s occupying
+ the <a href="#grid-track">Grid Track</a>.</li>
+ <li><strong>min-content</strong> is a keyword which refers to the maximum of the min sizes of <a href="#grid-item">Grid Item</a>s occupying
+ the <a href="#grid-track">Grid Track</a>.</li>
<li><strong>minmax(min, max)</strong> defines a size range. The size used
should be greater than or equal to <code>min</code> and less than or equal to <code>max</code>. If <code>max</code> < <code>min</code>,
then <code>max</code> is ignored and <code>minmax(min,max)</code> is treated as <code>minmax(min,min)</code>.</li>
@@ -904,17 +792,17 @@
<p>The following example:</p>
<ul>
- <li>Adds one grid line 100 pixels from the 'start' of the grid.</li>
- <li>Adds another grid line 1/2 of the remaining space away.</li>
- <li>Adds another grid line whose distance from the prior grid line will be based on the maximum content size of elements
+ <li>Adds one <a href="#grid-line">Grid Line</a> 100 pixels from the 'start' of the grid.</li>
+ <li>Adds another <a href="#grid-line">Grid Line</a> 1/2 of the remaining space away.</li>
+ <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from the prior <a href="#grid-line">Grid Line</a> will be based on the maximum content size of elements
occupying the column.</li>
- <li>Adds another grid line whose distance from the prior grid line is based on
+ <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from the prior <a href="#grid-line">Grid Line</a> is based on
the minimum content size of all elements occupying the column, or 1/2 the
remaining space, whichever is greater.</li>
</ul>
<pre class="example">div { grid-columns: 100px 1fr max-content minmax(min-content, 1fr) }</pre>
- <p>Additional examples of valid Grid Track definitions:</p>
+ <p>Additional examples of valid <a href="#grid-track">Grid Track</a> definitions:</p>
<pre class="example"> /* examples of valid track definitions */
grid-rows: 1fr minmax(min-content, 1fr);
grid-rows: 10px (1fr auto minmax(30%, 1fr))[2];
@@ -944,11 +832,11 @@
Further, fractions that occur in the <code>min</code> position are treated as an absolute length of <code>0px</code>.
</p>
<p>
- When remaining space cannot be determined because the width or height of the Grid element is undefined, fraction-sized Grid Tracks
- are sized to their contents while retaining their respective proportions. In such cases the size of each fractional Grid Track can
- be computed by determining the <code>max-content</code> size of each fractional Grid Track and dividing that size by the respective
+ When remaining space cannot be determined because the width or height of the <a href="#grid-element">Grid element</a> is undefined, fraction-sized <a href="#grid-track">Grid Track</a>s
+ are sized to their contents while retaining their respective proportions. In such cases the size of each fractional <a href="#grid-track">Grid Track</a> can
+ be computed by determining the <code>max-content</code> size of each fractional <a href="#grid-track">Grid Track</a> and dividing that size by the respective
<code>fraction</code>. The maximum value is of those results is treated as the <code>1fr</code> value, which is then multiplied
- by each Grid Track's <code>fraction</code> to determine its final size.
+ by each <a href="#grid-track">Grid Track</a>'s <code>fraction</code> to determine its final size.
</p>
<!--End Section: Fraction Values: 'fr'-->
</div>
@@ -956,13 +844,14 @@
<div id="computed-values-grid-rows-and-columns" class="section">
<h4><span class="secno">6.5.2 </span>Computed Values for Grid-rows and Grid-columns</h4>
<p>
- The computed size of all Grid Tracks as returned for the grid-rows and grid-columns properties are normalized to used pixel values.
- All Grid Tracks are included in the computed value reported for grid-rows and grid-columns regardless of how the Grid Tracks were created, e.g. implicit tracks may be created by Grid Items referencing a Grid Line not explicitly defined by a grid-rows or grid-columns property.
- The computed value also includes any used values for named lines (any duplicate names removed), and may optionally make use of the repeat syntax
- to avoid expansive string length due to implicit Grid Track creation, large spanning values or high repeat counts specified by the author.
+ The computed size of all <a href="#grid-track">Grid Track</a>s as returned for the grid-rows and grid-columns properties are normalized to used pixel values.
+ All <a href="#grid-track">Grid Track</a>s are included in the computed value reported for grid-rows and grid-columns regardless of how the <a href="#grid-track">Grid Track</a>s were created, e.g. implicit tracks may be created by <a href="#grid-item">Grid Item</a>s referencing a <a href="#grid-line">Grid Line</a> not explicitly defined by a grid-rows or grid-columns property.
+
+ The computed value includes any used values for named lines; any duplicate names must be removed. User agents may use the repeat syntax to avoid expansive string length due to implicit <a href="#grid-track">Grid Track</a> creation,
+ large spanning values or high repeat counts specified by the author.
</p>
<p>
- The algorithm used to apply repeat syntax to used Grid Track values and Grid Line names is User Agent specific. See below for example inputs and outputs.
+ The algorithm used to apply repeat syntax to used <a href="#grid-track">Grid Track</a> values and <a href="#grid-line">Grid Line</a> names is User agent specific. See below for example inputs and outputs.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -986,7 +875,7 @@
<div id="grid-item-placement" class="section">
<h2><span class="secno">7.</span> Placing Grid Items</h2>
- <p>The properties grid-row and grid-column are used to place Grid Items and explicitly defined Grid Cells in the Grid.</p>
+ <p>The properties grid-row and grid-column are used to place <a href="#grid-item">Grid Item</a>s and explicitly defined <a href="#grid-cell">Grid Cell</a>s in the Grid.</p>
<table id="grid-column-property" class="propdef">
<tbody>
<tr>
@@ -1064,13 +953,13 @@
<div id="anonymous-grid-cells" class="section">
<h3><span class="secno">7.1</span> Anonymous Grid Cells</h3>
<p>
- Grid Items are placed into Grid Cells. A Grid Cell defines the available space for a Grid Item. The dimensions of the Grid Cell are specified by naming the starting and ending lines which define the columns and rows that the Grid Cell occupies. The starting and ending lines may be referred to by a string name, if one was defined by the author, the start and end line keywords, or the Grid Line's number.
+ <a href="#grid-item">Grid Item</a>s are placed into <a href="#grid-cell">Grid Cell</a>s. A <a href="#grid-cell">Grid Cell</a> defines the available space for a <a href="#grid-item">Grid Item</a>. The dimensions of the <a href="#grid-cell">Grid Cell</a> are specified by naming the starting and ending lines which define the columns and rows that the <a href="#grid-cell">Grid Cell</a> occupies. The starting and ending lines may be referred to by a string name, if one was defined by the author, the start and end line keywords, or the <a href="#grid-line">Grid Line</a>'s number.
</p>
<p>
- The following example positions the first Grid Item to cover all rows and columns of the Grid element using the start and end keywords. The second Grid Item is positioned to cover the first row. Note that when only the starting Grid Line of the grid-row or grid-column properties are specified for the Grid Cell, that the Grid Cell is assumed to extend to the subsequent Grid Line.
+ The following example positions the first <a href="#grid-item">Grid Item</a> to cover all rows and columns of the <a href="#grid-element">Grid element</a> using the start and end keywords. The second <a href="#grid-item">Grid Item</a> is positioned to cover the first row. Note that when only the starting <a href="#grid-line">Grid Line</a> of the grid-row or grid-column properties are specified for the <a href="#grid-cell">Grid Cell</a>, that the <a href="#grid-cell">Grid Cell</a> is assumed to extend to the subsequent <a href="#grid-line">Grid Line</a>.
</p>
<pre class="example"><style type="text/css">
- /* covers the Grid element's content box */
+ /* covers the <a href="#grid-element">Grid element</a>'s content box */
#item1 {
grid-row: start end;
grid-column: start end;
@@ -1083,7 +972,7 @@
}
</style></pre>
<p>
- The next example defines rows for header and footer Grid Items sized to content, as well as a main region that receives all remaining space. A single column which receives all horizontal space in the Grid's content box is also defined.
+ The next example defines rows for header and footer <a href="#grid-item">Grid Item</a>s sized to content, as well as a main region that receives all remaining space. A single column which receives all horizontal space in the Grid's content box is also defined.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -1107,13 +996,13 @@
<div id="explicitly-defined-grid-cells" class="section">
<h3><span class="secno">7.2</span> Explicitly Defined Grid Cells</h3>
<p>
- The prior example created an anonymous Grid Cell that holds a single Grid Item. Grid Cells 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 Grid Cell. Grid Cells are positioned and sized using the grid-row and grid-column properties. Once defined, multiple Grid Items can be placed into the Grid Cell by referring to it by name using the grid-cell property.
+ 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 Grid Cell, they can be stacked or layered. Layering places each Grid Item over the other in accordance with the grid-layer property (described in Grid Item Layering). Stacking places Grid Items 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="#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.
</p>
<p>
- The following example explicitly defines a Grid Cell 'nav' and stacks all child links of the Grid element into the 'nav' Grid Cell.
+ 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 {
@@ -1133,8 +1022,8 @@
<div id="grid-cell-pseudo-element-selector" class="section">
<h4><span class="secno">7.2.1</span> Grid-cell Pseudo-element Selector</h4>
<p>
- The <code>::grid-cell(<string>)</code> psuedo-element selector applies to Grid elements. It's string parameter explicitly names the Grid Cell.
- A <code>::grid-cell(<string>)</code> pseudo-element appearing multiple times with the same name on the same Grid element matches the same Grid Cell.
+ The <code>::grid-cell(<string>)</code> psuedo-element selector applies to <a href="#grid-element">Grid element</a>s. It's string parameter explicitly names the <a href="#grid-cell">Grid Cell</a>.
+ A <code>::grid-cell(<string>)</code> pseudo-element appearing multiple times with the same name on the same <a href="#grid-element">Grid element</a> matches the same <a href="#grid-cell">Grid Cell</a>.
Property definitions are additive and applied according to the normal cascade as with any selector.
</p>
<!--End Section: Grid Cell Pseudo-element Selector-->
@@ -1143,7 +1032,7 @@
<div id="grid-cell-property-section" class="section">
<h4><span class="secno">7.2.2</span> Grid-cell Property</h4>
<p>
- The grid-cell is valid on Grid Items and places the Grid Item inside the explicitly named Grid Cell.
+ The grid-cell is valid on <a href="#grid-item">Grid Item</a>s and places the <a href="#grid-item">Grid Item</a> inside the explicitly named <a href="#grid-cell">Grid Cell</a>.
</p>
<table id="grid-cell-property" class="propdef">
<tbody>
@@ -1187,24 +1076,24 @@
<div id="grid-cell-stacking-property-section" class="section">
<h4><span class="secno">7.2.3</span> Grid-cell-stacking Property</h4>
<p>
- The grid-cell-stacking property defines the stacking direction used to place Grid Items within a Grid Cell. When the value is 'columns', Grid Items
- are stacked one after the other in the inline direction. Similarly for 'rows', Grid Items are stacked one after the other in the direction
- of block progression. When the value is 'layer', Grid Items are layered on top of one another. The order that Grid Items are stacked is specified by the
+ 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 Grid Items, they are layered or stacked in source order.
+ among <a href="#grid-item">Grid Item</a>s, they are layered or stacked in source order.
</p>
<p>
- When Grid Items are stacked, the Grid Item alignment properties only apply in the direction orthogonal to block progression. If the grid-cell-stacking
- property is 'columns', then grid-row-align property operates normally on the Grid Items stacked in the Grid Cell and the grid-column-align property is
+ 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
+ property is 'columns', then grid-row-align property operates normally on the <a href="#grid-item">Grid Item</a>s stacked in the <a href="#grid-cell">Grid Cell</a> and the grid-column-align property is
ignored. If the grid-cell-stacking property is 'rows', the opposite is true. When grid-cell-stacking is 'layer' both alignment properties are honored
- on the Grid Item.
+ on the <a href="#grid-item">Grid Item</a>.
</p>
<p>
- The Grid alignment properties can also be applied to the Grid Cell. When applied to the Grid Cell, the alignment properties define the default
- alignment behavior for each Grid Item in the Grid Cell in whatever alignment directions are valid giving the value of the grid-cell-stacking property.
+ The Grid alignment properties can also be applied to the <a href="#grid-cell">Grid Cell</a>. When applied to the <a href="#grid-cell">Grid Cell</a>, the alignment properties define the default
+ alignment behavior for each <a href="#grid-item">Grid Item</a> in the <a href="#grid-cell">Grid Cell</a> in whatever alignment directions are valid giving the value of the grid-cell-stacking property.
If the grid-cell-stacking property is not 'layer', then the alignment property relevant to the direction parallel to block progression controls the
- alignment of the entire stack of Grid Items. For example, if the grid-cell-stacking property is 'rows' and the grid-row-alignment property is 'end', then
- the ending edge of the last Grid Item will meet the row end Grid Line for the Grid Cell.
+ alignment of the entire stack of <a href="#grid-item">Grid Item</a>s. For example, if the grid-cell-stacking property is 'rows' and the grid-row-alignment property is 'end', then
+ the ending edge of the last <a href="#grid-item">Grid Item</a> will meet the row end <a href="#grid-line">Grid Line</a> for the <a href="#grid-cell">Grid Cell</a>.
</p>
<table id="grid-cell-stacking-property" class="propdef">
<tbody>
@@ -1251,7 +1140,7 @@
<div id="defining-grid-cells-with-a-template" class="section">
<h3><span class="secno">7.3</span> Defining Grid Cells with a Template</h3>
<p>
- Grid Cells can also be defined explicitly using one-letter names via the grid-template property. The grid-template property provides a visualization of the Grid element's structure while simultaneously defining the Grid Cells which can be used to layer or stack the child elements of the Grid.
+ <a href="#grid-cell">Grid Cell</a>s can also be defined explicitly using one-letter names via the grid-template property. The grid-template property provides a visualization of the <a href="#grid-element">Grid element</a>'s structure while simultaneously defining the <a href="#grid-cell">Grid Cell</a>s which can be used to layer or stack the child elements of the Grid.
</p>
<p>
In the following example, a grid-template property is used to create a page layout where cells are defined for header content 'h', navigational content 'n', footer content 'f', and main content 'm'. In English, a row is created for every separate string listed for the grid-template property, and a column is created for the maximum number of letters found in any one string. In orthogonal writing modes the roles of rows and columns are reversed. See Grid Writing Modes for more details.
@@ -1316,7 +1205,7 @@
<div id="grid-row-span-and-grid-column-span">
<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 Grid Cell or Grid Item, 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 Grid Cell.
+ 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>.
</p>
<pre class="example"><style type="text/css">
#item {
@@ -1414,13 +1303,13 @@
</div>
<p>
- Grid Line numbers referred to by grid-row or grid-column properties on a Grid Item or Grid Cell are not required to refer to a Grid Line that was defined using the grid-columns or grid-rows properties on the Grid element. In cases where the specified position is outside those explicitly specified on the Grid element, implicit columns and rows fill gaps added as needed to create additional Grid Lines until the reference can be resolved.
- Note that quoted Grid Line names that don't resolve to an explicitly defined Grid Line are treated as thought the author specified the 'start' Grid Line and don't trigger implicit Grid Track creation.
+ <a href="#grid-line">Grid Line</a> numbers referred to by grid-row or grid-column properties on a <a href="#grid-item">Grid Item</a> or <a href="#grid-cell">Grid Cell</a> are not required to refer to a <a href="#grid-line">Grid Line</a> that was defined using the grid-columns or grid-rows properties on the <a href="#grid-element">Grid element</a>. In cases where the specified position is outside those explicitly specified on the <a href="#grid-element">Grid element</a>, implicit columns and rows fill gaps added as needed to create additional <a href="#grid-line">Grid Line</a>s until the reference can be resolved.
+ Note that quoted <a href="#grid-line">Grid Line</a> names that don't resolve to an explicitly defined <a href="#grid-line">Grid Line</a> are treated as thought the author specified the 'start' <a href="#grid-line">Grid Line</a> and don't trigger implicit <a href="#grid-track">Grid Track</a> creation.
</p>
<p>
- Figure 8 illustrates the placement of Grid Items resulting from the markup shown in the following example. Note that Grid Item 'B' is positioned on Grid Line 5 which creates a 5th column to contain Grid Item 'B'. Further, columns 3 and 4 are created as implicit auto-width columns without content resulting in a used column width of 0px.
+ Figure 10 illustrates the placement of <a href="#grid-item">Grid Item</a>s resulting from the markup shown in the following example. Note that <a href="#grid-item">Grid Item</a> 'B' is positioned on <a href="#grid-line">Grid Line</a> 5 which creates a 5th column to contain <a href="#grid-item">Grid Item</a> 'B'. Further, columns 3 and 4 are created as implicit auto-width columns without content resulting in a used column width of 0px.
</p>
<pre class="example"><style type="text/css">
@@ -1520,33 +1409,6 @@
<!--End Section: Implicit Columns and Rows-->
</div>
-
- <div id="grid-item-and-grid-cell-auto-placement" class="section">
- <h3><span class="secno">7.6</span> Grid Item and Grid Cell Auto Placement</h3>
- <p>
- Grid Items and Grid Cells can be automatically placed into an available slot in the Grid. The automatic placement algorithm is used to place a Grid Item or explicitly defined Grid Cell in the Grid whenever the grid-column or grid-row value of a Grid Item is 'auto'. Automatically placed Grid Items can create new implicit Grid Lines in the Grid. The following summarizes the algorithm for auto placement of Grid Items. First for Grid Cells in ordinal-group order, then each Grid Item in ordinal-group then 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: Grid Item Auto Placement-->
- </div>
<!--End Section: Grid Item Placement-->
</div>
@@ -1574,14 +1436,14 @@
</div>
</div>
<p>
- A <a href="#grid-item">Grid Item's</a> alignment within its Cell can be controlled by using the
+ A <a href="#grid-item">Grid Item</a>'s alignment within its Cell can be controlled by using the
<a href="#grid-column-align-property"><code>grid-column-align</code></a> and <a href="#grid-row-align-property"><code>grid-row-align</code></a> properties.
- Alignment refers to the logical edges of the <a href="#grid-item">Grid Item's</a> Cell.
+ Alignment refers to the logical edges of the <a href="#grid-item">Grid Item</a>'s Cell.
</p>
<p>
The <code>start</code> edge of a column is defined by the text flow direction.
The <code>start</code> edge of a row is defined by block flow direction.
- The alignment values refer to the edge of the <a href="#grid-item">Grid Item's</a> Cell against which the
+ The alignment values refer to the edge of the <a href="#grid-item">Grid Item</a>'s Cell against which the
<a href="#grid-item">Grid Item</a> will align one of its edges.
Which edge of the <a href="#grid-item">Grid Item</a> actually aligns against the specified edge of the Cell is dependent on
whether the <a href="#grid-item">Grid Item</a> shares the same inline text direction and block flow direction as the <a href="#grid-element">Grid element</a>.
@@ -1591,8 +1453,8 @@
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 9, 10, and 11 illustrate the placement and orientation of the <a href="#grid-element">Grid element's</a> rows, columns, and
- <a href="#grid-item">Grid Items</a> using different writing modes on the <a href="#grid-element">Grid element</a>.
+ Figures 11, 12, and 13 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.
<a href="#grid-item">Grid Item</a> B is aligned in each figure to the ending edges of its row and column.
@@ -1644,10 +1506,10 @@
</tbody>
</table>
<ul>
- <li><strong>start</strong> aligns the starting edge of the <a href="#grid-item">Grid Item's</a> margin box to the starting edge of the <a href="#grid-item">Grid Item's</a> column.</li>
- <li><strong>end</strong> aligns the end edge of the <a href="#grid-item">Grid Item's</a> margin box to the end edge of the <a href="#grid-item">Grid Item's</a> column.</li>
- <li><strong>center</strong> places the center of the <a href="#grid-item">Grid Item’s</a> margin box at the center of the the <a href="#grid-item">Grid Item's</a> column.</li>
- <li><strong>stretch</strong> ensures that the <a href="#grid-item">Grid Item's</a> margin box is equal to the size of the <a href="#grid-item">Grid Item's</a> column.</li>
+ <li><strong>start</strong> aligns the starting edge of the <a href="#grid-item">Grid Item</a>'s margin box to the starting edge of the <a href="#grid-item">Grid Item</a>'s column.</li>
+ <li><strong>end</strong> aligns the end edge of the <a href="#grid-item">Grid Item</a>'s margin box to the end edge of the <a href="#grid-item">Grid Item</a>'s column.</li>
+ <li><strong>center</strong> places the center of the <a href="#grid-item">Grid Item</a>'s margin box at the center of the the <a href="#grid-item">Grid Item</a>'s column.</li>
+ <li><strong>stretch</strong> ensures that the <a href="#grid-item">Grid Item</a>'s margin box is equal to the size of the <a href="#grid-item">Grid Item</a>'s column.</li>
</ul>
<table id="grid-row-align-property" class="propdef">
@@ -1688,29 +1550,29 @@
</table>
<ul>
- <li><strong>start</strong> aligns the starting edge of the <a href="#grid-item">Grid Item's</a> margin box to the starting edge of the <a href="#grid-item">Grid Item's</a> row.</li>
- <li><strong>end</strong> aligns the end edge of the <a href="#grid-item">Grid Item's</a> margin box to the end edge of the <a href="#grid-item">Grid Item's</a> row.</li>
- <li><strong>center</strong> places the center of the <a href="#grid-item">Grid Item’s</a> margin box at the center of the the <a href="#grid-item">Grid Item's</a> row.</li>
- <li><strong>stretch</strong> ensures that the <a href="#grid-item">Grid Item's</a> margin box is equal to the size of the <a href="#grid-item">Grid Item's</a> row.</li>
+ <li><strong>start</strong> aligns the starting edge of the <a href="#grid-item">Grid Item</a>'s margin box to the starting edge of the <a href="#grid-item">Grid Item</a>'s row.</li>
+ <li><strong>end</strong> aligns the end edge of the <a href="#grid-item">Grid Item</a>'s margin box to the end edge of the <a href="#grid-item">Grid Item</a>'s row.</li>
+ <li><strong>center</strong> places the center of the <a href="#grid-item">Grid Item</a>'s margin box at the center of the the <a href="#grid-item">Grid Item</a>'s row.</li>
+ <li><strong>stretch</strong> ensures that the <a href="#grid-item">Grid Item</a>'s margin box is equal to the size of the <a href="#grid-item">Grid Item</a>'s row.</li>
</ul>
-
+
<div id="grid-item-alignment-and-overflow" class="section">
<h3><span class="secno">8.1 </span>Grid Item Alignment and Overflow</h3>
<p>
The values <code>start</code>, <code>end</code>, and <code>center</code> all cause the <a href="#grid-item">Grid Item</a>
to produce a box sized shrink-to-fit for its cell.
- If the <code>min-content</code> size of the <a href="#grid-item">Grid Item's</a> box is greater than the size of its Cell,
+ If the <code>min-content</code> size of the <a href="#grid-item">Grid Item</a>'s box is greater than the size of its Cell,
it will overflow the bounds of its Cell in a direction determined by its alignment.
</p>
<p>
- A value of <code>stretch</code> causes the <a href="#grid-item">Grid Item's</a> box model to shrink or grow to satisfy the following equations:
+ A value of <code>stretch</code> causes the <a href="#grid-item">Grid Item</a>'s box model to shrink or grow to satisfy the following equations:
</p>
<pre><code>margin-left + border-left + content-width + border-right + margin-right = <cell width></code>
<code>margin-top + border-top + content-height + border-bottom + margin-bottom = <cell height></code>
</pre>
<p>
- When stretching a <a href="#grid-item">Grid Item</a> box, negative margins can produce a box which is larger than the <a href="#grid-item">Grid Item's</a> Cell.
+ When stretching a <a href="#grid-item">Grid Item</a> box, negative margins can produce a box which is larger than the <a href="#grid-item">Grid Item</a>'s Cell.
Also, stretching can produce a <a href="#grid-item">Grid Item</a> box that is smaller than the <code>min-content</code> size of the <a href="#grid-item">Grid Item</a>.
In such cases the contents of the <a href="#grid-item">Grid Item</a> element will overflow its box in accordance with its <code>overflow</code> property.
</p>
@@ -1729,20 +1591,20 @@
<p class="caption">Drawing order controlled by grid-layer and source order.</p>
</div>
<p>
- <a href="#grid-item">Grid Items</a> do not directly affect each other's placement in the <a href="#grid-element">Grid element</a>.
- A <a href="#grid-item">Grid Item</a> may affect the position of a Grid line in a column or row that uses a contents-based relative size,
- which in turn affects the position or size of another <a href="#grid-item">Grid Item</a>, but there is no direct interaction between <a href="#grid-item">Grid Items</a>.
- <a href="#grid-item">Grid Items</a> may overlap because the <a href="#grid-item">Grid Item's</a> Cell is defined to intersect with the Cell of another <a href="#grid-item">Grid Item</a>.
+ <a href="#grid-item">Grid Item</a>s do not directly affect each other's placement in the <a href="#grid-element">Grid element</a>.
+ A <a href="#grid-item">Grid Item</a> may affect the position of a <a href="#grid-line">Grid Line</a> in a column or row that uses a contents-based relative size,
+ which in turn affects the position or size of another <a href="#grid-item">Grid Item</a>, but there is no direct interaction between <a href="#grid-item">Grid Item</a>s.
+ <a href="#grid-item">Grid Item</a>s may overlap because the <a href="#grid-item">Grid Item</a>'s Cell is defined to intersect with the Cell of another <a href="#grid-item">Grid Item</a>.
<a href="#grid-item">Grid Item</a> boxes in non-intersecting Cells may also overlap because of negative margins.
</p>
<p>
- In cases where boxes overlap, a new property, <a href="#grid-layer"><code>grid-layer</code></a>, is introduced to provide control over the drawing order of <a href="#grid-item">Grid Items</a>.
+ In cases where boxes overlap, a new property, <a href="#grid-layer"><code>grid-layer</code></a>, is introduced to provide control over the drawing order of <a href="#grid-item">Grid Item</a>s.
<dfn id="grid-layer">Grid-layer</dfn> is similar in concept to <code>z-index</code>, but avoids overloading the meaning of the <code>z-index</code> property,
which is applicable only to positioned elements.
- In cases where <a href="#grid-item">Grid Items</a> occupy the same <a href="#grid-layer">grid-layer</a>, source order determines which item will be drawn first.
+ 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 12 illustrates the drawing order of the markup shown in the following example.
+ Figure 14 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 02:05:45 UTC