8000 csswg-drafts/css3-grid/overview.html at f2e7ba4f6bfe2539b7ea4eb96ad61a60091294e8 · w3c/csswg-drafts · GitHub
Skip to content

overview.html

Latest commit

 

History

History
1032 lines (766 loc) · 33.3 KB

overview.html

File metadata and controls

1032 lines (766 loc) · 33.3 KB
<!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 }
.issue { color:red; font-style:italic;}
.todo { background:yellow; font-style:italic;}
</style>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
<body>
<div class=head> <!--begin-logo-->
<p><a class=logo href="http://www.w3.org/" rel=home><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a><a class=logo
href="../../" rel=in-activity><img alt="CSS WG"
src="../../../Woolly/woolly-icon.png"></a> <span
class=id>ED-css3-grid-20080115</span></p>
<!--end-logo-->
<h1 id=css-grid>CSS Grid Positioning Module Level 3</h1>
<h2 class="no-num no-toc" id=longstatus>Editor's Draft $Date$</h2>
<dl>
<dt>This version:
<dd><a href="http://dev.w3.org/csswg/css3-grid/overview.html">$Date$ (CVS $Revision$)</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, <a
href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a>
<dt>Authors:
<dd>Alex Mogilevsky, Microsoft, <a
href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a>
<dd>Markus Mielke, Microsoft, <a
href="mailto:alexmog@microsoft.com">mmielke@microsoft.com</a>
</dl>
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> &copy; 2008 <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>This is a member-only draft. It 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>)
mailing list <a href="mailto:w3c-css-wg@w3.org">w3c-css-wg@w3.org</a> is
preferred for discussion of this specification.
<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>).
<!--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>
</ul>
<li><a href="#grid-"><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="#grid-columns"><span class=secno>4.1.1.
</span>&lsquo;<span class=property>grid-columns</span>&rsquo; and
&lsquo;<span class=property>grid-rows</span>&rsquo; properties</a>
</ul>
<li><a href="#implicit"><span class=secno>4.2. </span>Implicit 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="#viewport"><span class=secno>4.2.3. </span>Viewport</a>
<li><a href="#priority"><span class=secno>4.2.4. </span>Priority of
explicit grid definition</a>
</ul>
</ul>
<li><a href="#grid-units"><span class=secno>5. </span>Grid units</a>
<ul class=toc>
<li><a href="#applicability"><span class=secno>5.1. </span>Applicability
of grid units</a>
<li><a href="#grid-container"><span class=secno>5.2. </span>Grid
container</a>
<li><a href="#reference"><span class=secno>5.3. </span>Reference point
for grid units</a>
</ul>
<li><a href="#grid-in"><span class=secno>6. </span>Grid in overflow</a>
<li><a href="#issues"><span class=secno>7. </span>Issues</a>
<ul class=toc>
<li><a href="#grid-on"><span class=secno>7.1. </span>Grid on
shrink-to-fit elements</a>
<li><a href="#additional"><span class=secno>7.2. </span>Additional
implicit grid lines</a>
<li><a href="#snap-to"><span class=secno>7.3. </span>Snap to grid</a>
<li><a href="#undefined"><span class=secno>7.4. </span>Undefined grid
and notion of &#39;default&#39; grid</a>
<li><a href="#page-grid"><span class=secno>7.5. </span>Page grid</a>
<li><a href="#named"><span class=secno>7.6. </span>Named grid lines and
cells</a>
<li><a href="#templates"><span class=secno>7.7. </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.
<h2 id=examples><span class=secno>3. </span>Examples</h2>
<p>Let&#39;s start with an illustration of grid 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 the whole page and a 2-column box in bottom left corner"
src=grid1_small.jpg>
<p class=caption>Floats in multi-column layout</p>
</div>
<p style="height: 18px">Figure 1 shows a 3-column layout in paged media. It
can be seen as a grid with 6 vertical lines (at each column boundary) and
horizontal lines at margins.
<div class=example>
<pre>body { columns:3; column-gap:2em; }
float1 { float:page bottom left; <strong>width:3gr;</strong> }
/* Figure 1 */
</pre>
</div>
<p>The statement &quot;float:page bottom left&quot; positions the image at
the bottom left corner of the page (as defined in <a href="#CSS3GCPM"
rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>)
<p>Property &quot;width:3gr&quot; makes it 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;.
<p>Also, in this example the author has added a horizontal line to align
illustrations with. This can be done by explicitly defining grid lines:
<div class=example>
<pre>
body { columns:3; column-gap:2em;
<strong>grid-rows: 1.5in 1fr;</strong> }
div.illustrations
{ float:page top left; width:5gr; height:1gr;}
float1 { float:page bottom left; width:3gr; }
/* Figure 2 */
</pre>
</div>
<p>In this example, &quot;grid-rows&quot; divides vertical space with
explicit grid lines.
<p>&quot;1fr&quot; is a flex unit (&#39;fr&#39; for &#39;fraction&#39;). If
multiple flex units are used, they take space proportional to their
values. If we wanted to define vertical lines that would exactly match the
3-column layout with 2em gaps we could say
<div class=example>
<pre>
grid-columns: 1fr 2em 1fr 2em 1fr;
</pre>
</div>
<p>When only one value has a &#39;fr&#39; unit (as in &quot;grid-rows:
1.5in 1fr&quot; above), it just takes all remaining space regardless of
the number.
<h3 id=example0><span class=secno>3.2. </span>Example 2</h3>
<p>The following example illustrates the use of a grid in construction of a
complex web site (see <a href="#SXSWGRIDS"
rel=biblioentry>[SXSWGRIDS]<!--{{SXSWGRIDS}}--></a> for how exactly this
was built). 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; width:9cm;"> <img alt="[image of
complex page]" src=Yeeaahh.png style="float:left; width:9cm;">
<p class=caption style=clear:left>Complex site designed with a grid</p>
</div>
<h2 id=grid-><span class=secno>4. </span>Grid declarations</h2>
<p>There are two ways to define a grid.
<ol>
<li>Explicit grid: defined with &#39;grid-columns&#39;,
&#39;grid-rows&#39; properties.
<li>Implicit grid: automatically created by elements with a natural grid
structure (multi-column elements and tables).
</ol>
<h3 id=explicit><span class=secno>4.1. </span>Explicit grid</h3>
<p>Grid lines can be defined in terms of rows and columns.&nbsp;Rows are
always horizontal and columns are always vertical (this doesn&#39;t change
in vertical writing modes)
<h4 id=grid-columns><span class=secno>4.1.1. </span>&lsquo;<a
class=property href="#grid-columns0">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-columns0>grid-columns</dfn>
<tr>
<td>Value:
<td>[[&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt;] | <br>
repeat([&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt; ]+)]+ | <br>
none | inherit
<tr>
<td>Initial:
<td>none
<tr>
<td>Applies to:
<td>non-replaced block-level elements
<tr>
<td>Inherited:
<td>no
<tr>
<td>Percentages:
<td><span>refer to width of the 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;fraction&gt;] | <br>
([&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&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>non-replaced block-level elements
<tr>
<td>Inherited:
<td>no
<tr>
<td>Percentages:
<td><span>refer to height of block</span>
<tr>
<td>Media:
<td>visual, paged
<tr>
<td>Computed value:
<td>specified value
</table>
<p>When grid-rows or grid-columns are specified, grid lines are defined as
follows:
<ol>
<li>&#39;start&#39; edge of content box (logical start according to
writing mode) defines a grid line
<li>each row or column of specified grid adds one line at the specified
distance from previous line
<li>if the last specified row or column does not reach the &#39;end&#39;
edge of the content box, another grid line is added at the edge of the
content box
</ol>
<p>&nbsp;
<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
<ul>
<li>Exact behavior of percentage when mixed with other units and/or
total percentage not equal to 100% is UA-specific. If possible UA
should apply the same distribution algorithm as for column widths of an
empty table
</ul>
<li><strong>Fraction</strong> is a non-negative floating-point number
followed by &#39;fr&#39;. Each fraction value takes portion of available
space proportional to the number.
</ul>
<p>For example this rule
<div class=example>
<pre>div { grid-columns: 50% 1fr 1fr 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 class=issue>&#39;fr&#39; needs a precise definition. It is possible that
there isn&#39;t any space to distribute between fractions, what happens
then? fr becomes zero?
<p>Grid lines can be defined in repeating groups using &quot;repeat()&quot;
construct. Nested repeating groups are not allowed.
<p>For example this rule
<div class=example>
<pre>div { grid-rows: 4em repeat(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 class=issue>It was proposed that property names refer to
horizontalvertical lines instead of rows/columns (because they in fact
define lines, not rows and columns). Possible alternatives: <strong>
grid-horizontal-lines/grid-vertical-lines; </strong>or perhaps simply
<strong> grid-horizontal/grid-vertical.</strong>
<p class=issue>It was proposed to have syntax for repeating a certain
number of times. It is not strictly necessary (if the number of times is
known the values can be repeated inline) but handy.
<h3 id=implicit><span class=secno>4.2. </span>Implicit grid</h3>
<p>Elements with a natural grid structure automatically define a grid that
aligns with the structure. It is called an<em> implicit grid</em>.<em>
</em>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>Border box of each table column defines two vertical lines; border box
of each table row defines two horizontal lines. In collapsing border model
there is always a pair of identical grid lines between each pair of rows
and columns. Maintaining same amount of lines per column keeps the
definition consistent across all table models and multi-column elements
(e.g. a span over 2 columns is always 3gr)
<p class=issue>Definition of a grid for a table is only meaningful if there
is something that can use it. Currently there are no table floats. Should
there be? Something like &quot;float:top left table; float-offset:2gr
4gr&quot; would use the table grid. Is there a use case for such floats?
There is still absolute positioning that can target at table of course...
<h4 id=viewport><span class=secno>4.2.3. </span>Viewport</h4>
<p>Viewport always defines a single-cell grid with the size of the
viewport.
<h4 id=priority><span class=secno>4.2.4. </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.
<h2 id=grid-units><span class=secno>5. </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:left 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>5.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=grid-container><span class=secno>5.2. </span>Grid container</h3>
<p>Since separate grids can be defined on nested elements, it must be
defined which grid is referred to for every use of &#39;gr&#39; unit.
<p>For all cases where &#39;gr&#39; unit is applicable the grid is taken
from the 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:4em repeat(1em 4em); }</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>
<h3 id=reference><span class=secno>5.3. </span>Reference point for grid
units</h3>
<p class=issue>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).
<p class=issue>Define how &#39;gr&#39; is used on in-flow blocks. Is
&#39;1gr&#39; generally equivalent to &#39;100%&#39; there?
<h2 id=grid-in><span class=secno>6. </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>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>
<li>Viewport
<ul>
<li>Additional lines are added, separated by the size of the viewport
</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>Add an example
<p class=issue>How important is an overflow grid? What use cases would
suffer if &#39;gr&#39; is just set to zero in overflow?
<h2 id=issues><span class=secno>7. </span>Issues</h2>
<h3 id=grid-on><span class=secno>7.1. </span>Grid on shrink-to-fit elements</h3>
<p class=issue>Specifying a grid on an element with shrink-to-fit sizing
can create difficult or unsolvable problems, similar to use percentages
within shrink to fit but even more complicated. Consider ignoring grid
definition on anything shrink-to-fit.
<h3 id=additional><span class=secno>7.2. </span>Additional implicit grid
lines</h3>
<p class=issue>On the implicit grids for multi-column elements, it might be
useful to have one grid line on the left and right edge of each column, as
well as a single grid line between each pair of columns. Perhaps doing the
same thing for tables, one line on each side of the border spacing and
another at the row/column boundary.
<h3 id=snap-to><span class=secno>7.3. </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=undefined><span class=secno>7.4. </span>Undefined grid and notion of
&#39;default&#39; grid</h3>
<p class=issue>When a grid unit is used in context where there isn&#39;t an
explicit or implicit grid specified, what should it be? Reaching to
nearest parent with a defined grid may or may not be the right choice.
There is an option to give any element a &quot;default grid&quot; of one
cell.
<h3 id=page-grid><span class=secno>7.5. </span>Page grid</h3>
<p>It must be possible to define different grids for left and right pages.
Also, any page with different dimensions (such as named pages) should be
able to define its own grid.
<p class=issue>Add grid-columns/grid-rows to @page rule
<h3 id=named><span class=secno>7.6. </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" 1fr 1em 1fr 0.5em "center" 0.5em 1fr 1em 1fr "right-edge";
</pre>
</div>
<p class=issue>This syntax doesn&#39;t easily extend to named cells. It was
noted however that named cells also open a possibility for named flows (by
providing a 133E sequence of named cells to fill) which makes the feature quite
attractive and further approaches Advanced Layout scenarios.
<h3 id=templates><span class=secno>7.7. </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>Acknowledgm 6D50 ents</h2>
<p class=MsoNormal>This specification is made possible by input from Håkon
Wium Lie, Steve Zilles, Mike Duggan, Bill Hill, Geraldine Wade, Rikkert
Koppes, Peter Linss [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>
<!---->
</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-columns0"><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-columns0">grid-columns</a>
<td>[[&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt;] |
repeat([&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt; ]+)]+ | none
| inherit
<td>none
<td>non-replaced block-level elements
<td>no
<td>refer to width of the 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;fraction&gt;] |
([&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt;
]+)[&lsquo;[&rsquo;&lt;integer&gt;&lsquo;]&rsquo;]? ]+ | none | inherit
<td>none
View remainder of file in raw view