css-template-1/Overview.src.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang=en>
<head
profile="http://microformats.org/profile/hcard http://microformats.org/wiki/rel-license">
<meta content="text/html; charset=utf-8" http-equiv=content-type>
<title>CSS Template Layout Module</title>
<link href="../default.css" rel=stylesheet type="text/css">

<style type="text/css">
  /* Just in case an incorrect max-width occurs in default.css */
  body {max-width: none !important}

  /* The TR postprocessor already inserted quotes: */
  .css::before, .property::before, .descriptor::before {content: none}
  .css::after, .property::after, .descriptor::after {content: none}

  .prod { font-family: inherit; font-size: inherit }
  pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
  code { font-size: inherit; }

  .example .visible {border: thin dotted silver}
</style>

<link rel=stylesheet href="https://www.w3.org/StyleSheets/TR/W3C-MO.css">

<body class=h-entry>
<div class=head><!--logo-->
<h1 class=p-name>CSS Template Layout Module</h1>
<h2 class="no-num no-toc">[LONGSTATUS] [DATE: 3 August 2004]</h2>

<dl>
  <dt>This version:

  <dd><a class=u-url href="[VERSION]">[VERSION]</a>

  <dt>Latest version:

  <dd><a href="[LATEST]">https://www.w3.org/TR/css-template-3/</a>

  <dt>Previous version:

  <dd><a href="https://www.w3.org/TR/2015/NOTE-css-template-3-20150326/"
  >https://www.w3.org/TR/2015/NOTE-css-template-3-20150326/</a>

  <dt>Feedback:

  <dd><a
  href="mailto:www-style@w3.org?subject=%5Bcss3-layout%5D%20feedback"
  >www-style@w3.org</a> with subject line &ldquo;[css-template-3]
  <var>&hellip; message topic &hellip;</var>&rdquo; (<a
  rel="discussion"
  href="http://lists.w3.org/Archives/Public/www-style/">archives</a>)

  <dt>Editors:

  <dd class="p-author h-card vcard"><span class="p-name fn">Bert
  Bos</span> (<span class="p-org org h-org">W3C</span>) <a
  class="u-email email" href="mailto:bert@w3.org"
  rel=author>bert@w3.org</a>

  <dd class="p-author h-card vcard"><span class="p-name fn">César
  Acebal</span> (<span class="p-org org h-org">University of
  Oviedo</span>)

  <dt>Editors' draft:

  <dd><a href="https://drafts.csswg.org/css-template/"
  >https://drafts.csswg.org/css-template/</a>
</dl>
<!--copyright-->
<hr title="Separator for header">
</div>

<!--=================================================================-->

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

<div class=sidefigure>
<p><img alt="Image: four elements move to four slots in a template"
longdesc=diagram.desc src=diagram.png>

<p class=caption>Above: a typical Web page. Below: the underlying grid
template.
</div>

<p>CSS is a simple, declarative language for creating style sheets that
specify the rendering of HTML and other structured documents. This
Note contains experimental ideas for <em>layout templates</em> and alternative
layout models in CSS.

<p>At the moment, it defines a <em>typographic grid</em> for
CSS. It has features to set up a grid-based template, to style the
<em>slots</em> of the template and to flow content into them.

<p>A grid template can be seen as a cross between table layout
(align blocks of text automatically in two-dimensions) and absolute
positioning (position elements in arbitrary order), but it also has
unique
features of its own.

<p>Grid templates can also be associated with pages in paged media
(via '@page'), to create <em>page templates.</em>

<p>Slots can form <em>chains,</em> to create non-rectangular
regions. A chain of slots is like a series of small pages: content is
broken at possible page breaks and distributed over the slots.

<p><em>Region-based styling</em> allows content to be styled not only
based on its position in the document tree, but also based on the slot
it finds itself in. This is achieved by allowing slot names to appear
in selectors.

<!--=================================================================-->

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

<p>This draft combines ideas from earlier drafts on Template Layout,
Grid Positioning [[CSS3GRID]] and Grid Layout [[CSS3-GRID-LAYOUT]].

<p>Issues on this draft are mentioned in the text itself and/or in the
on-line Tracker under <a
href="http://www.w3.org/Style/CSS/Tracker/products/15" >“Details on
Product CSS3 Template Layout.”</a>

<!-- Decided at Sep 2014 ftf: -->
<p><em>This document currently serves as a repository for ideas around
using templates for laying out elements, regions or pages; and for
various alternative layout models. It is expected to be updated, but
it is not expected to become a W3C Recommendation in this
form. Instead, ideas may migrate to other modules of CSS.</em>

<!--=================================================================-->

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

<!--=================================================================-->

<h2>Introduction</h2>

<p><em>(This section is not normative.)</em>

<h3>Summary and use cases</h3>

<div class=sidefigure>
<p><img alt="Image: four elements move to four slots in a template"
longdesc=diagram.desc src=diagram.png>

<p class=caption>Above: a typical Web page. Below: the underlying grid
template. It has four slots, a, b, c and d and the grid template is
defined by 'grid: "a a a a a a a" "b c c c c d d"'.
</div>

<p class=mtb>The styling of a Web page, a form or a graphical user
interface can roughly be divided into two parts: (1) defining the overall
“grid” of the page or window and (2) specifying the fonts, indents,
colors, etc., of the text and other objects. The two are not completely
separate, of course, because indenting or coloring a text influences
the perceived grid as well. Nevertheless, when one separates the parts
of a style that should change when the window gets bigger from the
parts that stay the same, one often finds that the grid changes
(different number of columns and rows, different order for the blocks
of content, less or more open space between those blocks, etc.),
while fonts, colors, indents, numbering styles, and many other things
don't have to change, until the size of the window becomes extreme.

<p>The properties in this specification associate a layout grid with
an element (or with a page, see below). Rather than rendering all
descendants of an element in a
single flow, they give an element multiple flows, called
<span>slots,</span> placed on an invisible grid by means of a
<span>grid template.</span> The descendants are given a 'flow'
property to designate the slot into which they flow.

<p>Because layouts on the Web have to adapt to different window and
paper sizes, the rows and columns of the grid can be made fixed or
flexible in size.

<p class=note>In some typographical traditions, the slots are called
“<span class=index title="field (of a typographical
grid)">fields</span>” or “<span class=index title="spatial
zone">spatial zones.</span>” Traditionally, also, all columns have the
same width, called the “<span class=index title="module (of a
typographical grid)">module</span>” or “<span class=index title="unit
(of a typographical grid)">unit</span>.” The horizontal lines of a
grid that define the rows are sometimes called “<span class=index
title="flow line">flow lines.</span>” Some traditions make the space
between pieces of content an explicit part of the grid, some consider
the space part of the content: Both styles are possible in CSS, the
latter by using the 'margin' property, the former by using the '.'
symbol in a grid template.

<p>The typical use cases for these properties include:

<ul>
<li><p>Complex Web pages, with multiple navigation bars in fixed
positions, areas for advertisements, etc.

<li><p>Complex forms, where the alignment of labels and form fields may
be easier with the properties of this module than with the properties
for tables, floats and margins.

<li><p>GUIs, where buttons, toolbars, labels, icons, etc., are aligned in
complex ways and have to stay aligned (and not wrap, for example) when
the window is resized.

<li><p>Paged displays (e.g., printed media) where each page
is divided into fixed areas for different kinds of content.

<li><p>Complex pages with multiple regions, where the style
of the text does not only depend on the type of element it comes from,
but also on the region it is displayed in (<em>region-based
styling</em>).

<li>Paged displays with complex running headers and footers, e.g.,
running headers that are in between parts of the page content, rather
than at the edge of the page.
</ul>

<p>Once a grid template has been defined, it can also be used to
position elements without adding them to a flow. Setting 'display:
grid' on a grid element makes all children into separate flows and
automatically distributes them over the grid. This is explained in
<cite>CSS Grid Layout</cite> [[!CSS3-GRID-LAYOUT]].

<p>Template-based positioning makes many traditional uses of
absolute positioning unnecessary. Like absolute positioning, grid
templates are especially useful for aligning elements that don't have
simple relationships in the source (parent-child, ancestor-descendant,
immediate sibling). But in contrast to absolute positioning, the
elements are not positioned with the help of horizontal and vertical
coordinates, but by flowing them into a template that is very much
like a table: The size and alignment of elements are governed
implicitly by the rows and columns of the template, and can
automatically adapt to the overall size of the element and to the
content in each row and column.

<div class=example>
<p>In this example, the four children of an element are assigned to
four slots (called a, b, c and d) in a 2×2 template. (All mark-up
examples in this specification are HTML fragments, unless otherwise
stated.)

<div class=sidefigure>
<p><img alt="Image: sample rendering" longdesc=aapje.desc
src=aapje.png>

<p class=caption>Each element occupies one slot. In this template, all
slots have the same size.
</div>

<pre>
&lt;style type="text/css"&gt;
  dl { grid: "a b"
             "c d" }
  #sym1 { flow: a }
  #lab1 { flow: b }
  #sym2 { flow: c }
  #lab2 { flow: d }
&lt;/style&gt;
&lt;dl&gt;
  &lt;dt id=sym1&gt;A
  &lt;dd id=lab1&gt;A is een aapje
  &lt;dt id=sym2&gt;B
  &lt;dd id=lab2&gt;B is de bakker
&lt;/dl&gt;
</pre>

<p><a href="ex-aapje.html">Try it out!</a> (Uses a JavaScript
emulation in browsers that do not implement grid templates natively.)
</div>

<div class=example>
<p>Templates can also help with device-independence. This example uses
Media Queries [[MEDIAQ]] to change the overall layout of a page from
3-column layout for a wide screen to a 1-column layout for a narrow
screen. It assumes the page has been marked-up with logical sections
with IDs.

<pre>
@media all
{
  body { grid: "a a a"
               "b c d" }
  #head { flow: a }
  #nav { flow: b }
  #adv { flow: c }
  #body { flow: d }
}
@media all and (max-width: 500px)
{
  body { grid: "a"
               "b"
               "c" }
  #head { flow: a }
  #nav { flow: b }
  #adv { display: none }
  #body { flow: c }
}
</pre>
</div>

<div class=example>
<p>The slots in a grid do not overlap, unless with negative margins.
Here is how
the <a
href="http://www.csszengarden.com/?cssfile=/026/026.css&amp;page=0" >
“zunflower” design</a> of the CSS Zen Garden could be done:

<pre>
#container {grid: "A B C"}
#container::slot(A) {box-shadow: 0.5em 0.5em 0.5em; z-index: 1}
#container::slot(B) {box-shadow: 0.5em 0.5em 0.5em; margin-left: -2em}
#intro {flow: A}
#supportingText {flow: B}
#linkList {flow: C}
</pre>
</div>

<div class=example>
<p>Template-based positioning borrows some concepts from table layout,
in particular the idea of aligning elements in rows and columns, so
that they constrain one another's size. But there are also
differences. This example shows some of them. Assume this document
fragment:

<pre>
&lt;div class=group>
 &lt;div>aa aa aa aa aa aa&lt;/div>
 &lt;div>bbb&lt;/div>
 &lt;div class=menu>ccccc&lt;/div>
&lt;/div>
</pre>

<p>We can lay it out as three columns, as the following illustrations
show. The style sheet would contain the following.

<pre>
.group {display: table}
.group > div {display: table-cell}
</pre>

<div class=figure>
<p><img alt="[Three unequal cells]" longdesc=table1.desc
src=table1.png>

<p class=caption>Example of rendering with a table.
</div>

<p>We can also use a template, in which case the style sheet would
contain this:

<pre>
.group {grid: "a b c"}
.group > div {flow: a}
.group > div + div {flow: b}
.group > div + div + div {flow: c}
</pre>

<p>By default, the table is as wide as needed to fit its contents. To
make sure it is as wide as its containing block, we need to add

<pre>.group {display: table; <i>width: 100%</i>}</pre>

<p>That is not needed for the grid template, but, on the other hand,
if we want the template to fit its contents, we would need to say so:

<pre>.group {grid: "a b c"; <i>width: fit-content</i>}</pre>

<p>(See [[!CSS3BOX]] for the definition of the 'width' property.) The
columns of the template are by default all the same size. The columns
of the table satisfy certain constraints, but their sizes may
differ. We can make them all the same by adding a rule (see
[[!CSS3TBL]]):

<pre>.group {display: table; width: 100%; <i>table-layout: fixed</i>}</pre>

<div class=figure>
<p><img alt="[Three equal cells]" longdesc=table2.desc src=table2.png>

<p class=caption>Example of rendering with equal columns.
</div>

<p>In both styles, we can set a column to a certain size:

<pre>div:nth-child(3) {<i>width: 3em</i>}</pre>

<p>resp.,

<pre>.group {grid: <i>* * 3em</i>  "a b c"}</pre>

<div class=figure>
<p><img alt="[Two equal cells, third is 3em wide]"
longdesc=table3.desc src=table3.png>

<p class=caption>Example of rendering with a fixed third column and
the other two columns of equal width.
</div>

<p>If there is an unknown number of columns (children of the div.group
element), the style sheet for the table model will automatically take
them into account. The style sheet for the template model, however,
creates a template of exactly three columns and can't handle tables
with an unknown number of columns. The extra elements will be added
into the default slot (in this case the ''a'' slot).

<p>(However, setting 'display' to 'grid' on the grid element creates a
different kind of grid, that <em>does</em> grow, see <a
href="#absolute">“Comparison with 'display: grid' and 'display:
inline-grid'”</a> below.)

<p>In both models, elements can have borders, but only in the table
model can borders be collapsed, which makes setting borders easier in
the table model:

<pre>
.group {display: table; <i>border-collapse: collapse</i>}
.group > div {<i>border: solid</i>}
</pre>

<p>resp.,

<pre>
.group > div {<i>border: solid; border-left: none</i>}
.group > div:first-child {<i>border-left: solid</i>}
</pre>

<p>In the template model, the order of the elements is explicit, and
thus it is possible to reverse the order of the columns:

<pre>
.group > div {flow: <i>c</i>}
.group > div + div {flow: b}
.group > div + div + div {flow: <i>a</i>}
</pre>

<div class=figure>
<p><img alt="[Different contents for the cells]" longdesc=table4.desc
src=table4.png>

<p class=caption>Example of rendering with the contents of the three
columns reversed: the third element is shown in the first slot and the
first element in the third slot.
</div>

<p>In the table model, the order of the rows and columns is given by
the document source and thus cannot be changed.
</div>

<div class=example>
<p>[Editorial note: Remove this example if the 'content' property will
<em>not</em> be allowed on elements, as it is currently expected to
be.]

<p>This example shows a way to move notes to the end of a section.
“Notes” in this example refers to elements in HTML with a class of
“note”. A fragment of HTML such as

<pre>
&lt;div class=section>
  &lt;p>The balubious coster of the fifth secter&lt;span
    class=note> The sixth secter coster is a difter
    manon.&lt;/span> of The Rollow Carpug mentizes a costernica.
  &lt;p>&hellip;
&lt;/div>
</pre>

<p>with this style sheet

<pre>
div.section {
    grid: "*"
          "F"}
.note {
    flow: F;
    content: counter(note) ".\A0" contents;
    counter-increment: note;
    font-size: smaller}
.note::before {
    content: counter(note);
    vertical-align: super;
    font-size: larger}
</pre>

<p>results in a rendering similar to this:

<div class=figure>
<p><img alt="Same text, with the SPAN replaced by “(1)” and its
content moved to the end." longdesc=footnotes.desc src=footnotes.png>

<p class=caption>Rendering of a text with footnotes.
</div>

<p>The “Generated content for paged media” module [[CSS3GCPM]] is
expected to define specific features for footnotes that are both
easier and more powerful than this example.
</div>

<div class=example>
<p>This example shows the use of <span class=index title=chain>chained
regions:</span> text from region 1
continues in region 2, 3 and 4. And it shows how to use
pseudo-elements to style text in a particular region: text in region 1
is bigger than in other regions.

<div class=figure>
<p><img alt="Image of a complex, 3-column layout"
longdesc=regions-intro-rendering.desc src=regions-intro-rendering.png>

<p class=caption>Example rendering
</div>

<p>We assume a document fragment similar to this:

<pre>
&lt;div id=article>
  &lt;h1>Introduction&lt;/h1>
  &lt;p>&lt;img src="sunset" alt="">
  &lt;p>This is an example…

  &lt;h1>More Details&lt;/h1>
  &lt;p>This illustrates…
  &lt;p>Then, the example…
  &lt;p>Finally, this…
&lt;/div>
</pre>

<p>The style sheet makes the DIV into a grid element with five
regions, called A, *, b, c and d. The regions are grouped into two
chains: region A on its own, and the chain consisting of *, b, c and
d.

<pre>
#article {
  <span class=index>grid</span>: "A A c"
        "A A c"
        "* * c"
        "a b c";
  <span class=index>chains</span>: * a b c }
</pre>

<p>The '*' is a special name. It indicates the <em>default slot,</em>
the slot where content goes if it doesn't have an explicit 'flow'
property. We could have used a normal letter and added an explicit
'flow' property to the children of the DIV, but by using * we don't
have to. All children thus go into region * (and continue in a, b and
c as needed). The IMG element goes into region A. We assume for
simplicity that there is only one IMG element:

<pre>#article img { flow: A }</pre>

<p>The text in region * is bolder, larger and a different color than
in the other regions. Also, an H1 that falls into this region is
rendered differently from other H1s:

<pre>
<span class=index>@region</span> ::slot(*)
{
  * {
    font-weight: bold;
    color: #0C3D5F;
    font-size: larger }
  h1 {
    color: crimson;
    display: run-in }
}
</pre>

<p>(For brevity, the example doesn't show the style rules to set the
color and background, to make the text justified, add the left border
to the second H1, etc.)

<p>As the image shows, the text of the last paragraph isn't complete
and presumably continues somewhere else, but that part is outside the
scope of this example. In paged media, we could attach the grid
template to a page instead of an element and let the text continue on
the next page; we could also make slot c into a multi-column element
so that the text forms additional columns to the right of current
image (see [[CSS3GCPM]] for some ideas), or there could be a scrollbar
on slot c.
</div>

<div class=example>
<p>This example shows three ways to align the contents of a
fixed-height paragraph to the bottom of the box:

<dl>
<dt>Method 1 <dd>
<pre>P {height: 20em; grid: "." "*" fit-content}</pre>
<dt>Method 2 <dd>
<pre>P {height: 20em; grid: "*"}
P::slot(*) {vertical-align: bottom}</pre>
<dt>Method 3 <dd>
[Editorial note: Remove method 3 if <span
class=index>vertical-align</span> will <em>not</em> be generalized to
apply to all blocks.]
<pre>P {height: 20em; vertical-align: bottom}</pre>
</dl>

<p>However, the styles differ in case the content is taller than 20 em
and overflows: the first style has a baseline-aligned content which
will thus overflow <em>below</em> the element's box; the second
example has bottom-aligned content, which will thus overflow
<em>above</em> the element's box.
</div>

<div class=example>
<p>This example (based on a challenge by Andrew Fedoniouk) shows how a
grid template can be used to display six items in two rows of
three. Assume the following document:
<pre>
&lt;p&gt;
  &lt;span&gt;...&lt;/span&gt;
  &lt;span&gt;...&lt;/span&gt;
  &lt;span&gt;...&lt;/span&gt;
  &lt;span&gt;...&lt;/span&gt;
  &lt;span&gt;...&lt;/span&gt;
  &lt;span&gt;...&lt;/span&gt;
&lt;/p&gt;
</pre>
<p>The simplest way to break this into two lines (or more) is to add a
hard line break after the third SPAN: ''span:nth-child(3)::after
{content: "\A"; white-space: pre}''. That works fine, unless the SPANs
are inline blocks (''span {display: inline-block}''). Another way is
to float all SPANs and add a 'clear' property on the fourth: ''span
{float: left} span:nth-child(4) {clear: left}''. But if the SPANs have
different heights or baselines, their vertical alignment will be
different than if they were on the same line.

<p>With a grid template, we can say that the P has not one, but two
flows, a and b, the second one positioned below the first; and then we
assign the fourth and subsequent SPANs to
the “b” flow. (The others automatically go into the default, first
flow.)
<pre>
p {grid: "a" "b"}
span:nth-child(n+4) {flow: b}
</pre>

<p>This almost works. There is just a subtle issue with the spaces
between the SPANs. We moved the last three SPANs to flow b, but we
have no way to move the spaces between them. They remain in the
default (first) slot. (They collapse, as there is nothing left between
them, so we don't actually see them anymore.) To get spaces between
the SPANs in slot b, we need to generate new spaces:

<pre>span:nth-child(n+4)::after {content: " "}</pre>

<p class=issue>This space handling is not very intuitive. One might
expect there to be a way to say “select everything from this element
onward” or maybe a pseudo-element selector for the text between
elements. Or a new property to specify different ways to handle the
anonymous text inside a grid element. For the moment, there is no such
thing. Suggestions are welcome.

<p>If, on the other hand, we <em>don't</em> want spaces between the
SPANs, then the question becomes how to get rid of the spaces between
the SPANs in the first row. There are several ways of doing that. One
way is to explicitly flow the three first SPANs to slot “a”:

<pre>span {flow: a}</pre>

<p>The SPANs are thus taken out of the P, causing the P's spaces to
end up next to each other at the start of flow “a” and collapse
away. Another, maybe more intuitive way is to set the spaces to zero
width in the P, and then back to normal in the SPANs (see
'word-spacing' in [[CSS3TEXT]]):

<pre>
p {word-spacing: -100%}
span {word-spacing: normal}
</pre>

<p>[Editorial note: Remove this last method if percentage values on
'word-spacing' will not be allowed. They currently (March 2015) have
Working Draft status.]
</div>

<div class=example>
<p>This example uses a <em>page-based template</em> to create a
running header that is not at the top of the page, but exactly in the
middle. We need to define our own page template for this, because the
predefined page template of [[CSS3PAGE]] only has margin boxes along
the edge of the page.

<pre>
@page {
  grid:
    "top-half"
    "running-header" 3em
    "bottom-half";
  chains: top-half bottom-half
}
::slot(running-header) {
  content: "My Magazine - page " counter(page) " - February 2013";
  text-align: center;
  <span class=index>vertical-align</span>: middle;
  border: solid;
  margin: 1em 0;
}
</pre>
<div class=figure>
<p><img src="page.png" alt="Image: Example rendering" longdesc="page.desc">

<p class=caption>An example of a page rendered with the above page
template. It has the “running header” with the page number right in
the middle of the page.
</div>
</div>

<!--=================================================================-->

<h3 id=dependencies>Dependencies on other modules</h3>

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

<ul>
<li><cite>CSS 2.1</cite> [[!CSS21]]
&ndash; <a href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes"
><dfn>block container,</dfn></a> the property <dfn>content,</dfn> and
the concept of <dfn>stacking context.</dfn>

<li><cite>CSS syntax module</cite> [[!CSS3SYN]] &ndash;
<dfn>interactive</dfn> vs <dfn>non-interactive</dfn> media.

<li><cite>CSS values and Units module</cite> [[!CSS3VAL]] &ndash; <a
href="https://www.w3.org/TR/css3-values#strings">
<dfn><var>&lt;string&gt;</var></dfn></a> and <a
href="https://www.w3.org/TR/css3-values#length-value">
<dfn><var>&lt;length&gt;</var></dfn></a>.

<li><cite>CSS box module</cite> [[!CSS3BOX]] &ndash; properties
<dfn>margin</dfn>, <dfn>margin-right</dfn>, <dfn>margin-left</dfn>,
<dfn>width</dfn>, <dfn>height</dfn>, <dfn>float</dfn>,
<dfn>display</dfn> and <dfn>overflow</dfn>; definitions of the terms
<dfn>intrinsic minimum</dfn> and <dfn>intrinsic preferred</dfn> (as in
the phrases “intrinsic preferred width” and “intrinsic minimum width,”
referring roughly to the width of the content without breaking any
lines and the width with as many line breaks as possible.)

<li><cite>CSS text layout</cite> [[!CSS3-WRITING-MODES]] &ndash;
defines <dfn>block flow direction</dfn> and the
properties <dfn>direction</dfn> and <dfn>writing-mode</dfn>. The
latter defines when an element has a <dfn>vertical writing mode</dfn>
(text lines are vertical) or a <dfn>horizontal writing mode</dfn>
(text lines are horizontal). For brevity, we refer to the former as
a <dfn title="vertical|vertical element" >vertical element</dfn> and
to the latter as a <dfn title="horizontal|horizontal element"
>horizontal element.</dfn>

<li><cite>CSS positioning</cite> [[!CSS3POS]] &ndash; properties
<dfn>z-index</dfn>, <dfn>position</dfn>, <dfn>top</dfn>,
<dfn>right</dfn>, <dfn>bottom</dfn>, <dfn>left</dfn>.

<li><cite>CSS fragmentation</cite> [[CSS3-BREAK]] &ndash; properties
<dfn>break-before</dfn>, <dfn>break-after</dfn> and
<dfn>break-inside</dfn>; the definition of <dfn>fragmenter</dfn>.

<li><cite>CSS paged media</cite> [[CSS3PAGE]] &ndash; definition of
<dfn>page area</dfn> (in particular its width &amp; height).

<li><cite>CSS background and borders</cite> [[CSS3BG]] &ndash;
properties <dfn>background</dfn>, <dfn>background-image</dfn>,
<dfn>background-size</dfn>, <dfn>box-decoration-break</dfn>
<span class=issue>and <dfn>box-shadow</dfn>?</span>

<li><cite>CSS tables</cite> [[!CSS3TBL]] &ndash; property
<dfn>vertical-align</dfn>. <span class=issue>[or Box Module?]</span>

<li><cite>CSS Multi-column Layout Module</cite> [[CSS3COL]] &ndash;
property <dfn>columns</dfn>.

<li><cite>CSS Generated and replaced content module level 3</cite>
[[!CSS3GENCON]] &ndash; property <dfn>content</dfn>.

<li><cite>CSS regions</cite> [[!CSS3-REGIONS]] &ndash; at-rule
<dfn>@region</dfn> and the term <dfn>region.</dfn>

<li><cite>CSS Grid Layout</cite> [[!CSS3-GRID-LAYOUT]] &ndash; the
term <dfn>grid container</dfn> and the properties
<dfn>grid-auto-flow</dfn>, <dfn>grid-auto-columns</dfn> and
<dfn>grid-auto-rows</dfn>. (Note: A grid container is an element with
a 'display' of ''grid'' or ''grid-inline''.)

<li><cite>CSS Cascading and Inheritance Level 3</cite>
[[!CSS3CASCADE]] &ndash; keywords <dfn>inherit,</dfn>
<dfn>initial</dfn> and <dfn>unset.</dfn>
</ul>

<p class=issue>Add to the above all the properties that are allowed on
slots (see <a href="#slot-pseudo">“Styling slots: the ''::slot()''
pseudo-element”</a>).

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

<ul>
<li><cite>Selectors</cite> [[SELECT]]

<li><cite>CSS Text Module Level 3</cite> [[CSS3TEXT]] &ndash; the
<dfn>word-spacing</dfn> property
</ul>

<p>See <a
href="https://www.w3.org/TR/CSS21/about.html#property-defs" >section&nbsp;1.4.2
of CSS level&nbsp;2</a> [[CSS21]] for the grammar and other notations
that this specification uses in property definitions.

<!--=================================================================-->

<h3 id=values>Values</h3>

<p>This specification follows
the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS
property definition conventions</a> from [[!CSS21]]. Value types not
defined in this specification are defined in CSS Level 2 Revision 1
[[!CSS21]]. Other CSS modules may expand the definitions of these
value types: for example [[CSS3COLOR]], when combined with this
module, expands the definition of the &lt;color&gt; value type as used
in this specification.</p>

<p>In addition to the property-specific values listed in their
definitions, all properties defined in this specification also accept
the ''inherit'', ''initial'', and ''unset'' keywords as their
property value.

<!--=================================================================-->

<h3 id=accessibility>A note about accessibility</h3>

<p><em>(This section is not normative.)</em>

<p>The facilities in this specification allow elements from a document
to be displayed in a visual order that is to a large extent
independent of the order in the document. That may have both positive
and negative effects on accessibility. The positive aspect is that it
allows the content in the document to be kept in logical order, so
that the document is as functional as possible without the style sheet
and on media where the style sheet doesn't apply. A negative aspect is
that a document that has a defined tab order (the order in which
elements get the focus when the tab-key is pressed) will show on the
screen with a tab order unrelated to the visual order. It may be
necessary to use the keyboard control features of the CSS Basic User
Interface module [[CSS3UI]] to ensure that the tab navigation follows
the visual order, or to refrain from positioning semantically related
elements in different parts of a template.

<p>The following two requirements from the Web Content Accessibility
Guidelines (WCAG) 2.0 [[WCAG20]] are particularly relevant. See that
specification for more information.

<blockquote>
<p><a
href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-sequence"
><strong>1.3.2 Meaningful Sequence:</strong></a> When the sequence in
which content is presented affects its meaning,
a <a
href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#correct-reading-sequencedef"
>correct reading sequence</a> can
be <a
href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#programmaticallydetermineddef
" >programmatically determined.</a> (Level A)
</blockquote>

<blockquote>
<p><a
href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-order"
><strong>2.4.3 Focus Order:</strong></a> If
a <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef"
>Web page</a> can
be <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#nav-seqdef"
>navigated sequentially</a> and the navigation sequences affect
meaning or operation, focusable components receive focus in an order
that preserves meaning and operability. (Level A)
</blockquote>

<!--=================================================================-->

<h2>Stack of cards layout</h2>

<p class=issue>This is a placeholder.

<p>A stack is a layout model based on the metaphor of a stack of index
cards: sibling elements are formatted as boxes (<dfn
title="card">“cards”</dfn>) of the same size at the same position with
a <dfn>tab</dfn> sticking out at one side that contains a title for
that card. All tabs are visible (and automatically positioned so they
overlap as little as possible), but only one box is visible at a
time. In an interactive UA, the user can activate a card (e.g., by
clicking on a tab, or by pressing page-down), which displays that card
and hides all the others in the stack. E.g., a rule 'display: stack'
could make an element into a stack of cards (all children become
cards, sized to the largest among them) and 'display: tab' could make
their descendants into titles for the cards. Maybe other properties
determine the style of the tabs and on which side they display (top,
bottom, left or right).

<!--=================================================================-->

<h2>Declaring templates</h2>

<p>Grid templates are declared with the 'grid-template-areas', 'grid-template-rows',
'grid-template-columns' and 'grid' properties, defined below.

<p>An element that has a grid template is called a <dfn>grid
element.</dfn> More precisely: an element is a grid element if (1) it
generates a <span>block container</span> box [[!CSS21]] and (2) at
least one of 'grid-template-areas', 'grid-template-rows' or 'grid-template-columns' has a
value other than the initial value.

<p class=note>Block containers are, informally, elements that can have
block elements as children, such as blocks, inline blocks or table
cells, but not inline elements or replaced elements.

<p>An element's <dfn>grid ancestor</dfn> is the nearest ancestor that
is a <span>grid element.</span>

<p class=note>Note that not all elements have a grid ancestor. E.g.,
the root element has none.

<p>The <dfn>number of columns</dfn> of a grid element is the number
of <var>&lt;col-width&gt;</var> values in 'grid-template-columns' or the number
of columns in 'grid-template-areas', whichever is larger.

<p>The <dfn>number of rows</dfn> is the number
of <var>&lt;row-height&gt;</var> values in 'grid-template-rows' or the number
of rows in 'grid-template-areas', whichever is larger.

<p class=note>Note that a grid element always has at least one row and one
column. Those may, however, have zero size.

<!--=================================================================-->

<h3 id=grid-template >Declaring a template: 'grid-template-areas'</h3>

<p>The 'grid-template-areas' property implicitly assigns a grid to an
element and defines named slots in the grid. It can also designate a
slot as the <em>default slot</em> for content without an explicit
flow.

<table class=propdef>
<tbody>
<tr><th>Name: <td><dfn>grid-template-areas</dfn>
<tr><th><a href="#values" >Value</a>: <td>none | <var>&lt;string&gt;</var>+
<tr><th>Initial: <td>none
<tr><th>Applies to: <td><span>block container</span> elements [[!CSS21]] and <em>grid container</em> elements [[!CSS3-GRID-LAYOUT]]
<tr><th>Inherited: <td>no
<tr><th>Animatable: <td>no
<tr><th>Percentages: <td>N/A
<tr><th>Computed&nbsp;value: <td>specified value
<tr><th>Canonical order: <td><abbr title="follows order of property
value definition">per grammar</abbr>
</table>

<p>Each string consist of one or more asterisks (“*”), identifiers,
periods (“.”), spaces and tabs. Each string represents one row in the
template, each symbol other than a space or tab represents one column
in that row. Spaces and tabs have no meaning. They separate
identifiers and may also be added for readability.

<p>The symbols in the template have the following meaning

<dl>
<dt>&lt;identifier&gt;
<dd>
Named slot for content.

<!--
<p class=issue>Unicode normalization is not yet
defined in css3-values nor anywhere else. E.g., we want é to match é,
no matter if the author typed U+0301 U+0065 or U+00C9.)
-->

<dt>*
<dd>
(Asterisk.) Default slot for content (explained below).

<dt>.
<dd>
(Period.) Blank space.
</dl>

<p>Multiple identical identifiers in adjacent rows or columns form a
single <dfn>slot</dfn> that spans those rows and columns. Ditto for
multiple “*”s. Slot names are case-sensitive, so uppercase and
lowercase letters are considered to be different letters.

<p class=issue>Case-sensitivity should instead be defined by reference
to the definition of identifiers, probably in css3-values.

<p>Non-rectangular slots and multiple slots with the same name are
illegal. A template without any slot name or “*” is illegal. A template
with more than one “*” slot is illegal. Strings with different numbers
of columns (<em>before</em> padding with “.”, see the next paragraph) are
illegal. These errors cause the declaration to be ignored.

<p class=note>Note: <span class=index
title="region!!non-rectangular|region!!disconnected" >non-rectangular
and disconnected regions</span> may be
permitted in a future update of CSS.

<p>If there are fewer symbols in a string than the <span>number of
columns</span> in the element, the string is implicitly padded with
“.” (period) symbols. Likewise, if there are fewer strings than the
<span>number of rows</span> in the element, additional strings
consisting of “.” (period) symbols are implicitly added.

<p>Each slot (identifier or “*”) acts as a block element for its contents.

<p>If the value is ''none'', then no explicit slots are defined. If
the element is a <em>grid element,</em> then the element instead has
an <dfn>implicit template</dfn> consisting of a single '*' slot.

<p class=note>Note that an element is a grid element in this case if
'grid-template-columns' and 'grid-template-rows' are not both ''auto''.

<div class=example>
<p>For example, the following two sets of style rules are equivalent:

<pre>DIV {
  grid-template-areas: none;
  grid-template-rows: 10em 10em 10em;
  grid-template-columns: * * * * }
</pre>

<p>and

<pre>DIV {
  grid-template-areas: "****" "****" "****";
  grid-template-rows: 10em 10em 10em;
  grid=columns: * * * * }
</pre>
</div>

<p class=note>Authors should be aware that naming slots with Hebrew or
Arabic letters may cause some text editors to display the CSS rule
with the slot name of the string on the right. However, the first
symbol in each string corresponds to the first value in 'grid-template-columns'
and thus represents the leftmost column in the rendering of the
document.

<div class=example>
<p>Only a <span>block container</span> element can be a <span>grid
element.</span> E.g., in the following document, the elements with ID
“one,” “three” and “five” are grid elements, but the 'grid' property
on “two” and “four” has no effect.

<pre>
&lt;html>
  &lt;style>
   #one {grid: "a b c"}
   #two {grid: "a" "b"}
   #three {display: inline-block; grid: "a b" "c d"}
   #four {grid: "a @"}
   #five {grid: "a b"}
  &lt;/style>
  &lt;table>
   &lt;tr id=four>&lt;td>... &lt;td id=five>...
  &lt;/table>
  &lt;ol>
   &lt;li id=one>
    ... &lt;span id=three>... &lt;/span>...
   &lt;li>
    ... &lt;em id=two>... &lt;/em>...
  &lt;/ol>
</pre>
</div>

<!--=================================================================-->

<h3 id=grid-column-sizes >Specifying the widths of columns:
'grid-template-columns'</h3>

<table class=propdef>
<tbody>
<tr><th>Name: <td><dfn>grid-template-columns</dfn>
<tr><th><a href="#values" >Value</a>: <td>auto | <var>&lt;col-width&gt;</var>+
<tr><th>Initial: <td>auto
<tr><th>Applies to: <td><span>block container</span> elements and <em>grid container</em> elements
<tr><th>Inherited: <td>no
<tr><th>Animatable: <td>yes, between grids with the same number of tracks
<tr><th>Percentages: <td>N/A
<tr><th>Computed&nbsp;value: <td>specified value
<tr><th>Canonical order: <td><abbr title="follows order of property
value definition">per grammar</abbr>
</table>

<p>The 'grid-template-columns' property specifies the sizes of the columns of
a grid.

<p>Where

<pre class=prod>
<dfn>&lt;col-width&gt;</dfn> = <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
  <var>&lt;minmax&gt;</var> | min-content | max-content | fit-content
<dfn>&lt;minmax&gt;</dfn> = minmax( <var>&lt;col-width&gt;</var> , <var>&lt;col-width&gt;</var> )</pre>

<p class=issue>The definition of minmax isn't correct, it should only
accepts certain values.

<p>Each <var>&lt;col-width&gt;</var> sets the width of a column, the
first value for the leftmost column, the second for the second column,
etc.

<p>If there are fewer <var>&lt;col-width&gt;</var> values than
the <span>number of columns</span> in the element, or if the value is
''auto'', the missing columns widths are all '*'.

<p>Each <var>&lt;col-width&gt;</var> can be one of the following:

<dl>
<dt><var>&lt;length&gt;</var>
<dd>
An explicit width for that column. Negative values are illegal.

<dt><var>&lt;fraction&gt;</var>
<dd>
(A non-negative number followed by ''fr''.) A fraction of the
remaining space. '1fr' means the same as '*'

<dt>*
<dd>
(Asterisk.) All columns with a width of '*' have the same width.

<dt><var>&lt;percentage&gt;</var>
<dd>
Expresses a size as a percentage of the element's a-priori
content width. <span class=issue>When the width of the <span>grid
element</span> is dependent on content, the result is
undefined.</span>

<dt>max-content
<dt>min-content
<dd>
The column's width is determined by its contents. See
the <a href="#slot-sizes" >algorithm</a> below.

<dt>minmax(<var>p</var>,<var>q</var>)
<dd>
The column's width is constrained to be greater than or equal
to <var>p</var> and less than or equal to <var>q</var>. <var>p</var>
and <var>q</var> stand for [ <var>&lt;length&gt;</var> | max-content |
min-content | * ]. There may be white space around the <var>p</var>
and <var>q</var>. If <var>q</var> &lt; <var>p</var>, then <var>q</var>
is ignored and ''minmax(<var>p</var>,<var>q</var>)'' is treated as
'minmax(<var>p</var>,<var>p</var>)'.

<dt>fit-content
<dd>
Equivalent to 'minmax(min-content, max-content)'.
</dl>

<!--=================================================================-->

<h3 id=grid-template-row-sizes >Specifying the height of rows: 'grid-template-rows'</h3>

<table class=propdef>
<tbody>
<tr><th>Name: <td><dfn>grid-template-rows</dfn>
<tr><th><a href="#values" >Value</a>: <td>auto | <var>&lt;row-height&gt;</var>+
<tr><th>Initial: <td>auto
<tr><th>Applies to: <td><span>block container</span> elements and <em>grid container</em> elements
<tr><th>Inherited: <td>no
<tr><th>Animatable: <td>yes, between grids with the same number of tracks
<tr><th>Percentages: <td>N/A
<tr><th>Computed&nbsp;value: <td>specified value
<tr><th>Canonical order: <td><abbr title="follows order of property
value definition">per grammar</abbr>
</table>

<p>The 'grid-template-rows' property specifies the heights of the rows of a
grid.

<pre class=prod>
<dfn>&lt;row-height&gt;</dfn> = <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
  <var>&lt;minmax&gt;</var> | min-content | max-content | fit-content
<dfn>&lt;minmax&gt;</dfn> = minmax( <var>&lt;row-height&gt;</var> , <var>&lt;row-height&gt;</var> )
</pre>

<p class=issue>The definition of minmax isn't correct, it should only
accepts certain values.

<p class=note>Note that the syntax is the same syntax as for
'grid-template-columns'

<p>Each <var>&lt;row-height&gt;</var> sets the height of a row, the
first value for the topmost row, the second for the second row, etc.

<p>If there are fewer <var>&lt;row-height&gt;</var> values than
the <span>number of rows</span> in the element, or if the value is
''auto'', the missing row heights are all ''fit-content''.

<p>Each <var>&lt;row-height&gt;</var> can be one of the following:

<dl>
<dt><var>&lt;length&gt;</var>
<dd>
An explicit height for that row. Negative values are illegal.

<dt><var>&lt;fraction&gt;</var>
<dd>
(A non-negative number followed by ''fr''.) A fraction of the
remaining space. '1fr' means the same as '*'

<dt>* (asterisk)
<dd>
All rows with a height of '*' have the same height.

<dt><var>&lt;percentage&gt;</var>
<dd>
Expresses a size as a percentage of the element's a-priori
content height.

<p class=issue>When the height of the <span>grid element</span> is
dependent on content, the result is undefined.

<dt>max-content
<dt>min-content
<dd>
The row's height is determined by its contents. See
the <a href="#slot-sizes" >algorithm</a> below.

<dt>minmax(<var>p</var>,<var>q</var>)
<dd>
The row's height is constrained to be greater than or equal
to <var>p</var> and less than or equal to <var>q</var>. <var>p</var>
and <var>q</var> stand for [ <var>&lt;length&gt;</var> | max-content |
min-content | * ]. There may be white space around the <var>p</var>
and <var>q</var>. If <var>q</var> &lt; <var>p</var>, then <var>q</var>
is ignored and ''minmax(<var>p</var>,<var>q</var>)'' is treated as
'minmax(<var>p</var>,<var>p</var>)'.

<dt>fit-content
<dd>
Equivalent to 'minmax(min-content, max-content)'.
</dl>

<!--=================================================================-->

<h3 id=grid-shorthand >The 'grid' and 'grid-template' shorthand
properties</h3>

<table class=propdef-extra>
<tbody>
<tr><th>Name: <td><dfn>grid-template</dfn>
<tr><th><a href="#values" >Value</a>: <td>none |
<var>&lt;col-width&gt;</var>* [ [ <var>&lt;string&gt;</var>
<var>&lt;row-height&gt;</var>? ]+ | '/' <var>&lt;row-height&gt;</var>+
]
<tr><th>Initial: <td>none
<tr><th>Applies to: <td><span>block container</span> elements and <em>grid container</em> elements
<tr><th>Inherited: <td>no
<tr><th>Animatable: <td>see individual properties
<tr><th>Percentages: <td>see individual properties
<tr><th>Computed&nbsp;value: <td>see individual properties
<tr><th>Canonical order: <td>N/A
</table>

<table class=propdef-extra>
<tbody>
<tr><th>Name: <td><dfn>grid</dfn>
<tr><th><a href="#values" >Value</a>:
<td><var>&lt;'grid-template'&gt;</var> |
<var>&lt;'grid-auto-flow'&gt;</var> [
<var>&lt;'grid-auto-columns'&gt;</var> [ /
<var>&lt;'grid-auto-rows'&gt;</var> ]? ]
<tr><th>Initial: <td>See individual properties
<tr><th>Applies to: <td><span>block container</span> elements and <em>grid container</em> elements
<tr><th>Inherited: <td>no
<tr><th>Animatable: <td>see individual properties
<tr><th>Percentages: <td>see individual properties
<tr><th>Computed&nbsp;value: <td>see individual properties
<tr><th>Canonical order: <td>N/A
</table>

<p>The 'grid-template' property is a shorthand for
'grid-template-areas', 'grid-template-columns' and
'grid-template-rows' and is equivalent to setting those properties as
follows:

<ul>
<li>'grid-template-areas' is set to the list of
<var>&lt;string&gt;</var> values. If the value contains a slash (“/”)
instead of strings, 'grid-template-areas' is set to <var>n</var>
strings of <var>m</var> asterisks (“*”) each, where <var>n</var> is the
number of <var>&lt;row-height&gt;</var> values and <var>m</var> the number of 
<var>&lt;col-width&gt;</var> values.

<li>'grid-template-rows' is set to the list of <var>&lt;row-height&gt;</var>
values, with any omitted ones set to ''fit-content''.

<li>'grid-template-columns' is set to the list of <var>&lt;col-width&gt;</var>
values, or to ''auto'' if there are none.
</ul>

<p>The 'grid' property is a shorthand for setting
'grid-template-areas', 'grid-template-rows', 'grid-template-columns',
'grid-auto-rows', 'grid-auto-columns', and 'grid-auto-flow' in a
single declaration. See [[CSS3-GRID-LAYOUT]].

<p class=note>Note that 'grid-auto-rows', 'grid-auto-columns', and
'grid-auto-flow' only apply if 'display' is ''grid'' or
''inline-grid''.

<div class=example>
<p>For example, the rule

<pre>grid: * 10em "a b c" "a b d" 4em</pre>

<p>is the same as

<pre>
grid-template-columns: * 10em;
grid-template-areas: "a b c" "a b d";
grid-template-rows: auto 4em;
</pre>

<p>… and the values for 'grid-auto-rows', 'grid-auto-columns', and
'grid-auto-flow' are set to their default values. (Omitted for
clarity.)

<p>Note the ''auto'' keyword that was implied in the shorthand,
but must be made explicit in the 'grid-template-rows' property.
Also note that the width of the third column is specified neither in
the shorthand nor in 'grid-template-columns', which means it is implicitly set
to '*'.
</div>

<div class=example>
<p>For example, the rule

<pre>grid: * 10em / 4em 5em</pre>

<p>is the same as

<pre>
grid-template-columns: * 10em;
grid-template-areas: "* *" "* *";
grid-template-rows: 4em 5em;
</pre>

<p>(And 'grid-auto-rows', 'grid-auto-columns', and 'grid-auto-flow'
are set to their default values.)
</div>

<!--=================================================================-->

<h3 id=default>Default slots</h3>

<p>Every <span>grid element</span> has a <dfn>default slot.</dfn> If
there is an asterisk (“*”) in the template, then that slot is the
default. If there is no asterisk, then the first name in the
template defines the default slot.

<p class=note>Note that a grid always has at least one slot, see
'grid-template-areas'.

<div class=example>
<p>For example, if the template is defined by 'grid-template-areas: "..."
"..c" "a b b" "a b b"', then “c” is the default slot.
</div>

<p class=note>If the grid has an <em>implicit template</em> (i.e.,
'grid-template-areas' is ''none''), then its single slot is the default
slot.

<p>All content of a grid element that is not inside another flow
(i.e., not inside a float, not absolutely positioned, etc.) is flowed
into the default slot. In particular, any text content of the grid
element itself is in that default flow.

<div class=example>
<p>For example, in this document fragment

<pre>
&lt;DIV STYLE="grid: 'a b *'">
 &lt;IMG STYLE="flow: a" SRC="image.png" ALT="Foo">
 This is an
 &lt;EM STYLE="flow: *">emphasized&lt;/EM>
 &lt;EM STYLE="flow: b">(note well!)&lt;/EM>
 sentence.
 &lt;
&lt;/DIV>
</pre>

<p>The three slots of the grid contain:

<dl>
<dt>Slot a <dd>The image

<dt>Slot b <dd>The text “(note well!)”

<dt>Default slot <dd>The text “This is an <em>emphasized</em>
sentence.”
</dl>

<p>(The 'flow' property is defined below.)
</div>

<!--=================================================================-->

<h3 id=columns>Interaction of 'grid' and 'columns'</h3>

<p>The 'columns' property of a <span>grid element</span> applies to
the default slot of the template.

<div class=example>
<p>For example, with this style:

<pre>BODY {grid: "a @ b" "c c c"; columns: 2}</pre>

<p>The @-slot will have two columns.

<p class=note>Note that this is the same as setting columns on the
default slot: 'BODY::slot(*) {columns: 2}' apart from differences in
the specificity of the selector.
</div>

<!--=================================================================-->

<h3 id=slot-sizes>Calculating the size of the grid</h3>

<p>For the purpose of the calculations below, each slot (identifier or
“*”) in a grid has four dimensions associated with it,
called <var>MINW</var> (“minimum width”), <var>PREFW</var> (“preferred
width”), <var>MINH</var> (“minimum height”) and <var>PREFH</var>
(“preferred height”). We can think of them as the minimum and
preferred dimensions of the slot in isolation, i.e., if it wasn't
constrained by other slots in the same row or column. They are defined
as follows:

<dl>
<dt><dfn><var>MINW</var></dfn>
<dd>
<ul>
<li>If the slot spans only columns whose width does not depend on the
contents of the column (i.e., the column widths are specified with
only <var>&lt;length&gt;</var> values, '*',
<var>&lt;fraction&gt;</var> values, or any combination of those), then
<var>MINW</var> is the sum of the slot's left and right margin,
border and padding (i.e., any 'margin-left', 'margin-right',
'padding-left' etc., that is set on it by means of the
<span>'::slot()' pseudo-element</span>). Any ''auto'' margins are
counted as 0 for this purpose. <span class=note>(Note that
<var>&lt;length&gt;</var> values can be specified with 'calc()' as
well, see [CSS3VALUES]].)</span>

<li>Otherwise, if the slot is <em>vertical,</em> then <var>MINW</var>
is the width that the slot would have if its height were set to its
<em>intrinsic preferred</em> height [[!CSS3BOX]], plus its left and
right padding, border and margin. Any ''auto'' margins are counted as
0 for this purpose.

<li>Otherwise, if the slot spans at least one column whose width is
specified as ''max-content'' (or 'minmax()' with a first argument of
''max-content''), then <var>MINW</var> is the <em>intrinsic
preferred</em> width of the slot plus its left and right margin,
border and padding. Any ''auto'' margins are counted as 0 for this
purpose.

<li>Otherwise (i.e., the slot spans at least one column whose width is
specified as ''min-content'' or ''minmax()'' with a first argument of
''min-content'', but no ''max-content'') <var>MINW</var> is the
<em>intrinsic minimum</em> width of the slot, plus its left and right
padding, border and margin. Any ''auto'' margins are counted as 0 for
this purpose.
</ul>

<dt><dfn><var>PREFW</var></dfn>
<dd>
<ul>
<li>If the slot spans only columns whose width does not depend on the
contents of the column (i.e., the column widths are specified with
only <var>&lt;length&gt;</var> values,
'*', <var>&lt;fraction&gt;</var> values, or any combination of those),
then <var>PREFW</var> is infinite.

<li>Otherwise, if the slot is <em>vertical,</em> then <var>PREFW</var>
is the width that the slot would have if its height were set to its
<em>intrinsic preferred</em> height, plus the plus its left and right
padding, border and margin. Any ''auto'' margins are counted as 0 for
this purpose.

<li>Otherwise, if the slot spans at least one column whose width is
specified as ''max-content'' (or 'minmax()' with a first argument of
''max-content''), then <var>PREFW</var> is the <em>intrinsic
preferred</em> width of the slot plus its left and right margin,
border and padding. Any ''auto'' margins are counted as 0 for this
purpose.

<li>Otherwise <var>PREFW</var> is the <em>intrinsic minimum</em> width
of the slot, plus its left and right padding, border and margin. Any
''auto'' margins are counted as 0 for this purpose.
</ul>

<dt><dfn><var>MINH</var></dfn>
<dd>
<ul>
<li>If the slot spans only rows whose height does not depend on the
contents of the column (i.e., the row heights are specified with only
<var>&lt;length&gt;</var> values, '*', <var>&lt;fraction&gt;</var>
values, or any combination of those), then <var>MINH</var> is the sum
of the slot's top and bottom margin, border and padding. Any ''auto''
margins are counted as 0 for this purpose.

<li>Otherwise, if the slot is <em>horizontal,</em> then
<var>MINH</var> is the height the slot would have if its width were
set to its <em>intrinsic preferred</em> width, plus its top and bottom
margin, border and padding. Any ''auto'' margins are counted as 0 for
this purpose.

<li>Otherwise, if the slot spans at least one row whose height is
specified as ''max-content'' (or 'minmax()' with a first argument of
''max-content''), then <var>MINH</var> is the <em>intrinsic
preferred</em> height of the slot plus its top and bottom margin,
border and padding. Any ''auto'' margins are counted as 0 for this
purpose.

<li>Otherwise <var>MINH</var> is the <em>intrinsic minimum</em> height
of the slot, plus its top and bottom padding, border and margin. Any
''auto'' margins are counted as 0 for this purpose.
</ul>

<dt><dfn><var>PREFH</var></dfn>
<dd>
<ul>
<li>If the slot spans only rows whose height does not depend on the
contents of the column (i.e., the row heights are specified with
only <var>&lt;length&gt;</var> values,
'*', <var>&lt;fraction&gt;</var> values, or any combination of those),
then <var>PREFH</var> is infinite.

<li>Otherwise, if the slot is <em>horizontal,</em> then
<var>PREFH</var> is the height the slot would have if its width were
set to its <em>preferred minimum</em> width, plus its top and bottom
padding, border and margin. Any ''auto'' margins are counted as 0 for
this purpose.

<li>Otherwise, if the slot spans at least one row whose height is
specified as ''max-content'' (or 'minmax()' with a first argument of
''max-content''), then <var>PREFH</var> is the <em>intrinsic
preferred</em> height of the slot plus its top and bottom margin,
border and padding. Any ''auto'' margins are counted as 0 for this
purpose.

<li>Otherwise <var>PREFH</var> is the <em>intrinsic preferred</em>
height of the slot, plus its top and bottom padding, border and
margin. Any ''auto'' margins are counted as 0 for this purpose.
</ul>
</dl>

<div class=example>
<p>For example, the <var>MINW</var> values of the slots in this grid

<pre>
grid:  auto * 10em
      "  a  a  .  "
      "  b  .  c  "
</pre>

<p>are as follows:

<dl>
<dt>a
<dd>
''min-content'' (because the slot spans at least one column with a
width specified as ''min-content'' or ''auto'').

<dt>b
<dd>
''min-content'' (ditto).

<dt>c
<dd>
0 (because the slot spans only columns with a width that is
independent of the content).
</dl>
</div>

<p>The UA must choose the widths and heights of all columns and rows
such that the following constraints are satisfied.

<ol>
<!-- Constraints relating to the element's own width and
   height. These constraints may be dropped if overconstrained -->

<li>
<p>If the element has an a-priori known content height, then the sum
of the heights of all rows must be equal to the element's height.

<div class=example>
<p>For example, the two rows in this grid must be 8em each so that the
total height matches the height of the element:

<pre>
div {
  height: 16em;
  grid: "a . b"  *
        "a c ."  *
</pre>
</div>

<li>
<p>If the grid element has an a-priori known content width, then the
sum of the widths of all columns must be equal to the element's width.

<div class=example>
<p>For example, the three columns in this grid must be 20em each:

<pre>div {width: 60em; grid: "a b c"}</pre>
</div>
<!-- Constraints relating to fixed-size rows and columns -->

<li>Each row with a height specified as a <var>&lt;length&gt;</var>
must have exactly that height.

<li>Each column with a width specified as a <var>&lt;length&gt;</var>
must have exactly that width.

<!-- Constraints on rows and column with fractional sizes. -->

<li>All rows with a height specified as '*' must have the same height.

<p class=issue>If we have both '*' and ''fr'', then '*' will be defined
as '1fr' and we can drop this rule and the next. Otherwise either
these two rules or the next two must be removed.

<li>All columns with a width specified as '*' must have the same
width.

<li>For any pair (<var>i</var>,<var>j</var>) of rows
whose <var>&lt;row-height&gt;</var> values h<sub>i</sub> and
h<sub>j</sub> are both specified in ''fr'', the computed heights
H<sub>i</sub> and H<sub>j</sub> must be such that H<sub>i</sub> *
h<sub>j</sub> = H<sub>j</sub> * h<sub>i</sub>. (I.e., their heights
are proportional to their number of ''fr'' units.)

<li>For any pair (<var>i</var>,<var>j</var>) of columns
whose <var>&lt;col-width&gt;</var> values w<sub>i</sub> and
w<sub>j</sub> are both specified in ''fr'', the computed width
W<sub>i</sub> and W<sub>j</sub> must be such that W<sub>i</sub> *
w<sub>j</sub> = W<sub>j</sub> * W<sub>i</sub>. (I.e., their widths are
proportional to their number of ''fr'' units.)

<!-- Constraints relating to rows and columns without slots that span
   into other rows or columns, i.e., cases where the size of a slot
   can put an upper limits on the size of a row or column -->

<li>
<p>Each row that contains slots that span only one row and no slots
that span more than one row, must not be higher than the
largest <var>PREFH</var> of all slots in the row plus the amount
needed to <span class=index title=vertical-align>vertically
align</span> the <span>horizontal</span> slots that have
a 'vertical-align' of ''baseline''.

<div class=example>
<p>For example, the second row in this grid

<pre>
grid: "a . c . ."  5em
      ". . . . b"  auto
</pre>

<p>must not be taller than the height (<span>block dimension</span>)
of slot b. The first row contains a slot that spans two rows (slot a),
so this rule does not apply to that row.
</div>

<li>
<p>Each column that contains slots that span only one column and no
slots that span more than one column, must not be wider than the
largest <var>PREFW</var> of all slots in the column plus the amount
needed to align the <span>vertical</span> slots that have a
'vertical-align' of ''baseline''.

<div class=example>
<p>For example, in this grid

<pre>
grid: "a c"
      "a b"
      auto *
</pre>

<p>the first column must not be wider than the <var>PREFW</var> of
slot a. Both slots in the second column have an
infinite <var>PREFW</var>, so this rule effectively puts no constraint
on that column.
</div>

<!-- Constraints on slots, only to set lower limits.  -->

<li>Each slot must be at least as wide as its <var>MINW</var>.

<li>Each slot must be at least as high as its <var>MINH</var>.
</ol>

<p>If it is impossible to choose such widths and heights, then try
without constraint 1. If it is still impossible, try without
constraint 2 instead. And, finally, try with both 1 and 2 dropped.

<div class=example>
<p>For example, the sum of the row heights in this example can never
be the same as the height of the element:

<pre>
div {
  height: 20em;
  grid: "a b c"  7em
        "a . c"  7em }
</pre>

<p>The first constraint is therefore ignored, the rows are 7em each
and 6em of space below the grid remains empty.
</div>

<p>If there are multiple solutions, and constraint 1 was dropped or
did not apply, then the sizes must additionally be chosen such that
the sum of the heights of the rows is minimized.

<p>If there are still multiple solutions, and constraint 2 was dropped
or did not apply, then the sizes must additionally be chosen such that
the sum of the widths of the columns is minimized.

<p class=note>The calculation is intended to be symmetric in width and
height (except for the case when both width and height are fixed and
the grid is over-constrained, when a solution that ignores the height
is tried before trying one that ignores the width).

<div class=example>
<p>For example, there would be multiple solutions for this grid:

<pre>
&lt;DIV STYLE="float: left; grid: 'a . b'">
 &lt;P STYLE="flow: a">Two words
 &lt;P STYLE="flow: b">Only three words
&lt;/DIV>
</pre>

<p>The columns must have equal width, but there is no other constraint
on the width. They could be narrow:

<blockquote>
<p><code class=visible style="display: inline-block">Two  <br>
words<br>
     </code><code class=visible style="display:
inline-block">     <br>
     <br>
     </code><code class=visible style="display:
inline-block">Only <br>
three<br>
words</code>
</blockquote>

<p>or wider:

<blockquote>
<p><code class=visible style="display:
inline-block">Two words       </code><code class=visible
style="display:
inline-block">                </code><code class=visible
style="display: inline-block">Only three words</code>
</blockquote>

<p>or even wider still, e.g.:

<blockquote>
<p><code class=visible style="display:
inline-block">Two words          </code><code class=visible
style="display:
inline-block">                   </code><code class=visible
style="display: inline-block">Only three words   </code>
</blockquote>

<p>The rule to minimize height excludes the first, narrow solution.
The rule to minimize width excludes the third and all wider solutions.
So the second layout, the narrowest that has all words on one line, is
the correct one.

<p>(This example assumes the width of the floating DIV's containing
block is large enough. The default width of a float is actually
''fit-content'', and thus if the containing block is too narrow, the
result will be narrower, too, because the calculation will have to be
redone using that width as the a-priori width for the DIV.)
</div>

<p class=note>The width isn't known a-priori, if, e.g., 'width' is
''auto'' and the element is floating, absolutely positioned,
inline-block or a child of a block with vertical writing mode.

<p>An extra step may be necessary in paged media if a page break
occurs inside a template (only in the case of an <em>element-based
template</em> see <a href="#page-break" >below</a>). If
the template, after computing the width and height, is too big to fit
on the current page, and if a suitable break point exists, the part of
the template after that break point is put on the next page. The width
of the <span class=index>containing block</span> on that page may be
different if that page has
different margins from the current page (see [[!CSS3PAGE]]) and thus
the width and height of that part of the template must be recalculated
in the new context.

<p class=note>Note that the widths of the columns can be completely
determined before laying out any of the contents as long as there are
no columns with a <var>&lt;col-width&gt;</var> of ''min-content'' or
''max-content''.

<p class=issue>Do we define restrictions or approximations for slots
that are part of a <em>chain</em> to avoid complicated optimization
algorithms?

<p class=note>Note: In a future update of CSS, rows might get a
property to specify how the height of that row is adjusted in case the
above calculation yields a template that is less tall than the element
itself.

<p>The height of a slot is measured as if the slot had
one <dfn title="anonymous block of a slot">anonymous block</dfn> as a
child that contains all the slot's contents and the anonymous block is
a <em>flow root</em> (see [[!CSS3BOX]]).

<div class=example>
<p>This example divides the window in three rows and three columns,
separated by 1em of white space. The middle row and the middle column
are flexible, the others are fixed at a specific size. The first
column is 5em wide, the last one 10em.

<pre>
&lt;style type="text/css"&gt;
  body {
    height: 100%;
    grid: 5em 1em  *  1em 10em
          "a   .   b   .   c"  2em
          ".   .   .   .   ."  1em
          "d   .   e   .   f"
          ".   .   .   .   ."  1em
          "g   .   h   .   i"  2em}
  #logo {flow: a}
  #motto {flow: b}
  #date {flow: c}
  #main {flow: e}
  #adv {flow: f}
  #copy {flow: g}
  #about {flow: h}
&lt;/style&gt;
&lt;p id=logo&gt;&lt;img src=...
&lt;p id=motto&gt;Making Web pages since 1862
&lt;p id=date&gt;August 2, 2004
...
</pre>
</div>

<p class=issue>[Add example with three columns, first two as narrow as
possible, third one taking up all remaining space.]

<!--=================================================================-->

<h2 id=flow>Flowing content into slots: 'flow'</h2>

<p>The 'flow' property adds an element to a slot.

<table class=propdef>
<tbody>
<tr><th>Name: <td><dfn>flow</dfn>
<tr><th><a href="#values" >Value</a>: <td>auto |
<var>&lt;identifier&gt;</var> | <var>&lt;string&gt;</var> | '*' | same
<tr><th>Initial: <td>auto
<tr><th>Applies to: <td>elements that have a <span>grid
ancestor</span> and whose 'position' is ''static'' or ''relative''
<tr><th>Inherited: <td>no
<tr><th>Animatable: <td>no
<tr><th>Percentages: <td>N/A
<tr><th>Computed&nbsp;value: <td>specified value
<tr><th>Canonical order: <td><abbr title="follows order of property
value definition">per grammar</abbr>
</table>

<p>If the value is not ''auto'', the element is added to the flow of
the given slot, instead of to the flow of its parent.

<p class=note>Note that the content of a slot depends on its 'content'
property. Content flowed into the slot is thus not necessarily
rendered. See <a href="#content" >“Slots and the 'content'
property.”</a>

<p>The name of the slot may be quoted (<var>&lt;string&gt;</var>) or
unquoted (<var>&lt;identifier&gt;</var>), but if the name is equal to
one of the following, it <em>must</em> be quoted: ''initial'',
''inherit'', ''default'' or ''same''. This is to avoid
ambiguity with the keywords of the same name.

<div class=example>
<p>For example, the following two style sheets are the same:
<pre>
div {grid: "p1 p2"}
h2 {flow: p1}
</pre>
<p>and
<pre>
div {grid: "p1 p2"}
h2 {flow: "p1"}
</pre>
<p>But the following two are not:
<pre>
div {grid: "initial final"}
h2 {flow: "initial"}
</pre>
<p>and
<pre>
div {grid: "initial final"}
h2 {flow: initial}
</pre>
<p>The last ''initial'' is interpreted as a reserved keyword and not
as the name of the first slot in the grid.
</div>

<p>If the element has no <span>grid ancestor</span>, or that grid
ancestor has no slot of the given name, the property is treated as if
it were ''auto''.

<p>A value of ''same'' means the element is put into the same slot as
the nearest preceding element in document order that (1) has the
same <span>grid ancestor</span>, (2) to which the 'flow' property
applies and (3) whose 'flow' property is not ''auto''.

<div class=issue id=non-existent-slot>
<p>If the name refers to a slot that doesn't exist in the
element's <em>grid ancestor</em> (or there is no grid ancestor) there
are several possibilities:

<ol>
<li>The element is not positioned (i.e., it is positioned in the
current flow).

<li>The letter is looked for in the grid ancestor's own grid ancestor,
etc., recursively. If no slot of that name is found in any of them,
then the element is not positioned.

<li>The element is positioned in the default slot (i.e., as if 'flow:
*' had been specified); or not positioned at all, in case there is no
grid ancestor.

<li>The name is looked for in the grid ancestor's own grid ancestor,
etc., recursively. If no slot of that name is found in any of them,
then the element is positioned in the default slot.
</ol>
</div>

<p>All content flowed into the same slot, whether explicitly with
'flow' or implicitly by flowing into the default slot, forms a single
flow, with content in document order. The slot establishes a block
formatting context and becomes the <em class=index>containing
block</em> of the
resulting content flow. The boxes of elements flowed into the same
slot explicitly (by means of 'flow') are each other's siblings in the
slot.

<div class=example>
<p>For example, the style sheet

<pre>
BODY {grid: "a ." ". b"}
.paris {flow: a}
.london {flow: b}
</pre>

<p>with this document

<pre>
&lt;DIV CLASS=london>
 &lt;P>The...
 &lt;DIV CLASS=paris>
  &lt;P>The...
  &lt;DIV CLASS=london>
   &lt;P>The...
  &lt;/DIV>
 &lt;/DIV>
&lt;/DIV>
</pre>

<p>causes the second and third DIVs to be taken out of their parents.
The second DIV becomes the first child of slot a (i.e., of the
pseudo-element called '::slot(a)'). The third DIV becomes the sibling
of the first DIV, because both are added to slot b independently.
</div>

<div class=example>
<p>Here is another example. In this document
<pre>
&lt;P STYLE="grid: 'a b'">
 &lt;SPAN STYLE="flow: a">First text &lt;SPAN
  STYLE="flow: a">Second text&lt;/SPAN> Third
  text&lt;/SPAN>
 &lt;SPAN STYLE="flow: b">Fourth text &lt;SPAN
  STYLE="flow: auto">Fifth text&lt;/SPAN> Sixth
  text&lt;/SPAN>
&lt;/P>
</pre>
<p>the second SPAN has a non-auto 'flow' and is thus taken out of its
parent's flow and added at the end of slot ''a''. As a result, slot
''a'' contains text in this order: “First text Third Text Second
text.” This is in contrast to the fourth SPAN, which has 'flow: auto'
and thus remains inside its parent's flow. Slot ''b'' has this text:
“Fourth text Fifth text Sixth text.”
</div>

<p>The content flowed into a slot does not inherit properties from the
slot.

<p class=note>Note that 'flow' applies to floating elements: they are
floated relative to their <span class=index>containing block,</span>
and if their 'flow'
property indicates a slot in a grid, that slot is their containing
block. See also <a href="#float" >“Floating elements inside
templates”</a> below.

<div class=example>
<p>A common markup in HTML for illustrations with captions is as
follows:

<pre>
&lt;div class=figure>
 &lt;p>&lt;img src="paul.jpg" alt="...">
 &lt;p class=caption>A pond in a playground in Amsterdam
&lt;/div>
</pre>

<p>The caption can be put above the image by using a template as
follows:

<pre>
div.figure {grid: * min-content *
                  "a a a"
                  ". b ."}

div.figure p {flow: b}
div.figure p.caption {flow: a; text-align: center}
</pre>

<p>The caption can be wider than the image and the image will be
centered.

<p>When the figure is floating, it is probably better to not let the
caption become wider than the image (unless the caption cannot be made
narrow enough):

<pre>
div.figure {float: right; grid: "a" "b" min-content}
div.figure p {flow: b}
div.figure p.caption {flow: a; text-align: center}
</pre>
</div>

<div class=example>
<p>In this example, a form is laid out on a grid, with two labels and
two input boxes and a submit and a reset button:

<pre>
form {
  border: thin solid;
  grid: "a a a a . b b b b"
        ". . . . . . . . ." 1em
        "c c c c . d d d d"
        ". . . . . . . . ." 1em
        ". . . e e . . f f" }
label[for=minv] { flow: a }
input#minv { flow: b; display: block }
label[for=maxv] { flow: c }
input#maxv { flow: d; display: block }
input[type=submit] { flow: e; display: block }
input[type=reset] { flow: f; display: block }
</pre>

<p>Here is the fragment of HTML that the style is applied to:

<pre>
&lt;form action="./"&gt;
  &lt;label for=minv&gt;Enter minimum value:&lt;/label&gt;
  &lt;input id=minv name=minv&gt;
  &lt;label for=maxv&gt;Enter maximum value:&lt;/label&gt;
  &lt;input id=maxv name=maxv&gt;
  &lt;input type=submit value="OK"&gt;
  &lt;input type=reset value="Reset"&gt;
&lt;/form&gt;
</pre>

<p>The addition of 'display: block' causes the form controls to use
the width computation of blocks, in other words: they will be as wide
as their containing block, which in this case means that they will be
as wide as the slot they are assigned to. Without it, they would be
inline elements and just be left-aligned in their slots.

<div class=figure>
<p><img alt="Image simulating the layout of the example"
longdesc=form.desc src=form.png>

<p class=caption>Possible rendering of the example.
</div>
</div>

<div class=example>
<p>This example shows that templates can be nested. The body has two
columns. The #content element that goes into the second column has
itself another template, into which the various “modules” are placed.

<div class=figure>
<p><img alt="[Screendump with nested templates]" longdesc=table5.desc
src=table5.png>

<p class=caption>Possible rendering of the nested templates. (The
borders are added for clarity, they don't occur in the style rules
below. The red border is the inner template.)
</div>

<p>For clarity, the inner template uses different letters for the
slots than the outer template. This is not required.

<pre>
&lt;style type="text/css">
body {
     grid: 10em *
           "a   b";
}
#nav {
     flow: a;
}
#content {
     flow: b;
     grid:  *  1em  *  1em  *
           "c   .   d   .   e"
           ".   .   .   .   ." 1em
           ".   .   f   .   .";
}
.module.news {
     flow: c;
}
.module.sports {
     flow: d;
}
.module.personal {
     flow: e;
}
#foot {
     flow: f;
}
&lt;/style>
&lt;body>
&lt;ul id="nav">
     &lt;li>navigation&lt;/li>
&lt;/ul>
&lt;div id="content">
    &lt;div class="module news">
         &lt;h3>Weather&lt;/h3>
         &lt;p>There will be weather&lt;/p>
    &lt;/div>
    &lt;div class="module sports">
         &lt;h3>Football&lt;/h3>
         &lt;p>People like football.&lt;/p>
    &lt;/div>
    &lt;div class="module sports">
         &lt;h3>Chess&lt;/h3>
         &lt;p>There was a brawl at the chess tournament&lt;/p>
    &lt;/div>
    &lt;div class="module personal">
         &lt;h3>Your Horoscope&lt;/h3>
         &lt;p>You're going to die (eventually).&lt;/p>
    &lt;/div>
    &lt;p id="foot">Copyright some folks&lt;/p>
&lt;/div>

&lt;/body>
</pre>
</div>

<div class=example>
<p>This example shows the use of ''same'' to put <code>DD</code>
elements in the same slot as the preceding <code>DT</code>.

<pre>
...
DL {grid: * 2em * 2em * "a . b . c"}
DT.mineral {flow: a}
DT.animal {flow: b}
DT.plant {flow: c}
DD {flow: same; margin-left: 1em}
...
<b>&lt;DL></b>
 <b>&lt;DT class=animal></b>falcon
 <b>&lt;DD></b>This bird of prey...
 <b>&lt;DT class=animal></b>rabbit
 <b>&lt;DD></b>Local restaurants...
 <b>&lt;DT class=mineral></b>granite
 <b>&lt;DD></b>This rock occurs...
 <b>&lt;DT class=plant></b>olive
 <b>&lt;DD></b>The fruit of...
 <b>&lt;DT class=mineral></b>limestone
 <b>&lt;DD></b>A rock composed of...
 <b>&lt;DT class=plant></b>pine
 <b>&lt;DD></b>The western half...
<b>&lt;/DL></b>
</pre>

<div class=figure>
<p><img alt=screendump longdesc=granite.desc src=granite.png>

<p class=caption>Possible rendering of the <code>DL</code> list, with
items sorted into three columns.
</div>
</div>

<p class=issue>An alternative to ''same'' may be to create selectors
with regular-expression-like capabilities: 'DT.plant + DD* + DD {flow:
c}' selects a DD that follows zero or more DDs that follow DT.plant.

<p class=issue>Does a percentage 'height' work on an element that is
flowed into a slot? If the grid template assigns a fixed height to the
slot, it is obvious what a percentage means, but if the slot's height
is ''max-content'' and an element in the slot has 'height: 110%', there
is a conflict&hellip;

<div class=issue>
<p>Allowing multiple values on 'flow' could be an easy way to
duplicate elements. E.g., this style

<pre>
BODY {grid: "a . b . c ."}
H1 {flow: a, b, c}
#art1 {flow: a}
#art2 {flow: b}
#art3 {flow: c}
</pre>

<p>with a document like

<pre>
...
&lt;H1>Local news&lt;/H1>
&lt;DIV ID=art1>...&lt;/DIV>
&lt;DIV ID=art2>...&lt;/DIV>
&lt;DIV ID=art3>...&lt;/DIV>
</pre>

<p>would repeat the H1 at the top of all three
columns. With <em>region-based styling,</em> the
three instances could even be styled differently, e.g., with generated
content: ''@region ::slot(b) { H1::before {content: "cont'd "} }''
</div>

<p
class=issue><a href="http://www.w3.org/Style/CSS/Tracker/issues/201"
>ISSUE-201:</a> Terra
Informatica's <a href="http://www.terrainformatica.com/htmlayout/"
>HTMLayout</a> program proposes an interesting shortcut: if a slot's
name is a number (instead of an identifier), it refers directly to the
child with that number. That child is positioned in
that slot and doesn't need 'flow' to be set.
See <a
href="http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm"
>the documentation by Andrew Fedoniouk and Ivan Goroun.</a>
E.g., <code>&lt;ul style="grid: '2 1'">&lt;li>one &lt;li>two
&lt;/ul></code> puts “two” on the left and “one” on the right.
It is thus also a shortcut for some applications Flexbox's
of <a href="https://www.w3.org/TR/css3-flexbox/#order-property"
>'order' property.</a>

<!--=================================================================-->

<h2 id=absolute>Comparison with 'display: grid' and 'display:
inline-grid'</h2>

<p><em>This section is not normative</em>

<p>The ''grid'' and ''inline-grid'' values of the 'display' property
make an element into a <em>grid container,</em> (see
[[!CSS3-GRID-LAYOUT]]), which is an element that uses the 'grid'
properties to define a grid, just like a <em>grid element,</em> but
its children ignore the 'flow' property and are instead automatically
made into separate flows and positioned in subsequent slots of the
grid. (Although there are also properties to set their positions
explicitly.)

<p>''Grid'' and ''inline-grid'' also cause the template to grow
automatically with either extra rows or extra columns, if there are
more children than predefined slots.

<p>Note that the template of a grid container is also mirrored and/or
rotated depending on the 'writing-mode' and 'direction' of the grid
container, unlike the template of a grid element.

<!--=================================================================-->

<h2>Styling slots</h2>

<p>Slots have certain properties of their own, as defined below. If
those properties are inherited, they inherit from the <span>grid
element.</span> To set properties on the slots, two kinds of selectors
are available: ''::slot()'' and ''::blank()''.

<h3 id=slot-pseudo>The ''::slot()'' pseudo-element</h3>

<p>The slots of a <em>grid element</em> can be individually addressed
with the <dfn title="slot!!pseudo-element" >''slot()''
pseudo-element.</dfn>

<div class=example>
<p>For example, the following sets the background and vertical
alignment of some of the slots in a template:

<pre>
body { grid: "a a a"
             "b c d" }
body::slot(b) { background: #FF0 }
body::slot(c), body::slot(d) { vertical-align: bottom }
</pre>
</div>

<p>Only the following properties apply to the ''slot()''
pseudo-element.

<ul>
<li>background properties

<li>'box-shadow'

<li>'vertical-align' (see <a href="#vertical-alignment" >“vertical
alignment”</a> below)

<li>'overflow' (see the sections on <a href="#vertical-alignment"
>vertical alignment</a> and <a href="#paged" >paged media</a> below)

<li>'writing-mode'

<li>'direction'

<li>'box-shadow'

<li>border properties

<li>padding properties

<li>margin properties

<li>outline properties

<li>'box-decoration-break'

<li>column properties

<li>'z-index' (see <a href="#stacking-order" >“Stacking order”</a>
below)

<li>'opacity'

<li>transform properties

<li>mask properties

<li>'filter'

<li>'content' (see <a href="#content" >“Slots and the 'content'
property”</a> below)
</ul>

<p>The following properties also apply to '::slot()' pseudo elements,
but only affect content inserted with the 'content' property other
than what corresponds to the ''contents'' keyword. (I.e., not to the
content that is flowed into the slot via the 'flow' property or
because the slot is the <span>default slot.</span> See <a
href="#region-based" >“Styling the contents of slots”</a> for how to
style that part of the content.)

<ul>
<li>'color'
<li>font properties
<li>'text-decoration'
<li>'text-transform'
<li>counter properties <span class=issue>not needed?</span>
<li>'image-orientation'
<li>'image-resolution'
<li>'letter-spacing'
<li>'object-fit'
<li>'object-position'
<li>'text-align'
<li>'text-align-last'
<li>'text-indent'
<li>'visibility'
<li>'white-space'
<li>'word-spacing'
</ul>

<p class=issue><a href="http://www.w3.org/Style/CSS/Tracker/issues/37"
>ISSUE-37:</a> Can a slot have a border and if so, where is it drawn?

<p>The background of a slot is drawn immediately on top of the
background of the element itself. E.g., the background set on
''P::slot(a)'' is immediately in front of the background set on ''P''.

<p>Margins on slots do not collapse, neither with other slots, nor
with elements inside the slot.

<!--=================================================================-->

<h3>The ''::blank()'' pseudo-element</h3>

<p class=issue>The naming/syntax is an issue, because there is a
'':blank'' pseudo-<strong>class</strong> in [[CSS3PAGE]] and a
'':empty'' pseudo-class in [[SELECT]]. But ''::slot(a):empty'' and
'':slot(a):blank' are invalid syntax…

<p>The <dfn title="blank!!pseudo-element" >'blank()'
pseudo-element</dfn> selects named slots that
have no
content flowed into them. ''::slot(a)'' and ''::blank(a)'' select the
same slot, but the latter matches only if the slot has no content
flowed into it. Whether ''::blank()'' matches is independent of the
slot's 'content' property. (In other words: a “blank” slot is not
necessarily empty and a slot that looks empty is not necessarily
“blank,” although that is usually the case, given the initial value of
'content'.)

<div class=example>
<p>For example, slots a, b and c in the following document are blank,
but slot * is not, even though slots b and c do not look empty,
(because they have generated content) and slot d does look empty
(because its 'content' property doesn't include the keyword
''contents''):

<pre>
&lt;style>
body { grid: "a b"
             "c *" }
body::slot(b) { content: "This is slot b" }
body::slot(c) { content: "Page " counter(page) }
body::slot(*) { content: "No content" }
&lt;/style>
&lt;h1>The heading&lt;/h1>
&lt;p>The first paragraph.
</pre>

<p>All content in this document is flowed into the default slot (*),
so all other slots are blank.
</div>

<div class=example>
<p>This example shows how to put a border only on slots that have
content:

<pre>
div {grid: "a ."
           ". d"}
div::slot(a), div::slot(d) {border: solid}
div::blank(a), div::blank(d) {border: none}
</pre>
</div>

<p>An element that has no content, no background, no border, no
padding, no margin and no fixed positive width or height has no
influence on whether the slot it flows into is blank or not. In this
case, the content of the element is the content that results from
applying the 'content' property and also includes generated content of
its ''::before'' and '':after'' pseudo-elements.

<div class=example>
<p>For example, even though there is an address element flowed into
slot a, slot a is still blank, because the address element happens to
have no printable content:
<pre>
&lt;style>
body { grid: "a ."
             ". *" }
body::blank(a) { content: "No address defined" }
address { flow: a }
&lt;/style>
&lt;h1>The heading&lt;/h1>
&lt;p>The first paragraph.
&lt;address>&lt;/address>
</pre>
</div>

<p>A slot that is part of a chain (see 'chains') is blank if all
content flowed into that chain fits into slots earlier in the chain.

<div class=example>
<p>For example, this document has very little content that easily fits
into the first slot. Slot b, which is part of the same chain, thus
remains blank.

<pre>
&lt;style>
body { grid: "a . b"; chains: a b; width: 60em }
body::blank(b) { background: silver }
&lt;/style>
&lt;p>Very little content.
</pre>
</div>

<!--=================================================================-->

<h3 id=content>Slots and the 'content' property</h3>

<p>The 'content' property applies to slot pseudo elements in a similar
way as it applies to normal elements and other pseudo-elements. When
applied to slots, values have the following meaning:

<dl>
<dt><dfn>''normal''</dfn> <dd>Same as ''contents'' <span
class=note>(Note that ''contents'' is also the computed value in this
case.)</span>

<dt><dfn>''none''</dfn> <dd>The content that is flowed into the slot
(with the 'flow' property, or because the slot is the <span>default
slot</span>) is not rendered.

<dt><dfn>''inhibit''</dfn> <dd>Same as ''none''.

<dt><dfn>''contents''</dfn> <dd>Renders as the content that is flowed
into the slot (with the 'flow' property, or because the slot is the
<span>default slot</span>).
</dl>

<p>Other values are as defined in [[!CSS3GENCON]] and in
[[!CSS3PAGE]]. See <a href="#page-templates" >“Page-based grid
templates”</a> for an example of the use of ''string()'' in the value
of 'content'.

<p class=issue>[This should be moved to [[!CSS3GENCON]].] Even if the
value of 'content' does not include ''contents'' and the content that
is flowed into a slot is thus not rendered, any counters associated
with that content are incremented normally.

<p class=note>Note: as defined in [[CSS3GENCON]], the keyword
''contents'' may appear multiple times in the value of 'content', but
the second and subsequent occurrences are ignored. (Those occurrences
are still part of the computed value.)

<!--=================================================================-->

<h2 id=region-based>Styling the contents of slots</h2>

<p><dfn>Region-based styling</dfn> refers to style rules that are
attached to parts of a document that do not correspond to an element,
but to an area of the canvas. In level 2, there were only two such
regions, the pseudo-elements ''first-line'' and ''first-letter.'' This
module adds <span class=index>slots.</span>

<p>A slot may contain parts of multiple elements and the style rules
for those elements and for the slot are cascaded together in a
specific way, defined below.

<div class=example>
<p>For example, with a style sheet like this

<pre>
BODY { grid: "a ." 10em ". b"; chains: a b }
P { flow: a; color: blue }
BODY::slot(b) P { color: orange }
</pre>

<p>and a document fragment like this:

<pre>
&lt;BODY>
 &lt;P>The text of the first paragraph...
 &lt;P>The text of the second paragraph...
 &lt;P>The text of the third paragraph...
&lt;/BODY>
</pre>

<p>The three paragraphs will be rendered inside slot a and, if there
is more content than fits in that slot, the rest will be rendered in
slot b. Ps are blue by the second line in the style sheet, but the
third line says that any part of a P that is inside slot b will
be orange.
</div>

<p>In CSS level 2, pseudo-elements could only occur at the end of a
selector. Thus an attempt to select 'P::first-line EM' fails. That
restriction does not apply to the <span class=index id=s1
title="slot!!pseudo-element" >'::slot()'
pseudo-element,</span> as shown in the example above.

<p>To resolve which style rules apply to an element or part of an
element that is inside a slot…

<p class=issue>Fix. Can we use a fictional tag sequence as in level 2?
Only for inherited properties, maybe. Or only for a restricted set of
properties, e.g., only those that apply to first-letter.

<p class=issue>See <a href="#select-after-pseudo">“Style the contents
of slots (region-based styling)”</a> below for a discussion of
alternatives to '@region'.

<!--=================================================================-->

<h2>Rendering of grid elements</h2>

<p>Grid elements influence the stacking order, page breaks, the
position of floats, etc. of the content inside them.

<!--=================================================================-->

<h3 id=vertical-alignment>Vertical alignment of the contents of
slots</h3>

<p>'<span class=index>Vertical-align</span>' applies to slots in a
similar way as it applies to
 table cells [[CSS3TBL]] and margin boxes [[CSS3PAGE]].

<p class=issue>'Align-content' in [[CSS3-FLEXBOX]] has ''flex-start'',
''flex-end'' and ''center'', which are a bit similar to ''top'',
''bottom'' and ''middle''. But it also has ''space-between'' and
''stretch'', which make little sense in a flow, and it lacks
''baseline''. The similarity of slots to table cells and margin boxes
argues for sticking with 'vertical-align'.

<p>For the purpose of this section we define the <dfn>A edge</dfn>
and <dfn>C edge</dfn> of a box as a writing-mode-dependent edge as
follows:

<table class=data>
<thead>
<tr><th>Value of 'writing-mode' <th>Meaning of “A” <th>Meaning of “C”
<tbody>
<tr><th>''horizontal-tb'' <td>top <td>bottom
<tr><th>''vertical-rl'' <td>right <td>left
<tr><th>''vertical-lr'' <td>left <td>right
</table>

<p>E.g., if a box is <span>horizontal,</span> the “A edge” is the top
edge.

<p>The 'vertical-align' property of a '::slot()' pseudo-element can be
used to align elements vertically in a slot (or horizontally, if the
slot is <span>vertical</span>). The effect is as if the
<em title="anonymous block of a slot">hypothetical anonymous block</em>
that contains the slot's contents is positioned as defined below.

<dl>
<dt>bottom
<dd>
The content of the slot is aligned to the <span>C edge</span> of the
slot: the C margin edge of the anonymous block coincides with the C
margin edge of the slot.

<dt>middle
<dd>
The content of the slot is centered in the slot: the distance between
the <span title="A edge">A</span> margin edge of the anonymous block
and the <span title="A edge">A</span> margin edge of the slot is equal
to the distance between the <span title="C edge">C</span> margin edge
of the anonymous block and the <span title="C edge">C</span> margin
edge of the slot.

<p class=note>(Note that if the content overflows the slot, it will
overflow at both edges.)

<dt>baseline
<dd>
The anonymous block that encloses the content is placed as far as
possible in the direction against the <em>block flow direction</em>
under two constraints:

<ol>
<li>The <span title="A edge">A</span> margin edge of the anonymous
block may not be beyond the <span title="A edge">A</span> margin edge
of the slot.

<li>If the content has a relevant first line (see below), then the
baseline of that line must align with the baselines of the relevant
first lines in all other slots with the same 'writing-mode' and the
same 'vertical-align' in the same row (if the slot
is <span>horizontal</span>) or the same column (if the slot
is <span>vertical</span>). A slot has a relevant first line, if the
content has a first line (ignoring any lines inside floats) and that
first line has the same 'writing-mode' as the slot itself.
</ol>

<p class=note>For example, for a <span>horizontal</span> slot, this
means that the first baseline must be aligned with the first baselines
of all other horizontal slots in the row that also have
'vertical-align: baseline'.

<dt><var>&lt;percentage&gt;</var>
<dd>
''0%'' means the same as ''bottom'', ''100%'' means the same as
''top'', other values are linear interpolations of these. Negative
values and values over 100% are interpreted as 0% and 100%
respectively.

<p class=note>Note that 100% minus the percentage corresponds to the
initial position of the scrolling mechanism (if any) in case the
content overflows.
</dl>

<p>For all other values, the content is aligned as for ''baseline''.

<p class=note>Note that baseline alignment may cause a slot to
overflow (if the slot is the last in a 'chain') or to remain empty
(because the first line box is put in the next chained slot instead).

<div class=example>
<p>Example: Given a document like this

<pre>
&lt;BODY>
&lt;P>...&lt;/P>
&lt;FIGURE>...&lt;/FIGURE>
&lt;P>...&lt;/P>
&lt;FIGURE>...&lt;/FIGURE>
&lt;P>...&lt;/P>
&lt;FIGURE>...&lt;/FIGURE>
&lt;P>...&lt;/P>
&lt;FIGURE>...&lt;/FIGURE>
&lt;/BODY>
</pre>

<p>and a style like this:

<pre>
BODY { grid: "a b" }
P { flow: a }
FIGURE { flow: b }
</pre>

<p>the paragraphs will be in the first slot (a) and the figures in the
second (b). There are two ways to align the contents of the two slots
to the bottom. One is with 'vertical-align':

<pre>BODY::slot(a), BODY::slot(b) { vertical-align: bottom }</pre>

<p>The other is with flexible margins:

<pre>P:first-of-type, FIGURE:first-of-type { margin-top: fill }</pre>
</div>

<div class=example>
<p>Example: There is no value for 'vertical-align' to distribute
elements vertically over the available space (similar to how
'text-align: justify' distributes words over the available space). But
the effect can be achieved with stretchable margins. Assume the same
document as in the previous example and this style sheet:

<pre>
BODY { grid: "a b" }
P { flow: a; margin-top: fill; margin-bottom: fill }
FIGURE { flow: b }
</pre>

<p>Because there are stretchable margins between the Ps, the Ps will
be equally distributed over the height of the slot (assuming the slot
is taller than its contents, i.e., assuming the contents of slot b is
taller than the contents of slot a).
</div>

<p class=note>Note that, if there are one or more margins in the
contents of the slot with a ''fill'' value (see [[CSS3BOX]]), the
height of the content fits the
height of the slot and thus the ''top'', ''middle'' and ''bottom''
values are indistinguishable.

<!--=================================================================-->

<h3 id=paged>Breaking grid elements across pages or columns</h3>

<p><span>Grid elements</span> may be broken across pages, columns or
similar regions (including chained slots of another grid element),
subject to the 'break-before', 'break-after' and 'break-inside'
properties. In addition to the break points listed in the Fragmentation
module [[!CSS3-BREAK]], a page break may occur between two rows in a
template, if there is a possible break point at the same height or
higher in all slots that span those two rows; and a page break may
occur inside a row if there is a possible break point in all slots in
that row.

<p class=issue>Try to be more precise?

<p>In the terminology of [[CSS3-BREAK]], a <em>slot</em> is a
<em class=index>fragmenter</em> of type ''region''.

<p>A forced break on an element in a slot causes the rest of the flow
of that slot to continue in another page, column or slot (depending on
the type of break). The following cases are special:

<ul>
<li>
<p>A forced page break causes all elements after the break (in document
order) to be on a new page. On which subsequent page they fall depends
on any page templates: there may not be a slot with the right name on
the next page.

<li>
<p>A forced column break only has effect if the element's multicol
ancestor is a descendant (is “inside”) the element's grid ancestor.
</ul>

<div class=example>
<p>For example, this document fragment has a column element inside a
grid element. Column breaks affect the content of a single slot, but do
not affect the other slots of the grid element:

<pre>
&lt;DIV STYLE="grid: 'a b' 'c d'">
 &lt;DIV STYLE="flow: a">
  I'm in slot a.
 &lt;/DIV>
 &lt;DIV STYLE="flow: b; columns: 20em">
  &lt;P>This text is in columns.
  &lt;H2 STYLE="break-before: column">Heading at top of column&lt;/H2>
  &lt;P>...
 &lt;/DIV
&lt;/DIV></pre>
</div>

<div class=example>
<p>For example, this document fragment has a grid element inside a
column element and thus the column break on the H2 is ignored:

<pre>
&lt;DIV STYLE="columns: 20em">
 &lt;DIV STYLE="grid: 'a b' 'c d'">
  &lt;P>I'm inside slot a inside some columns.
  &lt;H2 STYLE="break-before: column">No break&lt;/H2>
  &lt;P>...
 &lt;/DIV>
&lt;/DIV></pre>
</div>

<div class=example>
<p>A slide presentation can be made with a template for each page
(i.e., slide) and forced page break between the slides:

<pre>
@page	{ grid: "a"  5em
	        "@"  *
	        "b"  auto }
h1	{ page-break-before: always;
	  flow: a }
p.note	{ flow: b }
</pre>

<p>With a document similar to this: (fragment)

<pre>
<b>&lt;h1></b>Slide 1 title<b>&lt;/h1></b>
<b>&lt;ul></b>
 <b>&lt;li></b>Topic one
<b>&lt;/ul></b>
<b>&lt;h1></b>Slide 2 title<b>&lt;/h1></b>
<b>&lt;ul></b>
 <b>&lt;li></b>More topics
<b>&lt;/ul></b>
<b>&lt;p class=note></b>Note the note
</pre>
</div>

<div class=example>
<p>The document in the example above doesn't have an element that
corresponds to a slide; a slide simply starts at an H1 and ends before
the next H1. But if there is a DIV around each slide (as is the case in
many slide formats in practice), the same effect can also be achieved
without page-based templates, by using the ''vh'' unit [[!CSS3VAL]]:

<pre>
div.slide {height: 100vh; grid: "a" 5em "*" "b" intrinsic;
    page-break-before: always}
h1 {flow: a}
p.note {flow: b}
</pre>

<p>With a document similar to this: (fragment)

<pre>
<b>&lt;div class=slide></b>
 <b>&lt;h1></b>Slide 1 title<b>&lt;/h1></b>
 <b>&lt;ul></b>
  <b>&lt;li></b>Topic one
 <b>&lt;/ul></b>
<b>&lt;/div></b>
<b>&lt;div class=slide></b>
 <b>&lt;h1></b>Slide 2 title<b>&lt;/h1></b>
 <b>&lt;ul></b>
  <b>&lt;li></b>More topics
 <b>&lt;/ul></b>
 <b>&lt;p class=note></b>Note the note
<b>&lt;/div></b>
</pre>
</div>

<!--=================================================================-->

<h3 id=stacking-order>Stacking order</h3>

<p>Each slot generates a separate <em>stacking context.</em> The
stacking order of these stacking contexts is given by their 'z-index'
property, with ''auto'' treated as '0'. Slots with the same 'z-index'
are stacked in the order in which they are defined in the
'grid-template-areas' property, looking only at the first occurrence of the
slot's name (i.e., the top left corner if the slot spans several rows
or columns).

<p class=note>A slot thus has a very similar behavior in the stacking
order as an element with 'position: relative' and 'z-index: 0' (or
another value of 'z-index' other than ''auto'').

<div class=example>
<p>For example, the stacking order of the slots in the following
template is, from back to front, a, x, c, d, e, p, g.

<pre>
grid: "a x x c"
      "d x x e"
      "p p g g"
</pre>

<p>The stacking order can be made visible, e.g., by giving slots
opaque backgrounds and negative margins, so that they overlap. See the
next example.
</div>

<div class=example>
<p>This example uses 'z-index' and negative margins to make the middle
slot partly overlap the other slots:

<pre>
body { grid: "a . b"
             ". c ."
             "d . e";
       height: 240px;
       width: 240px }
::slot(a) { background: #0C0 }
::slot(b) { background: #C00 }
::slot(c) { background: #FD0; margin: -20px; z-index: 1 }
::slot(d) { background: #00C }
::slot(e) { background: #A0A }
</pre>

<div class=figure>
<p><img alt="Five colored rectangles" longdesc=overlap.desc
src=overlap.png>

<p class=caption>Rendering of the above example.
</div>
</div>

<div class=example>
<p>This example has a heading (H1) that is wider than its slot and
overlaps the image in the slot next to it:

<pre>
body {grid: "a b"}
::slot(a) {z-index: 1}
h1 {flow: a; width: 200%}
p {flow: a}
img {flow: b}
</pre>

<div class=figure>
<p><img alt="The title overlaps the image" src=z-index.png>
<p class=caption>Rendering of the above example.
</div>

<p>The 'z-index' is necessary, because the ''a'' slot comes before the
''b'' slot in the template and all its content would thus be rendered
behind the ''b'' slot with default 'z-index' values.
</div>

<!--=================================================================-->

<h3>Floating elements inside templates</h3>

<p>An element may be flowed into a slot and be a floating element at
the same time. The following cases must be distinguished:

<ul>
<li>Page-based floats &ndash; In paged media (see [[!CSS3PAGE]]), if
the value of 'float' specifies that the element floats to the top or
bottom of the page (in a horizontal writing mode) or the left or right
of the page (in a vertical writing mode), the slot act as the page.
(I.e., the element floats to the top, bottom, etc. of the slot, not of
the page.

<li>Footnotes &ndash; Likewise, the footnote area for elements with
'float: footnote' is at the bottom of the slot, not of the page. The
@footnote at-rule can position the footnote area at other places, such
as the top, but always inside the slot.

<li>Normal floats &ndash; In other cases, the element floats normally
within its <span class=index>containing block,</span> which in this
case is its
slot in the template.
</ul>

<p class=issue>The '@footnote' at-rule from [[CSS3GCPM]] needs to be
extended to apply to slots: '@footnote :first::slot(a)' is the footnote
area of slot a on the first page.

<!--=================================================================-->

<h2 id=page-templates>Page-based grid templates</h2>

<p>A template can also be attached to a page, rather than an element.
Such a template is called a <dfn>page-based template</dfn> as opposed
to an <dfn>element-based template.</dfn>

<div class=example>
<p>Here is an example of a template used to position two centered
running headers with different styles. (This would be impossible to do
with the predefined page template of [[CSS3GCPM]], because it has only
one centered margin box at the top.)

<pre>
@page {
 grid: "t1" 1.2em    /* space for 1st running header */
       "t2" 1.2em    /* space for 2nd running header */
       "." 2em
       "*"           /* page body */
}
::slot(t1) { content: string(chapter); color: red; text-align: center }
::slot(t2) { content: string(section); color: green; text-align: center }

h1 { string-set: chapter contents }
h2 { string-set: section contents }
</pre>

<p>See <a href="#content" >“Slots and the 'content' property”</a> for
the definition of the 'content' property on slots.
</div>

<p>The syntax of a page-based template is the same as that of an
<span title="element-based template" >element-based one,</span> but
the declaration appears in an '@page' rule.

<p>In a page-based template, the height and width are typically known
(defined by the output media and the margin boxes, see [[CSS3PAGE]]).
And content that overflows a slot typically is not clipped (or hidden
behind a scrolling mechanism), but is continued on a subsequent page.

<p>Because the grid template is not attached to an element but to a
page, the slot names have global scope. But they can be
hidden to elements that have a grid ancestor that uses the same slot
names.

<p>This modifies the rules for 'flow': if the property refers to a
slot that is not found in a <span>grid ancestor,</span> it refers
instead to a slot in a page template (if there is one and it has a
slot of that name).

<p class=issue>Should we simplify page-based templates to only allow
<var>&lt;length&gt;</var> and * as row heights and column widths? (And
treat illegal sizes as '*'?)

<div class=example>
<pre>
@page :first {grid: "a b c" "d e f"}
@page {grid: "d e f"}

body {flow: e}
h1 {flow: b}
</pre>
</div>

<p>A page that has a grid template does not have a footnote area
[[CSS3GCPM]]. Instead each slot in the grid template has its own
footnote area.

<p id=page-break>If a slot of a page-based template on
<em>non-interactive</em> media has an 'overflow' property of
''visible'', then content that overflows that slot in the block
progression direction (i.e., below the slot in the case of horizontal
text) causes a page break and is continued on the next page.

<p class=issue>What happens in non-interactive media with an 'overflow'
of ''scroll'' or ''auto''?

<p>For page breaking purposes, each slot is considered as a page and
the page break properties on the elements in that slot determine where
the content for that slot is broken [[!CSS3-BREAK]]. Content after the
page break is put in the slot of the same name on the next page that
has such a slot. If there is no such page, the UA should display the
content on a separate page.

<p class=issue>Or: the content after the page break is not displayed?
displayed in the default slot?

<p class=note>Note that this may happen if the template for the first
page ('@page :first') uses a slot name that occurs in no other @page rule.
Possibly also if a page template is bound to a “named page”
[[CSS3GCPM]] and that named page is not allowed to repeat. (At the time
of writing, this is only a proposal in the GCPM Module.)

<p class=note>Note that an element <var>A</var> that appears later in
the document than an element <var>B</var> may thus be displayed on an
earlier page than element <var>B</var>, because their respective slots
are broken across pages in different ways.

<p>Because of limitations of a device (e.g., limited memory), it may be
that a UA has to print a page (force page breaks) even though some
slots aren't filled yet.

<div class=example>
<p>This example shows a document with text in two languages, which are
to be shown side by side:

<pre>
@page {grid: "a b"}
:lang(en) {flow: a}
:lang(fr) {flow: b}
</pre>

<p>This works with a document where the languages are separated like this:

<pre>
&lt;BODY>
 &lt;DIV LANG=en>
  &lt;H1>The blue house&lt;/H1>
  ...
 &lt;/DIV>
 &lt;DIV LANG=fr>
  &lt;H1>La maison bleue&lt;/H1>
  ...
 &lt;/DIV>
&lt;/BODY>
</pre>

<p>But also with a document where the languages are interleaved:

<pre>
&lt;BODY>
 &lt;H1 LANG=en>
 &lt;H1 LANG=fr>
 &lt;P LANG=en>...
 &lt;P LANG=fr>...
 ...
&lt;/BODY>
</pre>
</div>

<div class=example>
<p>This example shows how the first page may have a different layout
from the other pages. The slot ''a'' only occurs on the first page. If
the content for that slot (in this case: all H1 elements) is too long,
the remaining content of that slot <span class=issue>will not be
displayed.</span> The slot ''@'' occurs on normal pages and all its
content can thus be displayed by adding additional pages.

<pre>
@page :first {grid: "a" "*"}
@page {grid: "*"}
h1 {flow: a}
</pre>
</div>

<p class=note>Note that “page masters” (sequences of different
templates for sequences of pages) can be made with the selectors
defined in <span class=issue>[not yet decided].</span>

<div class=example>
<p>Both page-based and element-based templates can be used in the same
document.

<pre>
@page {grid: "a*"}
:lang(fr} {flow: a}
div.special {grid: "a b c" "a b d"}
</pre>
</div>

<div class=example>
<p>Here is a page as one might find in a newspaper. It combines a
layout template with multicolumn layout.

<div class=figure>
<p><img
alt="5-column newspaper page with some   blocks of text that span several columns"
longdesc=newspaper.desc src=newspaper.png>

<p class=caption>The front page of a newspaper, with the first parts of
several stories that are continued on other pages and headings and
images that span several columns.
</div>

<pre>
@page :first {
  grid:  * 3em * 3em * 3em * 3em *
        "A  A  A  A  A  A  A  A  A"  5cm
	".  .  .  .  .  .  .  .  ."  0.25cm
	"B  .  C  C  C  C  C  C  C"  *
	"B  .  C  C  C  C  C  C  C"  *
	"B  .  C  C  C  C  C  C  C"  *
	"B  .  C  C  C  C  C  C  C"  *
	"B  .  C  C  C  C  C  C  C"  *
	"B  .  D  D  D  D  D  D  D"  *
	"B  .  D  D  D  D  D  D  D"  *
	"B  .  E  E  E  .  F  F  F"  *
	"B  .  E  E  E  .  F  F  F"  *
	"B  .  E  E  E  .  F  F  F"  *
}
h1 {flow: a; border-bottom: thick; margin-bottom: 1.5em}
#toc {flow: b; margin-right: -1.5em; border-right: thin;
  padding-right: 1.5em}
#leader {flow: c; columns: 4; column-gap: 3em}
#art1 {flow: d; columns: 4; column-gap: 3em; border-top: thin}
#art2 {flow: e; columns: 2; column-gap: 3em}
#art3 {flow: f; columns: 2; column-gap: 3em}
</pre>
</div>

<p class=issue id=see-page>If a slot on a page is full and the content
continues on the next page, it may be useful to insert something like
“continued on page X.” This is useful at any page break, but more
important if there are multiple “flows” of content on each page.
Maybe a break-content property? 'break-content: "▶
continued on p. " targetcounter(???, page)' or extend text-overflow
from [[!CSS3TEXT]]?

<div class=issue>
<p>How do you style the slots of page-based template? E.g., with
<pre>
@page :first {
  grid: "a b"
        "c d" }
@page {
  grid: "a a a"
        "b c d" }

::slot(a) {background: silver}
</pre>
<p>the background could be set on all “a” slots on all pages. But how
do you set a background only on the “a” slot of the <em>first</em>
page? Maybe we need to extend the page selectors and allow something
like this:
<pre>
@page :first::slot(a) {background: silver}
</pre>
<p>A space between the pseudo-class and the pseudo-element could be
optional.
</div>

<!--=================================================================-->

<h2 id=chains>Chaining slots: the 'chains' property</h2>

<p>Slots must be rectangular, but the appearance of non-rectangular
slots can be achieved to some extent by chaining slots together.
Content that is positioned in the first slot of a chain is
automatically continued in the second slot if the first slot is full,
and then the third, etc.

<table class=propdef>
<tbody>
<tr><td>Name: <td><dfn>chains</dfn>
<tr><td>Value: <td>none | <var>&lt;identifier&gt;</var>+ [ ,
<var>&lt;identifier&gt;</var>+ ]*
<tr><td>Initial: <td>none
<tr><td>Applies to: <td><span>grid
elements</span>
<tr><td>Inherited: <td>no
<tr><td>Animatable: <td>no
<tr><td>Percentages: <td>N/A
<tr><td>Computed&nbsp;value: <td>specified value
<tr><td>Canonical&nbsp;order: <td><abbr title="follows order of property
value definition">per grammar</abbr>
</table>

<p>A value of ''none'' means the element's template has no chains.
Otherwise the value consists of one or more comma-separated lists of
identifiers. No identifier may appear more than once in the value.
Identifiers that do not occur in the <em>template</em> are ignored,
but do not make the value invalid. A list with only ignored
identifiers is itself ignored.

<p>All the non-ignored identifiers in a list, except for the last one, must
refer to slots whose size does not depend on their contents, otherwise
the list is ignored. The size of a slot does not depend on its content
if all the columns and all the rows that the slot spans have a width,
respectively height, that is a <var>&lt;length&gt;</var> or '*'.

<p>Each non-ignored list defines one <dfn>chain.</dfn>

<p>Each chain is filled with content in an analogous way to the pages
in paged media: all the content that is positioned to the first slot in
the chain is flowed, in document order, into the first slot in the
chain until the slot is full, the rest is flowed into the second slot
until it is full, etc.

<p>Content must only be split between slots at an allowed page break
[[!CSS3PAGE]]. As for page breaks, if a break occurs in the margin
between blocks, all adjoining margins are set to zero.

<p>CSS3 does not define what is the best break point to split content
over slots. However, it is recommended to use the last possible break
point that does not cause overflow. (If such a break point exists.)

<p class=note>Note: It is the author's responsibility to make the
height of relevant slots an integral number of lines if he wants to
ensure that the lines in chained slots are aligned. The height does not
automatically “snap” to a multiple of the line height.

<div class=example>
<p>The following template creates a double-staircase layout. In case
the content is too long for the staircase, a slot of flexible height is
added at the bottom.

<pre>
div { grid:    "@ @ . . f f . . . ."  3.6em
               ". a a . . g g . . ."  3.6em
               ". . b b . . h h . ."  3.6em
               ". . . c c . . i i ."  3.6em
               ". . . . d d . . j j"  3.6em
               ". . . . . . . . . ."  0.6em
               "e e e e . . k k k k"  auto;
   chains: @ a b c d e, f g h i j k}
#first { position: @ }
#second { position: f }
</pre>

<p>This could be applied to a document fragment such as

<pre>
&lt;DIV&gt;
  &lt;P ID=first&gt;...
  &lt;P ID=second&gt;...
&lt;/DIV&gt;
</pre>
</div>

<div class=example>
<p>Here is a paragraph shaped as a circle:

<pre>
p { width: 12em;
    grid: ". . . . * * . . . ."  1.2em
	  ". . a a a a a a . ."  1.2em
	  ". b b b b b b b b ."  1.2em
	  ". b b b b b b b b ."  1.2em
	  "c c c c c c c c c c"  1.2em
	  "c c c c c c c c c c"  1.2em
	  ". d d d d d d d d ."  1.2em
	  ". d d d d d d d d ."  1.2em
	  ". . e e e e e e . ."  1.2em
	  ". . . . f f . . . ."  1.2em
	  "g g g g g g g g g g"  auto;
   chains: * a b c d e f g }
</pre>
</div>

<div class=example>
<p>Here is a page-based template that creates a two-column layout with
a “hole” in the center:

<pre>
@page:first {
    grid:
    "a a a a a a a . d d d d d d d"
    "a a a a a a a . d d d d d d d"
    "a a a a a a a . d d d d d d d"
    "a a a a a a a . d d d d d d d"
    "b b b b . . . . . . . e e e e"
    "b b b b . g g g g g . e e e e"
    "b b b b . g g g g g . e e e e"
    "b b b b . g g g g g . e e e e"
    "b b b b . . . . . . . e e e e"
    "c c c c c c c . f f f f f f f"
    "c c c c c c c . f f f f f f f"
    "c c c c c c c . f f f f f f f"
    "c c c c c c c . f f f f f f f";
    chains: a b c d e f }
@page::slot(g) {
    <span class=index>vertical-align</span>: middle }

body { flow: a }
h1 { flow: g }
</pre>
</div>

<p class=note>Note: For more analysis of the possibilities and limits
of non-rectangular slots, see the PhD thesis of César Acebal
[[ACEBAL2010]].

<div class=issue>
<p>Chaining of rectangular slots is not enough to create layouts with
holes, e.g., an image in the middle of a text. Allowing
non-rectangular, <em>connected</em> regions (in addition to chaining)
would allow an example such as this:

<pre>
grid: "A A A . . ."
      "A . A . . ."
      "A A A . . ."
      ". . . B B B"
      ". . . B . B"
      ". . . B B B";
chains: a b;
</pre>

<p>Such cutouts in the middle of text usually create text that is
difficult to read, and that is why there is no 'float: center', e.g.
But the CSS WG is considering a new property 'wrap-flow' for absolutely
positioned elements that would allow, e.g.: 'p {position: absolute;
top: 1fr; left: 1fr; width: 1fr; height: 1fr; wrap-flow: both}' to
absolutely position a P element on top of a grid element and cause
the content of the element under it to wrap around it as if it were a
float [[CSS3-EXCLUSIONS]].
</div>

<p class=note>Note that a slot can have overflowing content even if it
is part of a <span>chain</span>: it can have content that is too wide
but cannot be broken.

<p>The 'break-before', 'break-after' and 'break-inside' properties
have values that control breaking of content between slots in a chain
(in particular ''region'' and ''avoid-region'', see
[[!CSS3-BREAK]]).

<p class=note>Note that, as defined in <a href="#paged" >“Breaking
grid elements across pages or columns”</a> above, a slot is a
<em class=index>fragmenter</em> of type <em>region</em> in the
terminology of
[[!CSS3-BREAK]].

<!--=================================================================-->

<h2 id=history>History and discussion</h2>

<p>The following sections contain some of the use cases and design
decision that led to this module and influenced its evolution.

<!--=================================================================-->

<h3>Developing a model of declaring, using, styling and resizing grids</h3>

<p><em>(This section is not normative.)</em>

<p class=mtb>The following types of use cases were considered for
template-based layout.

<ol>
<li>
<p>Standard Web pages.

<li>
<p>Grids and other table-like layouts. This includes grid layouts,
frame layouts and table-like subdivision of a rectangular area.

<li>
<p>A layout structure with “flex”ing information. The flexing is
represented by constraints that specify how the cells are to relate to
one another: which cells are to be allowed to grow or shrink and how
much. There may also be a priority ordering, which determines, based on
the size of the allowed display window, which cells shrink, which grow
and under which conditions.

<li>
<p>Layout structures with absolutely positioned (fixed-size) elements;
for example a block of text into which several illustrations intrude at
fixed positions within the block. This is like a float with respect to
tightly wrapping the text around the intrusion, but the position of the
intrusion is determined by the layout structure, not the content flowed
into that structure.

<p>An example of this is a multicolumn layout with one or more
“absolutely positioned floats” that intrude on the columns (see <a
href="#intrusion" >figure</a>).

<div class=figure id=intrusion>
<p><img
alt="An image that partially overlaps two columns makes the text wrap around it on both sides."
longdesc=cutout.desc src=cutout.svg>

<p class=caption>An image (or a “pull quote”) is placed centered on
the page and intrudes on two areas.
</div>

<li>
<p>Multiple, disconnected, fixed-size areas on a page that are chained
together, each one receiving the content that doesn't fit in the
previous slot. In combination with page breaks, this may give a layout
as often seen in newspapers: the first few lines of each story on the
first page, the rest of the story in other areas on subsequent pages.
(It will probably need a way to conditionally insert “continued on
page&nbsp;7” or similar text.)
</ol>

<p>For comparing proposals for template-based layouts, the working
group identified four important aspects of each proposal:

<ol>
<li>
<p>the physical layout structures &ndash; the way of structuring the
“cells” (slots) into which content is flowed. This includes a way
to identify the various layout containers.

<li>
<p>the binding mechanism &ndash; the way to specify that a given
element (and its descendants) are to be placed in a given layout cell.

<li>
<p>the property distribution mechanism &ndash; the way to put
properties onto the layout structure and the cells within it.

<li>
<p>the flexing mechanism &ndash; the way to describe how the layout
structure should adapt itself to the higher level container (window) in
which it is placed. This includes statements about which cells should
grow and when they should grow.
</ol>

<p>In this specification, these aspects are as follows:

<ol>
<li>
<p>A character matrix is used to show the layout structure and the
cells are named by the character used to show where they are
positioned.

<li>
<p>The binding of content to cells is handled by the 'flow'
property which identifies a cell to which the content is bound.

<li>
<p>The shape, size and flexibility of the layout are specified with the
character matrix. Some properties (background, border and vertical
alignment) are attached to individual slots.

<li>
<p>There is limited “flexing” information. The choice is between
fixed size, a fraction of the available size or the content's intrinsic
size. (The latter is further subject to min/max sizes specified on that
content.) It is not possible to say, e.g., that some column can only
become wider if all other columns are at their maximum size.
</ol>

<!--=================================================================-->

<h3>Syntax, features and levels</h3>

<p><em>(This section is not normative.)</em>

<p>The following is a partial list of design decisions and some
arguments for and against each choice:

<!--=================================================================-->

<h4>Named vs numbered slots</h4>

<p>Named slots are very easy to understand and use. Experience with
the draft showed that everybody who sees an example immediately
understands what it means. Moreover, there is no need to use numbers
or to count.

<p>But it is different for absolutely positioned elements that use the
grid. Those elements do not belong to a slot, they are merely placed
on top of it, overlapping what is already there and each other.

<p>Also, if grids are <a href="#auto-add" >automatically extended with
extra rows and columns (see below)</a> based on content, then those
extra rows and columns cannot have names and must (probably, see below)
be referred to by number.

<p>In this specification, named slots are used to create flows of
content, while numbers are used for absolute positioning, although
names can be used there too, if the author prefers.

<!--=================================================================-->

<h4>Single letter names vs identifiers</h4>

<p>The set of single letters is finite. And even if Unicode has many
symbols, typing them may not be easy. Letters also do not permit to
give a hint as to a slot's function (“heading,” “footer,”
“advertisement”&hellip;).

<p>On the other hand, any Unicode character can be typed as an escape,
so if you run out of letters on the keyboard, you can always make a
template like this:

<pre>DIV {grid: "\1001\1002\1003\1006"
           "\1001\1004\1005\1006"}
DIV H1 {flow: \1001}</pre>

<p>In practice, it is also hard to come up with meaningful identifiers
and so single letters require less thinking. And if you always have single
letters, you don't need spaces between them either, which makes big
templates easier to read.

<p>This specification defines that a template consists of
(space-separated) identifiers, but many examples use single-letter
identifiers.

<!--=================================================================-->

<h4 id="quoted-names">Quote marks to delimit rows or slot names</h4>

<p>The current syntax for 'grid' (and 'grid-template-areas') groups
the slots into rows with quote marks:

<pre>
grid: "a b c"
      "d * e"
</pre>

<p>Or with some explicit column widths and row heights added:

<pre>
grid: 10em * 10em
      "a   b   c" 7em
      "d   *   e" *
</pre>

<p>Instead of using quote marks, other means could be used to delimit
the rows, e.g., commas:

<pre>
grid: 10em * 10em
       a   b   c  7em,
       d   @   e  *
</pre>

<p>Because the ''*'' would then be ambiguous (it could either be a
length or a slot name), it has been replaced here by ''@'' (see <a
href="#star-or-at-sign">“Indicating the default slot”</a>).

<p>When quotes are not needed to delimit rows, they can be used to
delimit slot names, which then no longer have to be restricted to
identifiers. Like the quotes around font family names, the quotes
around slot names are optional, unless the slot names would be
ambiguous without them:

<pre>
div {grid: a  "middle top"  c,
           d       @        " -=- "}
p {flow: c}                 /* quotes optional */
p.intro {flow: middle top}  /* quotes optional */
img.one {flow: "d"}         /* quotes optional */
img.two {flow: " -=- "}     /* quotes required */
</pre>

<!--=================================================================-->

<h4 id=display>Extend 'display' or add a grid property</h4>

<p>Grids can be defined on elements such as table cells, blocks,
inline blocks or list items, but not on elements such as tables or,
inline elements. That can be expressed in the syntax by adding the
grid to the 'display' property: 'display: inline-block "a b c" "a b
d"' would be valid, but 'display: inline "a b c" "a b d"' would not
be. Or it can be
expressed by an implicit dependency between properties: 'display:
inline-block; grid: "a b c" "a b d"' has a grid, but 'display: inline;
grid: "a b c" "a b d"' ignores the grid. (In this case it is actually the
computed value of 'display' that applies, so, e.g., if the element
floats, it would be a block and thus have a grid.)

<p>The Multicol specification [[CSS3COL]] uses the latter model:
'columns' is a
separate property and only applies if the element is a <em>block
container.</em> Given that precedent, it seemed reasonable to do the
same here.

<!--=================================================================-->

<h4>Combining columns and grids</h4>

<p>Style rules can specify both a grid and columns for the same
element:

<pre>DIV {columns: 20em; grid: "a a b c c c"}</pre>

<p>The specification could say that grids don't apply to column
elements, or vice versa, or it could say that the columns apply to
contents of the DIV, after it has been flowed into the <em>default
slot.</em> This last option seemed the most useful. It is consistent
with other elements that flow into a slots: they, too, can have
columns.

<!--=================================================================-->

<h4>Shorthand vs single property</h4>

<p>It is convenient to specify the grid as the value of a single
property. It puts the column and row sizes immediately next to the rows
and columns they apply to. The typical column widths can either be
omitted or are short values like '*' and '1em', and they fit easily in
one line.

<p>But if a grid has very many columns, or their sizes are complex
(with many ''minmax()'' and ''calc()'' values, e.g.), it may be more
readable to separate the slot names from the column sizes.

<p>Also, separable properties for row and column sizes makes is easier
to specify a transition/animation on them,, because you don't have to
repeat the slot names (which cannot animate).

<p>For those reasons, this specification defines the 'grid' property
as a shorthand, at the cost for authors of having to learn four new
properties instead of one (or even zero, if the grid were added to <a
href="#display" >display (see above).</a>

<!--=================================================================-->

<h4>The number of rows and columns</h4>

<p>If the grid template can also be specified with individual
properties, how many columns &amp; rows does it have if those
properties contradict each other? Does the template (if not ''none'')
determine the number of columns or the maximum of the template and the
list of sizes? E.g.:

<table class=equiv-table>
<thead>
<tr>
<th>Specified values
<th>Meaning if the template prevails
<th>Meaning if the maximum value is used

<tbody>
<tr>
<td>
<pre>grid-template-areas: "a b c";
grid-template-columns: * * * * *</pre>
<td>
<pre>grid-template-areas: "a b c";
grid-template-columns: * * *</pre>
<td>
<pre>grid-template-areas: "a b c . .";
grid-template-columns: * * * *</pre>
</table>

<p>The former is consistent with the model for 'background-image' and
'background-size'. However, unlike for backgrounds, where a size
without an image makes no sense, in this case a size without a slot
name <em>can</em> make sense: it can represent empty space ('.') of
that size.

<p>What is more likely: that people consciously specify empty rows and
columns without putting dots in the template (to save typing or to
avoid typing too many dots), or that people mistakenly add a size too
many?

<p>The specification currently sets the number of rows and columns to
the maximum of the three properties.

<!--=================================================================-->

<h4 id=need-fr>'*' vs ''fr''</h4>

<p><a href="http://www.w3.org/Style/CSS/Tracker/issues/127"
>ISSUE-127:</a> It is very common for the columns of a grid to have
all the same width. Or, if they do not, to at least be small multiples of a
fundamental measure. And thus equal columns is the default in the
current syntax. And if it needs to be specified explicitly which
columns have the same width (e.g., because there are also other
columns in the grid) then the symbol for it is short: '*'. This also
works very well for slots whose widths are small multiples of the fundamental
measure. E.g., the widths of slots a, b and c in the following grid
relate to each other as 1:3:2:

<pre>
grid: "a b b b c c"
      "a . . . c c"
</pre>

<p>However, if the ratios of the slots are ratios of larger numbers,
the notation may become long. E.g., to make slots a and b with ratio
10:11, you would have to make 21 columns:

<pre>grid: "a a a a a a a a a a b b b b b b b b b b b"</pre>

<p>It needs to be investigated if such ratios are frequent. (They
don't seem to occur in printed magazines.) And if among the ratios
that do occur, even if infrequently, there are some that would be
impractical to write in this way.

<p>Assuming another notation is needed, it could be made by prefixing
a number (e.g., '7* 10*') or, to make the notation look more like a
dimension, by means of a special unit ''fr'' (“fraction”). E.g.,
'3.5fr 5fr' would be the same as 7 + 10 stars).

<p>If ''fr'' is added, it could either be in addition to '*' or instead
of '*'. In the former case, '*' = '1fr'.

<p>Unless it is shown that the notation with only '*' is not practical
in real cases, it seems better to neither introduce numbers ('7*') nor
units ('3.5fr'). It would give too many different ways to write the
same grid, causing authors and readers of style sheets to have to
think longer about each grid. (E.g., 'grid: "a b b b c c"' could then also
be written as 'grid: 1* 3* 2* "a b c"' or 'grid: 0.5fr 0.5fr 0.5fr
0.5fr 1fr "a b b b c"', etc.)

<p>For the moment, the specification allows both the 'fr' and *
notations.

<!--=================================================================-->

<h4 id=auto-add>Automatically add rows and columns</h4>

<p>The main purpose of grids is to improve on absolute positioning for
displaying elements in a different visual order. You typically know
how many positions you need in advance.

<p>If you don't need to change the visual order, then table layout can
often align the elements sufficiently.

<p>However, if table layout isn't possible (there are not enough
elements in the source to create the necessary table rows, the control
over the size of table cells is too limited, or you want a
column-major table), it may be useful to use a grid in a similar
manner to a table: the number of rows and columns is not specified in
the style, but depends on the number of elements that are put in the
grid.

<p>E.g., you could transpose a table with an unknown number or rows
like this:

<pre>
&lt;TABLE>
 &lt;TR>&lt;TD>A1 &lt;TD>A2 &lt;TD>A3
 &lt;TR>&lt;TD>B1 &lt;TD>B2 &lt;TD>B3
 ...
 &lt;TR>&lt;TD>K1 &lt;TD>K2 &lt;TD>K3
 ...
&lt;/TABLE>
</pre>

<p>into a tabular display with an unknown number of columns somewhat
like this:

<pre>
A1 B1... K1...
A2 B2... K2...
A3 B3... K3...
</pre>

<p>with style rules like this:

<pre>
TABLE {grid-template-columns: auto; grid-template-rows: auto}
TD:first-child {grid-area: next 1}
TD {position: grid; grid-area: same next}
</pre>

<p>This uses keywords instead of numbers, as described in <a
href="#next-same" >“Automatic placement of elements”</a> below.

<p>What is the size of the added rows and columns? The example above
assumes the size of the single, specified grid cell is simply
repeated. There could also be a marker in the list of sizes to
indicate which set of sizes is repeated. Or there could be a separate
property with the list of sizes that is repeated for all added rows
and columns.

<p>It would probably be difficult to specify that any number of
columns of size <var>A</var> can be added, but that the last column
must have size <var>B</var>&hellip;

<p>The current specification specifies that extra rows and columns are
added when needed for absolute positioning ('grid-area'). It is
not possible to automatically create new, anonymous flows. (But
sometimes you can use multi-column elements to do that, and possibly
grid templates can be attached to columns, via a '::column')
pseudo-element, see [[CSS3GCPM]].)

<!--=================================================================-->

<h4>Rectangular slots vs non-rectangular slots</h4>

<p>Non-rectangular slots, such as

<pre>
grid: "a a a"
      "a a ."
      "a . ."
</pre>

<p>are probably something for level 4. Or maybe the Exclusions module
can be used instead.

<!--=================================================================-->

<h4 id=page-grid>Page grids</h4>

<p>Typically in magazines, each page has a slightly different layout
of slots, although they are all based on the same set of columns,
usually between 3 and 6. It is difficult to specify the grids of all
pages as a single long grid on the BODY element; and indeed impossible
if you don't know how many pages use each kind of layout.

<p>Applying grids to '@page' is an alternative. That is what is <a
href="#page-templates" >specified in this module,</a> but it has a few
issues:

<ul>
<li>We need named paged ('@page news {&hellip;}'), a way for an
element to say it needs to start on a specific kind of page
('break-before: page(news)' or 'break-before; always; page: news'),
and a way to say which style follows which ('@page news-odd {next:
news-even}').

<li>What happens to footnotes [[CSS3GCPM]]? Each slot probably has its
own footnote area.

<li>How are slots on different pages connected? Probably by having the
same name.
</ul>

<!--=================================================================-->

<h4>Style the slots (pseudo-elements)</h4>

<p>Slots can have properties of their own: background, overflow,
writing-mode, direction, box-shadow, margin, border, padding. What
else?

<p>For 'vertical-align', see <a href="#vert-align" >“Vertical
alignment inside slots”</a> below.

<p>'Wrap-flow' (from <a href="https://www.w3.org/TR/css3-exclusions/"
>CSS Exclusions and Shapes</a>) could be useful for slots with
negative margins, too.

<!--=================================================================-->

<h4 id=select-after-pseudo>Style the contents of slots (region-based
styling)</h4>

<p>By means of a new pseudo-element, style could be applied to only
the part of an element that is inside a certain slot (similar to how
''::first-line'' applies style only to the part of an element in the
first line of a paragraph):

<pre>P::flow(a) {font-size: large}</pre>

<p>would be an alternative to

<pre><span class=index>@region</span> ::slot(a) { P {font-size: large} }</pre>

<p>The notation with '::flow()' is shorter, and more similar to
'::first-line' at first sight. However, 'EM::first-line' does
<em>not</em> select the part of the EM inside a first line, while
'EM::flow(a)' <em>would</em> select the part of the EM inside slot
a. Also, the existence of two pseudo-elements, '::slot()' and
':flow()' is confusing.

<p>An alternative is to allow simple selectors after pseudo-elements:

<pre>::slot(a) P {font-size: large}</pre>

<p>could select the parts of a P that are rendered inside slot a. That
would mean that 'P::first-line EM' is also valid and selects the parts
of an EM that are rendered on the first line of a P.

<p>Another possibility might be to set styles on '::slot()' itself and
only rely on inheritance. (This is what is proposed by David Baron in
[[CSS-OVERFLOW-3]].) Elements inside a grid element then inherit from
the slot inside which they are, before they inherit from the grid
element itself.

<p>Yet another possibility is a generic 'region()' pseudo-element:

<pre>P::region(slot(c)) { color: yellow }
EM::region(first-line) { font-weight: normal }</pre>

<p>Or without the nested parentheses:

<pre>P::region(slot c) { color: yellow }
EM::region(first-line) { font-weight: normal }</pre>

<p>The name “region” may not be the best. Some alternatives are:

<pre>EM::part(first-line) { font-weight: normal }
EM::inside(first-line) { font-weight: normal }
EM::overlap(first-line) { font-weight: normal }</pre>

<p>And [[CSS3-REGIONS]] proposes an at-rule, '@region':

<pre>@region ::slot(a) {
 P {font-size: large}
}</pre>

<p>Note that the specificity of the different alternative selectors
would not be the same. [[CSS3-REGIONS]] defines that the selector
immediately after '@region' does not add specificity. In other words,
'@region div::first-line { em {…} }' has specificity 1, while
'div::first-line em {...}' has specificity
2. 'em::region(div::first-line)' would have specificity 1 as well.

<p>Because the specificity of the selector after '@region' is not
taken into account (see <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734"
>Bug 15734</a>), often only the order of the rules determines which
rule is used. With a document like this:

<pre>
&lt;ul class="menu nav">
 &lt;li>…
 &lt;li>…
&lt;/ul>
&lt;ul class="menu">
 &lt;li>…
 &lt;li>…
&lt;/ul>
</pre>

<p>and a style sheet like this:

<pre>
ul.menu {grid: ...}
@region ul.menu.nav::slot(a) { li { color: green } }
@region ul.menu::slot(a) { li { color: orange } }
</pre>

<p>the two color rules apply to the same LIs, but the first, seemingly
more specific, '@region' rule has no effect. Is this a problem?
Authors would have to remember to write the above like this instead:

<pre>
@region ul.menu::slot(a) { ul.nav li { color: green } } /* spec = 12 */
@region ul.menu::slot(a) { li { color: orange } }       /* spec = 1 */
</pre>

<p>or

<pre>
@region ul.menu::slot(a) {
  ul.nav li { color: green }  /* spec = 12 */
  li { color: orange }        /* spec = 1 */
}
</pre>

<p>or

<pre>
@region ::slot(a) {
  ul.menu.nav li { color: green }  /* spec = 22 */
  ul.menu li { color: orange }     /* spec = 12 */
}
</pre>

<!--=================================================================-->

<h4>Orient the grid with writing mode vs orient the slots</h4>

<p>A grid can contain vertical text, but the grid itself
doesn't need to be rotated or flipped. Indeed, it would be confusing
if it did. In other words, the following element has vertical text in
the top right slot and an image in the bottom right slot:

<pre>
&lt;DIV STYLE="grid: "a *" "a b"; writing-mode: vertical-rl">
 Some text here...
 &lt;IMG STYLE="flow: b"...>
 ...
&lt;/DIV>
</pre>

<p>In this specification, a grid template is always laid out with the
first row at the top and the first column on the left. But the slots
themselves can have a writing mode (by default the one “inherited”
from the grid element).

<p>This is different for <em>container elements,</em> i.e., elements
with a 'display' of ''grid'' or ''inline-grid'', as those are designed
for graphical user interfaces, where it is sometimes useful to swap a
row of buttons, e.g., in a different language. Grids inside other
elements (''block'', ''list-item'', ''inline-block'', ''table-cell'',
etc.) are more likely to depend on the orientation of the page
(landscape/portrait, recto/verso); but that has to be handled
explicitly by the designer by means of media queries and selectors.

<!--=================================================================-->

<h4 id="star-or-at-sign">Indicating the default slot ('*' vs '@')</h4>

<p>The symbol '*' seems a good choice, as the concept of default is
somewhat similar to the concept of wildcard. The '*' is also used to
set the size of rows and columns, but the context is probably enough
to avoid confusion. (But see <a href="#quoted-names" >“Quote marks to
delimit rows or slot names”</a> for a syntax where '@' would be
better.)

<!--=================================================================-->

<h4 id=abspos>Flowing vs absolutely positioning content in a grid</h4>

<p>The most flexible model for positioning content in a grid is to
consider the slot as a flow, which can contain zero, one or more
elements and even anonymous content. This is the same concept as a
table cell: the cell also is a separate flow that can contain several
elements as well as anonymous content.

<p>An element inside a slot thus has its size determined as an element
in normal flow. E.g., if you set a background on it, the background
covers the element only, not the whole slot. (But the slot has its own
background property for that.)

<p>But you may also want to use the grid as a coordinate system for
absolutely positioned elements, which then overlap with the contents
of the grid (above or below it, depending on 'z-index').

<p>And, as <a href="#auto-add" >“Automatically add rows and
columns”</a> above explains, you may want a table-like display of
elements that are neither absolutely positioned nor flowed, but the
table properties aren't powerful enough.

<p>Those two ideas can be added to the grid template model: the
declaration of the grid is reused, but instead of using 'flow' to
position an element into it, the element is absolutely positioned on
top of it. But unlike the absolute positioning in level 2, this
positioning is allowed to influence the size of the grid element on
which it is positioned.

<p>There are two ideas for how to do this. One idea is to define a
special kind of unit, ''gr'', which is only defined for elements that
have a <em>grid ancestor,</em> and which can be used on the 'top',
'right', 'bottom' and 'left', properties of absolutely positioned
elements. ''left: 2.25gr'' means the position is in the third column,
one quarter of the way towards the fourth column.

<p>Another way is to define a new property 'grid-area', which, if set,
overrides 'top',
'left', etc. and which takes numbers or names of slots (up to four
of them, to set the four sides).

<p>Yet another way is to extend 'top', 'left', etc., with unitless
values (meaning the n'th grid column or row) and letters (meaning the
appropriate edge of the slot of that name).

<!--=================================================================-->

<h4>Use the pseudo-class to create additional slots</h4>

<p>If you want a flow that overlaps with a grid element (i.e.,
absolutely positioned on top of it), but that flow doesn't correspond
to an element in the document you could create a pseudo-element that
is like an “absolutely positioned slot:”

<pre>DIV::slot(z) {position: grid; grid-area: 2 2}</pre>

<p>Like other '::slot()' pseudo-elements, it applies to <span>grid
elements</span> only (the DIV in this example must be a grid element),
but unlike other '::slot()' pseudo-elements it doesn't style an
existing slot, but implicitly creates a new one. (It is some kind of
error if the name ''z'' already exists in the grid template.)

<p>Then you can flow other elements into this slot:

<pre>.note {flow: z}</pre>

<p>This mechanism is difficult to understand. Experience shows
it is also difficult to explain and in a style sheet it is difficult
to recognize. What are the use cases (that can't be done with negative
margins, absolute positioning, etc.)? This specification does not
allow the creation of arbitrary, absolutely positioned
pseudo-elements. If needed, it could be added in level 4.

<!--=================================================================-->

<h4>Names for edges</h4>

<p>If you position elements absolutely (with 'top', 'left', etc. or
with 'grid-area', see <a href="#abspos" >“Flowing vs absolutely
positioning content in a grid”</a> above), you can use numbers to
refer to grid lines: from '1' (the left edge of the first column) to
<var>N</var>+1 (the right edge of the last column) and ditto for
rows. You can also refer to the edges of slots, for an extra level of
indirection and to avoid the need for numbers.

<p>It has been suggested to create a mechanism to assign arbitrary
names to grid lines, even multiple aliases for the same grid line. You
could then absolutely position an element at grid line ''foo'' (e.g.,
'grid-area: foo 1') and later assign that alias ''foo'' to a
different grid line without having to change the style rules that use
it. E.g., the following could make the name ''a-line'' an alias for
the number 2 and ''b-line'' an alias for the number 4:

<pre>
/* Create a 7x2 grid template */
DIV {grid-template-columns: * a-line * * b-line * *; grid-template-rows: * *}
/* Put H2 at cell x=4, y=2 */
DIV H2 {position: grid; grid-area: b-line 2}
</pre>

<p>(This could also use strings instead of identifiers, for even more
flexible names.)

<p>This turns out to be very difficult to explain to users, partly
because of the syntax, partly because of the indirection, which comes
on top of the inherent indirection that CSS already requires (the
style rules are in a style sheet, not on the elements they apply to)
and the indirection of specifying a position by referring
to an abstract grid.

<p>Also, the number of usages of 'grid-area' (for a given grid) is
not likely to be so big that a symbolic name for a grid line is
necessary. Moreover, this is easy to handle with a macro processor.

<p>This specification does not include a mechanism to assign aliases
to grid lines.

<!--=================================================================-->

<h4>Position from the right and bottom</h4>

<p>If elements are absolutely positioned relative to a grid (with
'top', 'left' or 'grid-area', see <a href="#abspos" >“Flowing vs
absolutely positioning content in a grid”</a> above), and especially
if the grid can automatically grow (see <a href="#auto-add"
>“Automatically add rows and columns”</a>) it might be useful to
position elements relative to the last row or column, independent of
how many rows or columns the grid element has. That could be done with
negative numbers:

<pre>grid-area: 1 -1</pre>

<p>This specification does not allow positioning from the end. If uses
cases are found, it could be added in level 4.

<!--=================================================================-->

<h4>Syntax features to shorten long grid specifications</h4>

<p>Grids are typically very regular (see also <a href="#need-fr" >'*'
vs ''fr''</a> above). E.g., if you specify the margins between slots
in the template (rather then with a 'margin' property on the slots),
you often end up with a grid similar to this:

<pre>grid-template-areas: "a.b.c.d.e.f";
grid-template-columns: * 1em * 1em * 1em * 1em * 1em *</pre>

<p>Even for the columns of broadsheet newspapers (6&ndash;8 columns),
that still fits easily on one line, even with margins between the
columns. But if the grid gets even longer, there may be a need for
abbreviations, e.g.:

<pre>grid-template-columns: * repeat(1em *, 5)</pre>

<p>or

<pre>grid-template-columns: * (1em *)[5]</pre>

<p>or

<pre>grid-template-columns: * (1em *){5}</pre>

<p>or

<pre>grid-template-columns: * 5//1em *//</pre>

<p>This makes the syntax harder to learn and read, though. So it needs
some good use cases first. This can be postponed to level 4.

<!--=================================================================-->

<h4>''fit-content'' vs ''auto'' vs&hellip;</h4>

<p>Column sizes can have an exact size or a minimum and maximum size,
by means of ''minmax()''. A common case is probably
''minmax(min-content, max-content)''. (Is that really true?) Should
that common case have its own keyword? If so, should that keyword be
''fit-content''?

<p>''fit-content'' in the Box Module is defined as something else, viz.,
min(max(available width, ''min-content''), ''max-content'')).

<p>An alternative name could be ''auto''.

<!--=================================================================-->

<h4 id=vert-align>Vertical alignment inside slots</h4>

<p>The content of a slot can be vertically aligned with
'vertical-align', exactly like the content in table cells. (Despite
the name, it would, of course, be horizontal alignment if the slot's
writing mode was vertical.)

<p>There could also be a property that applies exclusively to grids
(grid-slot-align?), or the Flexbox property 'align-content' can be
re-used.

<p>Looking beyond tables, flex boxes and grids, there is also a need
for vertical alignment of content in normal blocks (when those blocks
have a height that does not depend on their contents). There might
thus also be a new property that applies uniformly to all cases. E.g.:
''block-align: top | bottom | middle | baseline |
<var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var>'', where
''baseline'' simply means ''top'' everywhere outside grids and
tables. (A separate question is if it would override 'vertical-align'
in tables). Or 'vertical-align' itself could be generalized to apply
to all <em>block container</em> boxes (although the meaning would be
ambiguous on ''inline-block'').

<p>And instead of aligning all the slot's content together as a single
block by means of 'vertical-align', it may also be necessary to spread
the contents out, e.g., aligning the first paragraph on the baseline
of the row, but the last paragraph against the bottom of the slot. The
Box Module [[CSS3BOX]] proposes elastic margins for that
(''margin-top: fill''). Elastic line heights may also be possible.

<p>The present specification just reuses 'vertical-align'. If a
differently named property is developed, or other ways to distribute
and align contents, then whatever interaction they have with
'vertical-align' in tables would apply to slots, too.

<!--=================================================================-->

<h4>Horizontal alignment inside slots</h4>

<p>Elements can be centered in, or aligned to a side of, their parent
with ''auto'' margins. But this doesn't always work: for many
combinations of 'width' and 'direction', the auto margins are
ignored. There may thus be a new property ('justify-content: center'?) or
value ('margin: fill'?) in the future for correct alignment and
centering.

<p>Or should there be an alignment property that only applies to grid
slots? 'grid-slot-align'?

<p>This specification defines nothing, in the expectation of a general
solution in the future.

<!--=================================================================-->

<h4>Auto margins on slots</h4>

<p>Do ''auto'' margins on slots (e.g., ''::slot(a) {margin: auto}'')
do anything? Or are they simply 0?

<!--=================================================================-->

<h4>Page floats</h4>

<p>[[CSS-PAGE-FLOATS]] defines “page floats” (which are slightly misnamed,
because they cause floats to float not just to the top or bottom of a
page, but also to the top or bottom of a column in certain
contexts). What do they do in slots?

<p>This specification treats a slot similar to a column, e.g.,
''float: top'' means the top of the slot, not of the page. Similarly,
if slots are chained, then the float modifiers ('float-defer-page')
select the next slot, not the next page.

<!--=================================================================-->

<h4>Break-* properties</h4>

<p>The 'break-before', 'break-after' and 'break-inside' properties in
the draft of February 2012 (see [[CSS3-BREAK]]) have keywords
''region'' and ''avoid-region''. Should they be called ''slot'' and
''avoid-slot'' instead?

<!--=================================================================-->

<h4 id=next-same>Automatic placement of elements</h4>

<p>There may be cases where elements are to be placed based on where
the previous elements was placed, which isn't always expressible with
a clever selector. An example is placing DD elements in the same slot
as the preceding DT element. (Note that there may be more than one DD
associated with a single DT, so a selector such as ''DT + DD'' doesn't
work. The selector ''DT ~ DD'' doesn't work either, because it selects
DDs that belong to the next DT, too.).

<p>A keyword may help: 'flow: same'.

<p>In some cases, elements may need to be placed in the next column or
row after the previous element. If there are cases where rows or
columns need to be <a href="#auto-add" >added automatically based on
content,</a> those are probably also the cases where element are to
be placed in the “next” row or column w.r.t. to the preceding element.

<p>E.g., with a keyword: 'grid-area: next same' (for “next
column, same row”).

<!--=================================================================-->

<h4>The names of the properties</h4>

<p>Where this draft has 'flow' for flowing content into a region, the
Regions draft [[CSS3-REGIONS]] (version of August 2012) proposes
'flow-into'. It's more descriptive, but longer.

<!--=================================================================-->

<h2 id=conformance>Conformance</h2>
<!--conformance-->

<!--=================================================================-->

<h2 id=changes>Changes</h2>

<p>Summary of major changes since the <a
href="https://www.w3.org/TR/2011/WD-css3-layout-20111129/" >29 November
2011 draft:</a>

<ul>
<li>Added a <a href="#accessibility" >note about accessibility.</a>

<li>Instead of directly on 'display', the grid template is now
specified with a new property, 'grid', to be consistent with 'columns'
in the multi-column specification [[CSS3COL]], and also to allow the
grid to be a shorthand for more primitive properties: 'grid-template-areas',
'grid-template-rows' and 'grid-template-columns'.

<li>Similarly, the flow that an element goes into is now specified
with a separate 'flow' property, rather than the 'position' property,
which retains its character as specifying the kind of positioning,
rather than the position itself.

<li>Replaced @ by * to indicate the default slot. The asterisk looks
better and may also be easier to remember, because of its association
with the notion of “wild card.”

<li>Slot names are not restricted to single letters, but may be
identifiers.

<li>Removed the ''fr'' unit as a means to absolutely position elements
on a grid.

<li>Added a different kind of ''fr'' unit as an alternative to * on
row and column sizes, borrowed from [[CSS3-GRID-LAYOUT]].

<li>The 'content' property is now allowed on slots analogously to how
it is allowed on ''before'' and ''after'' pseudo-elements and on
margin boxes. One effect of this is that slots in page-based templates
can be used for running headers.

<li>The margin properties are now allowed on slots. This allows, e.g.,
slots to overlap by means of negative margins.

<li>Different set of constraints and a different function to optimize
when calculating the size of rows and columns: the row heights and
column widths are now considered together, which should guarantee that
the overall size of the grid element is as small as possible in all
cases and also makes the handling of width and height symmetric.

<li>References to 'page-break-*' properties and to [[CSS3PAGE]] have
been replaced with references to 'break-*' properties and the new
[[CSS3-BREAK]] module.

<li>Now allows <var>&lt;percentage&gt;</var> on 'vertical-align'.

<li>Generalized the text for 'vertical-align' to apply to all writing
modes.

<li>Added the <em>blank() pseudo-element</em> to be able to select and
style slots that, for whatever reason, have nothing flowed into them.

<li>Added a placeholder section for a stack-of-cards layout model.

<li>Added an (incomplete) <a href="#region-based" >section on
region-based styling.</a>

<li>Expanded the History section with discussions of alternative
syntaxes, models and names.
</ul>

<!--=================================================================-->

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

<p>The first ideas for describing a template in CSS date from 1996 and
are described in <a href="https://www.w3.org/TR/NOTE-layout"
><cite>Frame-based layout
via Style Sheets</cite></a> by Bert Bos, Dave Raggett and Håkon Wium
Lie. The idea was revived in 2005 on the request of W3C's Device
Independence Working Group and benefited especially from discussions
with Rhys Lewis and Rotan Hanrahan from that group.

<p>This specification was further influenced by ideas about form
layout by <a
href="https://lists.w3.org/Archives/Member/w3c-css-wg/2002JulSep/0077.html" >
Dave Raggett [member-only link]</a> and an early write-up of the
features of <a
href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL" >
XUL</a> by <a
href="https://lists.w3.org/Archives/Member/w3c-css-wg/2002JanMar/0432.html" >
Ian Hickson [member-only link].</a>

<p><a href="http://stuffandnonsense.co.uk/about" >Andy
Clarke,</a> <a href="http://sushiandrobots.com/about" >Jina Bolton</a>
and <a href="http://lawver.net/" >Kevin Lawver</a> provided use cases,
examples and requirements. The analysis in the <a href="#history"
>History</a> section is a slightly shortened version of work by Steve
Zilles.

<p>César Acebal built the
first 
prototype, see [[ACEBAL2012]]. Andrew Fedoniouk
built <a
href="http://lists.w3.org/Archives/Public/www-style/2009Mar/0278.html"
>the second.</a>
A <a
href="http://lists.w3.org/Archives/Public/www-style/2009Apr/0383.html"
>third prototype</a> was made by Alexis Deveria.
The <a href="http://github.com/acebal/ALMcss3" >fourth prototype,
ALMcss3,</a> was again made by César Acebal.

<!--=================================================================-->

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

<p id="normative-references">Normative references:
<!--normative-->

<p id="other-references">Other references:
<!--informative-->

<!--=================================================================-->

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

<!--=================================================================-->

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

</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: html
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:0
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
sgml-basic-offset:0
sgml-transformation:'upcase
sgml-quick-keys:t
html-quick-keys:t
End:
-->