WD-css3-grid-20070905 33.6 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang=en>
 <head><meta content="text/html;charset=utf-8" http-equiv=Content-Type>

  <title>CSS Grid Positioning Module Level 3</title>
  <link href=default.css rel=stylesheet type="text/css">

  <style type="text/css">
    .cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 10px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif }
    .cols p { padding: 3px; margin: 0;  }
    .gap { position: absolute; background: black; width: 5px; bottom: 0px; top: 0px; border: 10px solid red; border-top-width: 0; border-bottom-width: 0;  }
    .rep { position: absolute; background: #333; height: 110px; width: 100px;  color: white; z-index: 4 }

    .todo { color:red; font-style:italic;}
  </style>
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
  type="text/css">

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--></p>

   <h1 id=css-grid>CSS Grid Positioning Module Level 3</h1>

   <h2 class="no-num no-toc" id=w3c-working>W3C Working Draft 5 September
    2007</h2>

   <dl>
    <dt>This version:

    <dd><a
     href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>

    <dt>Latest version:

    <dd><a
     href="http://www.w3.org/TR/css3-grid">http://www.w3.org/TR/css3-grid</a>

    <dt>Previous version:

    <dd>none

    <dt>Editors:

    <dd>Alex Mogilevsky, Microsoft, alexmog@microsoft.com

    <dd>Markus Mielke, Microsoft, mmielke@microsoft.com
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2007 <a
    href="http://www.w3.org/"><acronym title="World Wide Web
    Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
    of Technology">MIT</acronym></a>, <a
    href="http://www.ercim.org/"><acronym title="European Research Consortium
    for Informatics and Mathematics">ERCIM</acronym></a>, <a
    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>This module describes integration of grid-based layout (similar to the
   grids traditionally used in books and newspapers) with CSS sizing and
   positioning.

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text &#8220;css3-grid&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-grid<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a href="/Style/CSS/members">CSS
   Working Group</a> (part of the <a href="/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
   Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
   W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>This is the first public working draft of this module.

  <h2 class="no-num no-toc" id=contents>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#dependencies"><span class=secno>1. </span>Dependencies on
    other modules</a>

   <li><a href="#introduction"><span class=secno>2. </span>Introduction</a>

   <li><a href="#examples"><span class=secno>3. </span>Examples</a>
    <ul class=toc>
     <li><a href="#example"><span class=secno>3.1. </span>Example 1</a>

     <li><a href="#example0"><span class=secno>3.2. </span>Example 2</a>

     <li><a href="#example1"><span class=secno>3.3. </span>Example 3</a>
    </ul>

   <li><a href="#grid-declarations"><span class=secno>4. </span>Grid
    declarations</a>
    <ul class=toc>
     <li><a href="#explicit"><span class=secno>4.1. </span>Explicit grid</a>
      <ul class=toc>
       <li><a href="#lsquo"><span class=secno>4.1.1.
        </span>&lsquo;grid-columns&rsquo; and &lsquo;grid-rows&rsquo;
        properties</a>
      </ul>

     <li><a href="#natural"><span class=secno>4.2. </span>Natural grid</a>
      <ul class=toc>
       <li><a href="#multi-column"><span class=secno>4.2.1.
        </span>Multi-column element</a>

       <li><a href="#table"><span class=secno>4.2.2. </span>Table</a>

       <li><a href="#priority"><span class=secno>4.2.3. </span>Priority of
        explicit grid definition</a>
      </ul>

     <li><a href="#default"><span class=secno>4.3. </span>Default grid</a>
    </ul>

   <li><a href="#grid-container"><span class=secno>5. </span>Grid
    container</a>

   <li><a href="#grid-units"><span class=secno>6. </span>Grid units</a>
    <ul class=toc>
     <li><a href="#applicability"><span class=secno>6.1. </span>Applicability
      of grid units</a>

     <li><a href="#reference"><span class=secno>6.2. </span>Reference point
      for grid units</a>

     <li><a href="#undefined"><span class=secno>6.3. </span>Undefined grid
      units</a>
    </ul>

   <li><a href="#grid-in"><span class=secno>7. </span>Grid in overflow</a>

   <li><a href="#issues"><span class=secno>8. </span>Issues</a>
    <ul class=toc>
     <li><a href="#snap-to"><span class=secno>8.1. </span>Snap to grid</a>

     <li><a href="#named"><span class=secno>8.2. </span>Named grid lines and
      cells</a>

     <li><a href="#templates"><span class=secno>8.3. </span>Templates in CSS3
      Advanced Layout module</a>
    </ul>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative-references">Normative
      references</a>

     <li class=no-num><a href="#other-references">Other references</a>
    </ul>

   <li class=no-num><a href="#index">Index</a>

   <li class=no-num><a href="#property-index">Property index</a>
  </ul>
  <!--end-toc-->

  <h2 id=dependencies><span class=secno>1. </span>Dependencies on other
   modules</h2>

  <p>This CSS3 module depends on the following other CSS3 modules:

  <ul>
   <li><a href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>
  </ul>

  <p>It has non-normative (informative) references to the following other
   CSS3 modules:

  <ul>
   <li><a href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>

   <li><a href="#CSS3GCPM" rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>

   <li><a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>

   <li><a href="#CSS3LAYOUT"
    rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a>
  </ul>

  <h2 id=introduction><span class=secno>2. </span>Introduction</h2>

  <p>Grid systems have provided great value to print designers for many years
   <a href="#THEGRID" rel=biblioentry>[THEGRID]<!--{{THEGRID}}--></a>. Now
   same concepts are applied to online content <a href="#SXSWGRIDS"
   rel=biblioentry>[SXSWGRIDS]<!--{{SXSWGRIDS}}--></a>, <a href="#AGBDL"
   rel=biblioentry>[AGBDL]<!--{{AGBDL}}--></a>. Unlike print media however,
   dimensions of online devices vary broadly; a single fixed-sized grid that
   worked perfectly for print pages only works in a subset of web scenarios.
   Really adaptable solutions require dealing with a grid that adapts to fit
   devices of varying form factors.

  <p>This module adds capabilities for sizing and positioning in terms of a
   scalable grid . The grid can be specified directly by author, or can be
   implied from existing two-dimensional structures (tables or multi-column
   elements).

  <p>Grid positioning addresses layout in continuous media and in paged
   media.

  <p>Note that the adaptive grid is even more powerful when used in
   combination with <a href="#MEDIAQ"
   rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>.

  <h2 id=examples><span class=secno>3. </span>Examples</h2>

  <p>Let&#39;s start with an illustration of grid positioning in action.

  <h3 id=example><span class=secno>3.1. </span>Example 1</h3>

  <div class=figure> <img alt="example of a 3-column layout with an image
   that spans 2 columns" src=figure1.jpg>
   <p class=caption>Float in a multi-column element</p>
  </div>

  <p>Figure 1 shows a 3-column layout in paged media. It can be seen as a
   grid with 6 vertical lines and 2 horizontal lines.

  <p>We can use the grid lines to position the floating image:

  <div class=example>
   <pre>body { columns:3; column-gap:0.5in; }
img { float:page top right; <strong>width:3gr;</strong> }
/* Figure 1 */
</pre>
  </div>

  <p>The statement &quot;float:page top right&quot; here positions the image
   at the top right corner of the page (as defined in <a href="#CSS3GCPM"
   rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>)

  <p>&quot;width:3gr&quot; makes image 3 &quot;grid units&quot; wide, where a
   &quot;grid unit&quot; is the distance between two adjacent grid lines.
   Each boundary between a column and a gap automatically produces a grid
   line, therefore to specify &quot;two columns, including the gap between
   columns, but not including any gaps outside the columns&quot; we can just
   say &quot;3gr&quot;.

  <h3 id=example0><span class=secno>3.2. </span>Example 2</h3>

  <p>The previous example addressed grid lines created automatically by
   multi-column layout (an implicit grid). In more complex pages, base grid
   of the page is designed in advance, and it is not necessarily used to be
   filled with content directly. Instead, elements of page content are
   aligned to the grid.

  <p>For this case, grid can be specified explicitly. It is not required
   (although common) that grid has evenly spaced columns with gaps in
   between. The grid is simply a collection of horizontal and vertical lines.

  <div class=figure> <img alt="example of a multicolumn layout with
   additional gridlines in the middle of each column" src=figure2.jpg>
   <p class=caption>Explicitly specified grid lines</p>
  </div>

  <p>These additional grid lines allow to position elements in ways that
   would be impossible otherwise:

  <div class=example>
   <pre>
body { grid-columns: * * (0.5in * *)[2];
       grid-rows: 20% *;
       columns:3; column-gap:0.5in; }

img  { float:page top left;
       float-offset: 4gr 1gr; }

/* Figure 2 */
</pre>
  </div>

  <p>In this example,

  <ul>
   <li>An explicit grid is specified

   <li>Group in parentheses is a repeating pattern

   <li>Integer in square brackets is the number of repetitions

   <li>star syntax (as in <a
    href="http://www.w3.org/TR/html401/types.html#h-6.6">multi-length</a> <a
    href="#HTML401" rel=biblioentry>[HTML401]<!--{{!HTML401}}--></a>)
    represents a proportional length (each * gets equal space allocation; you
    can use 2*, 3* etc.)
  </ul>

  <h3 id=example1><span class=secno>3.3. </span>Example 3</h3>

  <p>The following example illustrates the use of a grid in construction of a
   complex web site. Note how groups of elements are aligned with different
   sets of grid lines.

  <div class=figure> <img alt="[image of a complex page with overlaid grid]"
   src=Yeeaahh_grid.png style=float:left> <img alt="[image of complex page]"
   src=Yeeaahh.png style=float:left>
   <p class=caption style=clear:left>Complex site designed with a grid</p>
  </div>

  <h2 id=grid-declarations><span class=secno>4. </span>Grid declarations</h2>

  <p>There are three ways to define a grid.

  <ol>
   <li>Explicit grid: defined with &#39;grid-columns&#39;,
    &#39;grid-rows&#39; properties.

   <li>Natural grid: automatically created by elements with a natural grid
    structure (multi-column elements and tables).

   <li>Default grid: all other block elements define a single-cell grid.
  </ol>

  <h3 id=explicit><span class=secno>4.1. </span>Explicit grid</h3>

  <p>Outer edges of padding box always define grid lines. In LTR layout, left
   and top edges define lines that we refer as horizontal and vertical line
   zero (right and top in RTL). The opposite edges also define grid lines.

  <p>Additional grid lines can be added in the middle with &lsquo;<a
   class=property href="#grid-columns">grid-columns</a>&rsquo; and &lsquo;<a
   class=property href="#grid-rows">grid-rows</a>&rsquo; properties.

  <h4 id=lsquo><span class=secno>4.1.1. </span>&lsquo;<a class=property
   href="#grid-columns">grid-columns</a>&rsquo; and &lsquo;<a class=property
   href="#grid-rows">grid-rows</a>&rsquo; properties</h4>

  <table class=propdef id=name->
   <tbody>
    <tr>
     <td>Name:

     <td> <dfn id=grid-columns>grid-columns</dfn>

    <tr>
     <td>Value:

     <td>[[&lt;length&gt;|&lt;percentage&gt;|&lt;relative length&gt;] | <br>
      ([&lt;length&gt;|&lt;percentage&gt;|&lt;relative length &gt;
      ]+)[&lsquo;<code class=css>[</code>&rsquo;&lt;integer&gt;&lsquo;<code
      class=css>]</code>&rsquo;]? ]+ | <br>
      none | inherit

    <tr>
     <td>Initial:

     <td>none

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td><span>refer to width of containing block</span>

    <tr>
     <td>Media:

     <td>visual, paged

    <tr>
     <td>Computed value:

     <td>specified value
  </table>

  <table class=propdef id=name-0>
   <tbody>
    <tr>
     <td>Name:

     <td> <dfn id=grid-rows>grid-rows</dfn>

    <tr>
     <td>Value:

     <td>[[&lt;length&gt;|&lt;percentage&gt;|&lt;relative length&gt;] | <br>
      ([&lt;length&gt;|&lt;percentage&gt;|&lt;relative length &gt;
      ]+)[&lsquo;<code class=css>[</code>&rsquo;&lt;integer&gt;&lsquo;<code
      class=css>]</code>&rsquo;]? ]+ | <br>
      none | inherit

    <tr>
     <td>Initial:

     <td>none

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td><span>refer to height of containing block</span>

    <tr>
     <td>Media:

     <td>visual, paged

    <tr>
     <td>Computed value:

     <td>specified value
  </table>

  <p>Space for each column or row of the grid can be defined as

  <ul>
   <li><b>Length</b>.
    <ul>
     <li>Note that gr unit can also be used here (it refers to grid of the
      containing block)
    </ul>

   <li><b>Percentage</b> of containing block height and width

   <li><b>Relative length</b> (as defined in <a
    href="http://www.w3.org/TR/html401/types.html#h-6.6">multi-length</a>
    type in <a href="#HTML401"
    rel=biblioentry>[HTML401]<!--{{!HTML401}}--></a>):
  </ul>

  <blockquote>
   <p>A relative length has the form &quot;i*&quot;, where &quot;i&quot; is
    an integer. When allotting space among elements competing for that space,
    user agents allot pixel and percentage lengths first, then divide up
    remaining available space among relative lengths. Each relative length
    receives a portion of the available space that is proportional to the
    integer preceding the &quot;*&quot;. The value &quot;*&quot; is
    equivalent to &quot;1*&quot;. Thus, if 60 pixels of space are available
    after the user agent allots pixel and percentage space, and the competing
    relative lengths are 1*, 2*, and 3*, the 1* will be allotted 10 pixels,
    the 2* will be allotted 20 pixels, and the 3* will be allotted 30 pixels.

   <p class=issue>This definition is taken directly from HTML4.01. But it
    doesn&#39;t have to be exactly same. The number doesn&#39;t have to be
    integer. And maybe the number should be required for consistency with
    other units.
  </blockquote>

  <p>For example this rule

  <div class=example>
   <pre>div { grid-columns: 50% * * 4em }
</pre>
  </div>

  <ul>
   <li>adds one grid line in the middle of containing block,

   <li>another one 4em from the right

   <li>another one in the middle of remaining space
  </ul>

  <p>Also, grid lines can be defined in repeating groups. A group is enclosed
   in parentheses and optionally specifies a maximum number of repetitions in
   square brackets. Nested repeating groups are not allowed.

  <p>For example this rule

  <div class=example>
   <pre>div { grid-rows: 4em (0.25em 1em); }
</pre>
  </div>

  <ul>
   <li>defines a header row of 4em

   <li>adds as many additional rows as necessary, alternating heights of
    0.25em and 1em.
  </ul>

  <p>For another example this rule

  <div class=example>
   <pre>div { grid-columns: * (1em *)[2]; }
</pre>
  </div>

  <p>defines 3 columns of equal widths with 1em gaps, which matches a
   multi-column layout defined as

  <div class=example>
   <pre>div { column-count: 3; }
</pre>
  </div>

  <p>(assuming 1em is the default value of column gap).

  <h3 id=natural><span class=secno>4.2. </span>Natural grid</h3>

  <p>Elements with a natural grid structure define a grid that aligns with
   the structure. Such elements are

  <h4 id=multi-column><span class=secno>4.2.1. </span>Multi-column element</h4>

  <p>Left and right edges of each column form a grid line. There are twice as
   many grid lines as there are columns.

  <h4 id=table><span class=secno>4.2.2. </span>Table</h4>

  <p>There is one grid line per row and per column. The line is at the
   row/column boundary.

  <div>
   <p class=issue>A possible alternative is to have two lines per table
    row/column, on both sides of border-spacing. In collapsing borders model
    these border lines would also collapse in one.</p>
  </div>

  <h4 id=priority><span class=secno>4.2.3. </span>Priority of explicit grid
   definition</h4>

  <p>If explicit grid properties grid-columns or grid-rows are specified on
   an element with an implicit grid the explicit properties have priority.

  <h3 id=default><span class=secno>4.3. </span>Default grid</h3>

  <p>Element that does not define an explicit grid and that is not any of
   elements defining an implicit grid is considered to have a single-cell
   grid, equivalent to having this explicit definition in default stylesheet:

  <div class=example>
   <pre>* { grid-columns:*; grid-rows:*; }
</pre>
  </div>

  <h2 id=grid-container><span class=secno>5. </span>Grid container</h2>

  <p>Using grid does not require any new rules on how the positioning
   container is determined. When grid units are used with all applicable
   sizing positioning methods, the grid is always taken from the applicable
   containing block (which is found as defined as defined in CSS2.1 section
   10.1).

  <p>In this example, div1 is the positioning parent and therefore grid of
   div1 is used for positioning:

  <div class=example>
   <pre>&lt;style&gt;
 <strong>.div1 { position:absolute; grid-columns:4.5em (1em 4.5em); }</strong> /* this grid is used */
 .div2 { columns-width:10em; column-gap:1em; }
 img { position:absolute; left:2gr; width:3gr; }
&lt;/style&gt;
&lt;div class=&quot;div1&quot;&gt;
 &lt;div class=&quot;div2&quot;&gt;
  &lt;img /&gt;
 &lt;/div&gt;
&lt;/div&gt;
</pre>
  </div>

  <p>However in the next example, grid of div2 is used by the float, because
   it is the float&#39;s containing block:

  <div class=example>
   <pre>&lt;style&gt;
 .div1 { position:absolute; grid-columns:4.5em (1em 4.5em); }
 <strong>.div2 { columns-width:10em; column-gap:1em; }</strong> /* this grid is used */
 img { float:left; float-offset:2gr; width:3gr; }
&lt;/style&gt;
&lt;div class=&quot;div1&quot;&gt;
  &lt;div class=&quot;div2&quot;&gt;
   &lt;img /&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
  </div>

  <h2 id=grid-units><span class=secno>6. </span>Grid units</h2>

  <p><b>&lsquo;<span class=property>gr</span>&rsquo;</b> is used to position
   in relation to the grid lines. Actual value of each gr depends on the grid
   cell in which it is used.

  <p>Example

  <div class=example>
   <pre>div { columns:3; }
div img { float: top left column;
          float-offset: 2gr;
          width: 1gr }
</pre>
  </div>

  <p>The image is positioned over the 2<sup>nd</sup> column (left edge of
   second column is 2<sup>nd</sup> grid line from left; its width is the
   distance to the next grid line).

  <div class=cols>
   <p>Lorem ipsum dolor<br>
    sit amet. Nam at jus.<br>
    Sed imp er di et ris.<br>
    Cur abi tur et sapen.<br>
    Vivamus a metus.<br>
    Aenean at risus<br>
    pharetra ante luctu<br>
    feugiat quis enim.<br>
    Cum sociis natoque<br>
    penatibus et magni.</p>

   <div style="position: absolute; left: 175px; top: 115px; z-index: 6">
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus.<br>
     Sed imp er di et ris.<br>
     Cur abi tur et sapen.</p>
   </div>

   <div style="position: absolute; left: 350px; top: 0px; z-index: 6">
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus.<br>
     Sed imp er di et ris.<br>
     Cur abi tur et sapen.<br>
     Vivamus a metus.<br>
     Aenean at risus<br>
     pharetra ante luctu<br>
     feugiat quis enim.<br>
     Cum sociis natoque<br>
     penatibus et magni.</p>
   </div>

   <div class=rep style="top: 0; left: 175px; width: 150px"></div>

   <div class=gap style="left: 150px"></div>

   <div class=gap style="left: 325px"></div>
  </div>

  <p>Fractions of gr unit can be used too. In this example

  <div class=example>
   <pre>div img { float:column; float-offset: 0.5gr; width: 2gr; }
</pre>
  </div>

  <p>the image takes exactly the width required to stretch from the middle of
   first column to the middle of second column. width:2gr in the example
   doesn&#39;t start from exactly a grid line, therefore it is calculated as
   a sum of grid parts (2gr = 0.5gr + 1gr + 0.5gr), which ends in the middle
   of second column.

  <div class=cols>
   <p style="width:140px;">Lorem ipsum dolor sit amet. Nam at jus. <span
    style="float:right; width: 68px; height:110px; "></span> Sed imp er di et
    ris. Cur abi tur et sapen. Fusce sed ligula a turpis. Vivamus a metus.</p>

   <div style="position: absolute; left: 175px; width:140px; top: 0;
    z-index:4;">
    <p style=width:140px> Lorem ipsum dolor sit amet. Nam jus. <br>
     <span style="float:left; width: 78px; height:110px; "></span> <span
     class=rep style="left: -100px; top:auto; width: 175px"></span> Sed imp
     er di et ris. Cur abi tur et sapen. Fusce sed ligula a turpis.&nbsp;</p>
   </div>

   <div style="position: absolute; left: 350px; top: 0; z-index: 6;">
    <p style="width:140px;">Lorem ipsum dolor<br>
     sit amet. Nam at jus.<br>
     Sed imp er di et ris.<br>
     Cur abi tur et sapen.<br>
     Aenean at risus<br>
     pharetra ante luctu<br>
     feugiat quis enim.<br>
     Cum sociis natoque<br>
     penatibus et magni.</p>
   </div>

   <div class=gap style="left: 150px"></div>

   <div class=gap style="left: 325px"></div>
  </div>

  <h3 id=applicability><span class=secno>6.1. </span>Applicability of grid
   units</h3>

  <p>Grid units are applicable to all properties of block elements that take
   values of type <a
   href="http://www.w3.org/TR/css3-values/#lengths">&lt;length&gt;</a>.

  <p>When applied to margins, borders and padding, grid units refer to grid
   lines in the direction of line progression (horizontal in layout with
   horizontal lines).

  <p>Grid units never apply to inline elements, including inline blocks.

  <h3 id=reference><span class=secno>6.2. </span>Reference point for grid
   units</h3>

  <p class=issue><strong>ISSUE: </strong>Calculating grid units require a
   reference point within the grid and direction. This needs a precise
   definition. For the same element, grid units for position and size may
   have different reference points (but probably not different directions).

  <h3 id=undefined><span class=secno>6.3. </span>Undefined grid units</h3>

  <p>Because of positional nature of &#39;gr&#39; unit it is ambiguous in
   absence of position. Also, grid size may not be defined when a grid unit
   has to be applied.

  <p>In such case values specified in &#39;gr&#39; units are ignored (set to
   their initial value).

  <p class=issue>Need some examples here. E.g. what happens to &#39;1gr&#39;
   float in a multi-column element within a table that is sized to content?
   Grid size depends on the float&#39;s size so &#39;gr&#39; should be
   ignored.

  <h2 id=grid-in><span class=secno>7. </span>Grid in overflow</h2>

  <p>When a measure defined in grid units extends outside the boundaries of
   grid container, grid lines are repeated according to the following rules

  <ul>
   <li>If overflow is in positive direction (right/bottom in
    left-to-right/top-to-bottom flow, direction of text and block progression
    in other flows)
    <ul>
     <li>Explicit grid
      <ul>
       <li>If the grid definition ends with a repeat pattern (regardless of
        repeat count), the same pattern continues indefinitely

       <li>Otherwise, the last column or row size is repeated
      </ul>

     <li>Default grid
      <ul>
       <li>Same as non-repeating pattern: equally spaced lines are added,
        separated by the size of the element
      </ul>

     <li>Multi-column element
      <ul>
       <li>Additional (gap, column) pairs are added.
        <ul>
         <li>Current definition of multi-column layout doesn&#39;t allow
          variable-width columns; when it does, the last column with the last
          column gap should be repeated
        </ul>
      </ul>

     <li>Table
      <ul>
       <li>The last column is repeated
      </ul>
    </ul>

   <li>If overflow is in negative direction
    <ul>
     <li>The same sequence is used as in positive direction, but mirrored.
    </ul>
  </ul>

  <p class=issue>TODO: example

  <h2 id=issues><span class=secno>8. </span>Issues</h2>

  <h3 id=snap-to><span class=secno>8.1. </span>Snap to grid</h3>

  <p class=issue>Should there be an option to align flow content to next
   available gridline? It opens really cool scenarios. But are they
   compelling enough to create a next available notion?

  <h3 id=named><span class=secno>8.2. </span>Named grid lines and cells</h3>

  <p class=issue>If grid is used extensively, named grid locations would be
   quite helpful. Defining named grid lines could look for example like this:

  <div class=example>
   <pre>body { grid-columns: "left-edge" * 1em * 0.5em "center" 0.5em * 1em * "right-edge";
</pre>
  </div>

  <p class=issue>But this syntax doesn&#39;t easily extend to named cells

  <h3 id=templates><span class=secno>8.3. </span>Templates in CSS3 Advanced
   Layout module</h3>

  <p class=issue>"Template-based positioning" in CSS3 Advanced Layout module
   <a href="#CSS3LAYOUT"
   rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a> defines scalable
   templates for content to fill and also used the term "grid".

  <p><span class=issue>The relationship between these modules certainly needs
   to be well defined. </span>

  <p><span class=issue>Note that technically these modules are not
   contradictory (as long as is defined how an advanced-layout template
   produces an implicit grid).</span>

  <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  <p class=MsoNormal>This specification is made possible by input from Håkon
   Wium Lie, Steve Zilles, Mike Duggan, Bill Hill, Geraldine Wade, [to be
   added].

  <p>Thanks to Khoi Vinh for the “Yeeaahh!” Example.

  <p>&nbsp;

  <h2 class=no-num id=references>References</h2>

  <h3 class=no-num id=normative-references>Normative references</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS3VAL>[CSS3VAL]

   <dd>H&#229;kon Wium Lie; Chris Lilley. <cite>CSS3 module: Values and
    Units.</cite> 19 September 2006. W3C Working Draft. (Work in progress.)
    URL: <a
    href="http://www.w3.org/TR/2006/WD-css3-values-20060919">http://www.w3.org/TR/2006/WD-css3-values-20060919</a>
    </dd>
   <!---->

   <dt id=HTML401>[HTML401]

   <dd>David Raggett; Arnaud Le Hors; Ian Jacobs. <cite>HTML 4.01
    Specification.</cite> 24 December 1999. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <h3 class=no-num id=other-references>Other references</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=AGBDL>[AGBDL]

   <dd>Charles Jacobs; et al. "Adaptive Grid Based Document Layout" in:
    <cite>ACM Transactions on Graphics.</cite> 22. 3. pp. 838&#8211;847. July
    2003. URL: <a
    href="http://grail.cs.washington.edu/pub/papers/Jacobs2003.pdf">http://grail.cs.washington.edu/pub/papers/Jacobs2003.pdf</a>
    </dd>
   <!---->

   <dt id=CSS3COL>[CSS3COL]

   <dd>H&#229;kon Wium Lie. <cite>Multi-column layout in CSS.</cite> 6 June
    2007. W3C Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-multicol-20070606">http://www.w3.org/TR/2007/WD-css3-multicol-20070606</a>
    </dd>
   <!---->

   <dt id=CSS3GCPM>[CSS3GCPM]

   <dd>H&#229;kon Wium Lie. <cite>CSS Generated Content for Paged Media
    Module.</cite> 4 May 2007. W3C Working Draft. (Work in progress) URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-gcpm-20070504">http://www.w3.org/TR/2007/WD-css3-gcpm-20070504</a>
    </dd>
   <!---->

   <dt id=CSS3LAYOUT>[CSS3LAYOUT]

   <dd>Bert Bos. <cite>CSS3 Advanced Layout Module.</cite> 9 August 2007. W3C
    Working Draft. (Work in progress) URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-layout-20070809">http://www.w3.org/TR/2007/WD-css3-layout-20070809</a>
    </dd>
   <!---->

   <dt id=MEDIAQ>[MEDIAQ]

   <dd>H&#229;kon Wium Lie; Tantek &#199;elik; Daniel Glazman. <cite>Media
    Queries.</cite> 6 June 2007. W3C Candidate Recommendation. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606">http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606</a>
    </dd>
   <!---->

   <dt id=SXSWGRIDS>[SXSWGRIDS]

   <dd>Khoi Vinh; Mark Boulton. <cite>Grids Are Good.</cite> March 2007. SXSW
    Interactive, Austin, TX. URL: <a
    href="http://www.subtraction.com/pics/0703/grids_are_good.pdf">http://www.subtraction.com/pics/0703/grids_are_good.pdf</a>
    </dd>
   <!---->

   <dt id=THEGRID>[THEGRID]

   <dd>Allen Hurlburt. <cite>Grid: A Modular System for the Design and
    Production of Newpapers, Magazines, and Books.</cite> 1982. ISBN
    0-471-28923-X.</dd>
   <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>grid-columns, <a href="#grid-columns"><strong>#</strong></a>

   <li>grid-rows, <a href="#grid-rows"><strong>#</strong></a>
  </ul>
  <!--end-index-->

  <h2 class=no-num id=property-index>Property index</h2>
  <!--begin properties-->

  <table class=proptable>
   <thead>
    <tr>
     <th>Property

     <th>Values

     <th>Initial

     <th>Applies&nbsp;to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
    <tr valign=baseline>
     <td><a class=property href="#grid-columns">grid-columns</a>

     <td>[[&lt;length&gt;|&lt;percentage&gt;|&lt;relative length&gt;] |
      ([&lt;length&gt;|&lt;percentage&gt;|&lt;relative length &gt;
      ]+)[&lsquo;[&rsquo;&lt;integer&gt;&lsquo;]&rsquo;]? ]+ | none | inherit

     <td>none

     <td>all elements

     <td>no

     <td>refer to width of containing block

     <td>visual, paged

    <tr valign=baseline>
     <td><a class=property href="#grid-rows">grid-rows</a>

     <td>[[&lt;length&gt;|&lt;percentage&gt;|&lt;relative length&gt;] |
      ([&lt;length&gt;|&lt;percentage&gt;|&lt;relative length &gt;
      ]+)[&lsquo;[&rsquo;&lt;integer&gt;&lsquo;]&rsquo;]? ]+ | none | inherit

     <td>none

     <td>all elements

     <td>no

     <td>refer to height of containing block

     <td>visual, paged
  </table>
  <!--end properties-->
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->