You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1048 lines
34 KiB
1048 lines
34 KiB
<!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> © 2007 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</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 “css3-grid” in the subject, preferably like this:
|
|
“[<!---->css3-grid<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<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>‘grid-columns’ and ‘grid-rows’
|
|
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'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 "float:page top right" here positions the image
|
|
at the top right corner of the page (as defined in <a href="#CSS3GCPM"
|
|
rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>)
|
|
|
|
<p>"width:3gr" makes image 3 "grid units" wide, where a
|
|
"grid unit" is the distance between two adjacent grid lines.
|
|
Each boundary between a column and a gap automatically produces a grid
|
|
line, therefore to specify "two columns, including the gap between
|
|
columns, but not including any gaps outside the columns" we can just
|
|
say "3gr".
|
|
|
|
<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 'grid-columns',
|
|
'grid-rows' 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 ‘<a
|
|
class=property href="#grid-columns">grid-columns</a>’ and ‘<a
|
|
class=property href="#grid-rows">grid-rows</a>’ properties.
|
|
|
|
<h4 id=lsquo><span class=secno>4.1.1. </span>‘<a class=property
|
|
href="#grid-columns">grid-columns</a>’ and ‘<a class=property
|
|
href="#grid-rows">grid-rows</a>’ properties</h4>
|
|
|
|
<table class=propdef id=name->
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td> <dfn id=grid-columns>grid-columns</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>[[<length>|<percentage>|<relative length>] | <br>
|
|
([<length>|<percentage>|<relative length >
|
|
]+)[‘<code class=css>[</code>’<integer>‘<code
|
|
class=css>]</code>’]? ]+ | <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>[[<length>|<percentage>|<relative length>] | <br>
|
|
([<length>|<percentage>|<relative length >
|
|
]+)[‘<code class=css>[</code>’<integer>‘<code
|
|
class=css>]</code>’]? ]+ | <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 "i*", where "i" 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 "*". The value "*" is
|
|
equivalent to "1*". 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't have to be exactly same. The number doesn'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><style>
|
|
<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; }
|
|
</style>
|
|
<div class="div1">
|
|
<div class="div2">
|
|
<img />
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>However in the next example, grid of div2 is used by the float, because
|
|
it is the float's containing block:
|
|
|
|
<div class=example>
|
|
<pre><style>
|
|
.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; }
|
|
</style>
|
|
<div class="div1">
|
|
<div class="div2">
|
|
<img />
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=grid-units><span class=secno>6. </span>Grid units</h2>
|
|
|
|
<p><b>‘<span class=property>gr</span>’</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'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. </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"><length></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 'gr' 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 'gr' units are ignored (set to
|
|
their initial value).
|
|
|
|
<p class=issue>Need some examples here. E.g. what happens to '1gr'
|
|
float in a multi-column element within a table that is sized to content?
|
|
Grid size depends on the float's size so 'gr' 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'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'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>
|
|
|
|
<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å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–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å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å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åkon Wium Lie; Tantek Ç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 to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#grid-columns">grid-columns</a>
|
|
|
|
<td>[[<length>|<percentage>|<relative length>] |
|
|
([<length>|<percentage>|<relative length >
|
|
]+)[‘[’<integer>‘]’]? ]+ | 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>[[<length>|<percentage>|<relative length>] |
|
|
([<length>|<percentage>|<relative length >
|
|
]+)[‘[’<integer>‘]’]? ]+ | 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:
|
|
-->
|