Overview.src.html

<h1>CSS Grid Layout Module Level 1</h1>

<pre class='metadata'>
Status: ED
ED: http://dev.w3.org/csswg/css-grid/
TR: http://www.w3.org/TR/css3-grid-layout/
Previous version: http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/
Previous version: http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/
Shortname: css-grid
Level: 1
Editor: Tab Atkins Jr., Google, http://www.xanthir.com/contact/
Editor: fantasai, Mozilla, http://fantasai.inkedblade.net/contact
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com
Previous editors: <a href="mailto:alexmog@microsoft.com">Alex Mogilevsky</a>, Microsoft Corporation
Previous editors: <a href="mailto:pcupp@microsoft.com">Phil Cupp</a>, Microsoft Corporation
Issues list: <a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Grid+Layout&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED">In Bugzilla</a>
Abstract: This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.
Ignored Terms: column-*, justify-*, containing block, <positive-integer>, indefinite, block-start, block-end, inline-start, inline-end, end, max-content, grid-field, auto
Link Defaults: css21 (property) margin
</pre>

<style type="text/css">
.example {
	clear:both
}

th {
	text-align:left
}

.pseudo-code {
	font-family:monospace
}
.pseudo-code > ol {
	list-style-type:decimal
}
.pseudo-code > ol > li > ol {
	list-style-type:lower-latin
}
.pseudo-code > ol > li > ol > li > ol {
	list-style-type:lower-roman
}
.pseudo-code ul {
	list-style-type:disc
}

dd > p:nth-child(1) {
	margin-top:0
}
</style>

<h2 id='intro'>
Introduction and Overview</h2>

	<p>
		Grid layout contains features targeted at web application authors.
		The grid can be used to achieve many different layouts.
		It excels at dividing up space for major regions of an application,
		or defining the relationship in terms of size, position, and layer
		between parts of a control built from HTML primitives.

	<p>
		Like tables,
		grid layout enables an author to align elements into columns and rows,
		but unlike tables,
		grid layout doesn't have content structure,
		and thus enables a wide variety of layouts not possible with tables.
		For example, the children of a grid container can position themselves
		such that they overlap and layer similar to positioned elements.

	<p>
		In addition, the absence of content structure in grid layout helps to manage changes to layout
		by using fluid and source order independent layout techniques.
		By combining media queries with the CSS properties that control layout of the grid container and its children,
		authors can adapt their layout to changes in device form factors, orientation, and available space,
		without needing to alter the semantic nature of their content.


<h3 id='background'>
Background and Motivation</h3>

	<div class="sidefigure">
		<amg class="figure" alt="Image: Application layout example requiring horizontal and vertical alignment." src="images/basic-form.png" />
		<p class="caption">Application layout example requiring horizontal and vertical alignment.
	</div>

	<p>
		As websites evolved from simple documents into complex, interactive applications,
		tools for document layout, e.g. floats,
		were not necessarily well suited for application layout.
		By using a combination of tables, JavaScript, or careful measurements on floated elements,
		authors discovered workarounds to achieve desired layouts.
		Layouts that adapted to the available space were often brittle
		and resulted in counter-intuitive behavior as space became constrained.
		As an alternative, authors of many web applications opted for a fixed layout
		that cannot take advantage of changes in the available rendering space on a screen.

	<p>
		The capabilities of grid layout address these problems.
		It provides a mechanism for authors to divide available space for layout into columns and rows
		using a set of predictable sizing behaviors.
		Authors can then precisely position and size the building block elements of their application
		by into <a>grid areas</a> defined by these columns and rows.
		Figure 1 illustrates a basic layout which can be achieved with grid layout.

<h3 id='adapting-to-available-space'>
Adapting Layouts to Available Space</h3>

	<div class="sidefigure">
		<p>
			<amg alt="Image: Five grid items arranged according to content size and available space." src="images/game-smaller.png" />

		<p class="caption">
			Five grid items arranged according to content size and available space.
	</div>

	<div class="sidefigure">
		<p>
			<amg alt="Image: Growth in the grid due to an increase in available space." src="images/game-larger.png" />

		<p class="caption">
			Growth in the grid due to an increase in available space.
	</div>

	<p>
		Grid layout can be used to intelligently reflow elements within a webpage.
		Figure 2 represents a game with five major areas in the layout:
		the game title, stats area, game board, score area, and control area.
		The author's intent is to divide the space for the game such that:

	<ul>
		<li>
			The stats area always appears immediately under the game title.
		<li>
			The game board appears to the right of the stats and title.
		<li>
			The top of the game title and the game board should always align.
		<li>
			The bottom of the game board and the stats area align when the game has reached its minimum height,
			but otherwise the game board will stretch to take advantage of all the screen real-estate available to it.
		<li>
			The score area should align into the column created by the game and stats area,
			while the controls are centered under the board.
	</ul>

	<p>
		As an alternative to using script to control the absolute position, width, and height of all elements,
		the author can use grid layout,
		as shown in Figure 3.
		The following example shows how an author might achieve all the sizing, placement, and alignment rules declaratively.

	<p>
		Note that there are multiple ways to specify the structure of the grid
		and to position and size <a>grid items</a>,
		each optimized for different scenarios.
		This example illustrates one that an author may use to define the position and space for each <a>grid item</a>
		using the 'grid-template-rows' and 'grid-template-columns' properties on the <a>grid container</a>,
		and the 'grid-row' and 'grid-column' properties on each <a>grid item</a>.


	<pre class="example">
&lt;style type="text/css">
  #grid {
    display: grid;

    /* Two columns: the first sized to content, the second receives
     * the remaining space, but is never smaller than the minimum 
     * size of the board or the game controls, which occupy this 
     * column. */
    grid-template-columns: auto minmax(min-content, 1fr);

    /* Three rows: the first and last sized to content, the middle 
     * row receives the remaining space, but is never smaller than 
     * the minimum height of the board or stats areas. */
    grid-template-rows: auto minmax(min-content, 1fr) auto
  }

  /* Each part of the game is positioned between grid lines by 
   * referencing the starting grid line and then specifying, if more 
   * than one, the number of rows or columns spanned to determine 
   * the ending grid line, which establishes bounds for the part. */
  #title    { grid-column: 1; grid-row: 1 }
  #score    { grid-column: 1; grid-row: 3 }
  #stats    { grid-column: 1; grid-row: 2; justify-self: start }
  #board    { grid-column: 2; grid-row: 1 / span 2; }
  #controls { grid-column: 2; grid-row: 3; align-self: center }
&lt;/style>

&lt;div id="grid">
  &lt;div id="title">Game Title&lt;/div>
  &lt;div id="score">Score&lt;/div>
  &lt;div id="stats">Stats&lt;/div>
  &lt;div id="board">Board&lt;/div>
  &lt;div id="controls">Controls&lt;/div>
&lt;/div></pre>

<h3 id='source-independence'>
Source Independence</h3>

	<div class="sidefigure">
		<p>
			<amg alt="Image: An arrangement suitable for portrait orientation." src="images/game-portrait.png" />

		<p class="caption">An arrangement suitable for ''portrait'' orientation.
	</div>

	<div class="sidefigure">
		<p>
			<amg alt="Image: An arrangement suitable for landscape orientation." src="images/game-landscape.png" />

		<p class="caption">An arrangement suitable for ''landscape'' orientation.
	</div>

	<p>
		Continuing the prior example,
		the author also wants the game to adapt to the space available on traditional computer monitors, handheld devices, or tablet computers.
		Also, the game should optimize the placement of the components when viewed either in landscape or portrait orientation (Figures 4 and 5).
		By combining grid layout with media queries,
		the author is able to use the same semantic markup,
		but rearrange the layout of elements independent of their source order,
		to achieve the desired layout in both orientations.

	<p>
		The following example leverages grid layout’s ability to name the space which will be occupied by a <a>grid item</a>.
		This allows the author to avoid rewriting rules for <a>grid items</a>
		as the grid’s definition changes.

	<pre class="example">
&lt;style type="text/css">
  @media (orientation: portrait) {
    #grid {
      display: grid;

      /* The rows, columns and areas of the grid are defined visually
       * using the grid-template-areas property.  Each string is a row, and
       * each word an area.  The number of words in a string 
       * determines the number of columns. Note the number of words 
       * in each string must be identical. */
      grid-template-areas: "title stats"
                           "score stats"
                           "board board"
                           "ctrls ctrls";

      /* Columns and rows created with the template property can be 
       * assigned a sizing function with the grid-template-columns 
       * and grid-template-rows properties. */
      grid-template-columns: auto minmax(min-content, 1fr);
      grid-template-rows: auto auto minmax(min-content, 1fr) auto
    }
  }

  @media (orientation: landscape) {
    #grid {
      display: grid;

      /* Again the template property defines areas of the same name, 
       * but this time positioned differently to better suit a 
       * landscape orientation. */
      grid-template-areas: "title board"
                           "stats board"
                           "score ctrls";

      grid-template-columns: auto minmax(min-content, 1fr);
      grid-template-rows: auto minmax(min-content, 1fr) auto
    }
  }

  /* The grid-area property places a grid item into a named 
   * region (area) of the grid. */
  #title    { grid-area: title }
  #score    { grid-area: score }
  #stats    { grid-area: stats }
  #board    { grid-area: board }
  #controls { grid-area: ctrls }
&lt;/style>

&lt;div id="grid">
  &lt;div id="title">Game Title&lt;/div>
  &lt;div id="score">Score&lt;/div>
  &lt;div id="stats">Stats&lt;/div>
  &lt;div id="board">Board&lt;/div>
  &lt;div id="controls">Controls&lt;/div>
&lt;/div></pre>


<h3 id='grid-layering'>
Grid Layering of Elements</h3>

	<div class="sidefigure">
		<p>
			<amg alt="Image: A control composed of layered HTML elements." src="images/control-layering-and-alignment.png" />

		<p class="caption">A control composed of layered HTML elements.
	</div>

	<p>
		In the example shown in Figure 6,
		the author is creating a custom slider control.
		The control has six parts.
		The lower and upper labels align to the left and right edges of the control.
		The track of the slider spans the area between the labels.
		The lower and upper fill parts touch beneath the thumb,
		and the thumb is a fixed width and height that can be moved along the track
		by updating the two flex-sized columns.

	<p>
		Prior to the introduction of grid layout,
		the author would have likely used absolute positioning to control the top and left coordinates,
		along with the width and height of each HTML element that comprises the control.
		By leveraging grid layout,
		the author can instead limit script usage to handling mouse events on the thumb,
		which snaps to various positions along the track
		as the 'grid-template-columns' property of the <a>grid container</a> is updated.

	<pre class="example">
&lt;style type="text/css">
  #grid {
    display: grid;

    /* The grid-template-columns and rows properties also support 
     * naming grid lines which can then be used to position grid 
     * items.  The line names are assigned on either side of a column
     * or row sizing function where the line would logically exist. */
    grid-template-columns:
      (start)        auto
      (track-start)  0.5fr
      (thumb-start)  auto
      (fill-split)   auto
      (thumb-end)    0.5fr
      (track-end)    auto
      (end);
  }

  /* The grid-placement properties accept named lines. Below the
   * lines are referred to by name. Beyond any 
   * semantic advantage, the names also allow the author to avoid 
   * renumbering the grid-column-start and grid-row-start properties of the 
   * grid items.  This is similar to the concept demonstrated in the 
   * prior example with the grid-template-areas property during orientation 
   * changes, but grid lines can also work with layered grid items 
   * that have overlapping areas of different shapes like the thumb 
   * and track parts  in this example. */
  #lower-label { grid-column-start: start }
  #track       { grid-column: track-start / track-end; align-self: center }
  #upper-label { grid-column-end: end; }

  /* Fill parts are drawn above the track so set z-index to 5. */
  #lower-fill  { grid-column: track-start / fill-split; 
                 align-self: end; 
                 z-index: 5 }
  #upper-fill  { grid-column: fill-split / track-end; 
                 align-self: start; 
                 z-index: 5 }

  /* Thumb is the topmost part; assign it the highest z-index value. */
  #thumb       { grid-column: thumb-start / thumb-end; z-index: 10 }
&lt;/style>

&lt;div id="grid">
  &lt;div id="lower-label">Lower Label&lt;/div>
  &lt;div id="upper-label">Upper Label&lt;/div>
  &lt;div id="track">Track&lt;/div>
  &lt;div id="lower-fill">Lower Fill&lt;/div>
  &lt;div id="upper-fill">Upper Fill&lt;/div>
  &lt;div id="thumb">Thumb&lt;/div>
&lt;/div></pre>


<h2 id='grid-concepts'>
Grid Layout Concepts and Terminology</h2>

	<p>
		In <dfn export>grid layout</dfn>,
		the content of a <a>grid container</a> is laid out
		by positioning and aligning it into a <a>grid</a>.
		The <dfn export>grid</dfn> is an intersecting set of horizontal and vertical <a>grid lines</a>
		that divides the <a>grid container</a>’s space into <a>grid areas</a>,
		into which <a>grid items</a> (representing the <a>grid container</a>’s content) can be placed.  
		There are two sets of <a>grid lines</a>: 
		one set defining <dfn export title="grid column | column">columns</dfn>
		that run along the <a href="http://www.w3.org/TR/css3-writing-modes/#block-axis">block axis</a> (the <dfn export>column axis</dfn>,
		and an orthogonal set defining <dfn export title="grid row | row">rows</dfn>
		along the <a href="http://www.w3.org/TR/css3-writing-modes/#inline-axis">inline axis</a> (the <dfn export>row axis</dfn>).
		[[!CSS3-WRITING-MODES]]

<!--
	<div class="figure">
		<amg class="figure" alt="Image: A diagram illustrating the relationship between the Grid Element and its Tracks, Lines, Areas and Items." src="images/grid-concepts.png" />
		<p class="caption">A diagram illustrating the relationship between the <a>grid container</a> and its tracks, lines, areas and items.
	</div>
-->

	<div class="figure">
		<amg class="figure" alt="Image: Grid Lines." src="images/grid-lines.png" />
		<p class="caption">Grid lines: Three in the block axis and four in the inline axis.
	</div>

<h3 id="grid-track-concept">
Grid Tracks and Cells</h3>

	<p>
		<dfn export>Grid track</dfn> is a generic term for a <a>grid column</a> or <a>grid row</a>&mdash;in
		other words, it is the space between two adjacent <a>grid lines</a>.
		Each <a>grid track</a> is assigned a sizing function,
		which controls how wide or tall the column or row may grow,
		and thus how far apart its bounding <a>grid lines</a> are.

	<p>
		A <dfn export>grid cell</dfn> is the similar term for the full grid&mdash;it
		is the space between two adjacent row and two adjacent column <a>grid lines</a>.
		It is the smallest unit of the grid that can be referenced when positioning <a>grid items</a>.

	<div class="example">
		<p>
			In the following example there are two columns and three rows.
			The first column is fixed at 150px.
			The second column uses flexible sizing, which is a function of the unassigned space in the Grid,
			and thus will vary as the width of the <a>grid container</a> changes.
			If the used width of the <a>grid container</a> is 200px, then the second column 50px wide.
			If the used width of the <a>grid container</a> is 100px, then the second column is 0px
			and any content positioned in the column will overflow the <a>grid container</a>.

		<pre>
&lt;style type="text/css">
	#grid {
		display: grid;
		grid-template-columns: 150px 1fr; /* two columns */
		grid-template-rows: 50px 1fr 50px /* three rows  */
	}
&lt;/style></pre>
	</div>

<h3 id="grid-line-concept">
Grid Lines</h3>

	<p>
		<dfn id='grid-line' export title='grid line|grid row line|grid column line'>Grid lines</dfn> are the horizontal and vertical dividing lines of the <a>grid</a>.
		A <a>grid line</a> exists on either side of a column or row.  
		They can be referred to by numerical index,
		or by an author-specified name.
		A <a>grid item</a> references the <a>grid lines</a> to determine its position within the <a>grid</a>
		using the <a href="#placement">grid-placement properties</a>.

	<div class="example">
		<p>
			The following two examples create three column <a>grid lines</a> and four row <a>grid lines</a>.
			The first example demonstrates how an author would position a <a>grid item</a> using <a>grid line</a> numbers.
			The second example uses explicitly named <a>grid lines</a>.

		<pre>
&lt;style type="text/css">
  #grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-rows: 50px 1fr 50px
  }

  #item1 { grid-column: 2;
           grid-column-start: 1; grid-column-end: 1; }
&lt;/style></pre>

    <pre>
&lt;style type="text/css">
  /* equivalent layout to the prior example, but using named lines */
  #grid {
    display: grid;
    grid-template-columns: 150px (item1-start) 1fr (item1-end);
    grid-template-rows: (item1-start) 50px 1fr 50px (item1-end);
  }

  #item1 {
    grid-column: item1-start / item1-end;
    grid-row: item1-start / item1-end
  }
&lt;/style></pre>
	</div>


<h3 id="grid-area-concept">
Grid Areas</h3>

	<p>
		A <dfn export>grid area</dfn> is the logical space used to lay out one or more <a>grid items</a>.
		It is bound by four <a>grid lines</a>, one on each side of the <a>grid area</a>,
		and participates in the sizing of the <a>grid tracks</a> it intersects.
		A <a>grid area</a> can be named explicitly using the 'grid-template-areas' property of the <a>grid container</a>,
		or referenced implicitly by its bounding <a>grid lines</a>.
		A <a>grid item</a> is assigned to a <a>grid area</a>
		using the <a href="#placement">grid-placement properties</a>.

	<pre class="example">
&lt;style type="text/css">
  /* using the template syntax */
  #grid  {
  display: grid;
  grid-template-areas: ". a"
                       "b a"
                       ". a";
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px
  }

  #item1 { grid-area: a }
  #item2 { grid-area: b }
  #item3 { grid-area: b }

  /* Align items 2 and 3 at different points in the Grid Area "b".  */
  /* By default, Grid Items are stretched to fit their Grid Area    */
  /* and these items would layer one over the other. */
  #item2 { align-self: head }
  #item3 { justify-self: end; align-self: foot }
&lt;/style></pre>

	<p>
		A <a>grid item</a>’s <a>grid area</a> forms the containing block into which it is laid out.
		Percentage lengths specified on a <a>grid item</a> resolve against this containing block.
		Percentages specified for 'margin-top', 'padding-top', 'margin-bottom', and 'padding-bottom' on a <a>grid item</a>
		resolve against the height of its containing block, 
		rather than the width (as for blocks).

	<p>
		<a>Grid items</a> placed into the same <a>grid area</a> do not directly affect each other's layout.
		Indirectly, a <a>grid item</a> can affect the position of a <a>grid line</a> in a column or row that uses a contents-based relative size,
		which in turn can affect the position or size of another <a>grid item</a>.

<h2 id="grid-model">
Grid Layout Box Model</h2>

<h3 id='grid-containers'>
Grid Containers: the <a value>grid</a> and ''inline-grid'' 'display' values</h3>

	<pre class='propdef'>
	Name: display
	New Values: grid | inline-grid
	</pre>

	<dl dfn-for="display" dfn-type=value>
		<dt><dfn>grid</dfn>
		<dd>
			This value causes an element to generate a block-level <a>grid container</a> box.

		<dt><dfn>inline-grid</dfn>
		<dd>
			This value causes an element to generate an inline-level <a>grid container</a> box.
	</dl>

	<p>
		A <dfn export>grid container</dfn> establishes a new <dfn export>grid formatting context</dfn> for its contents.  
		This is the same as establishing a block formatting context,
		except that grid layout is used instead of block layout: 
		floats do not intrude into the grid container, 
		and the grid container's margins do not collapse with the margins of its contents.  
		<a>Grid containers</a> form a containing block for their contents
		<a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">exactly like block containers do</a>. [[!CSS21]]
		The 'overflow' property applies to <a>grid containers</a>.


	<p>
		Grid containers are not block containers, 
		and so some properties that were designed with the assumption of block layout don't apply in the context of grid layout.  
		In particular:

	<ul>
		<li>
			all of the 'column-*' properties in the Multicol module have no effect on a grid container.

		<li>
			'float' and 'clear' have no effect on a <a>grid item</a>.
			(However, the 'float' property still affects the computed value of 'display' on children of a grid container,
			as this occurs <em title=''>before</em> <a>grid items</a> are determined.)

		<li>
			'vertical-align' has no effect on a grid item.

		<li>
			the ''::first-line'' and ''::first-letter'' pseudo-elements do not apply to <a>grid containers</a>.
	</ul>

	<p>
		If an element's specified 'display' is ''inline-grid'' 
		and the element is floated or absolutely positioned, 
		the computed value of 'display' is <a value>grid</a>.
		The table in <a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 9.7</a> is thus amended 
		to contain an additional row, 
		with ''inline-grid'' in the "Specified Value" column 
		and <a>grid</a> in the "Computed Value" column.



<h2 id="grid-items">
Grid Items</h2>

	<p>
		The contents of a <a>grid container</a> consists of zero or more <dfn export id="grid-item" title="grid item">grid items</dfn>:
		each child of a <a>grid container</a>
		becomes a <a>grid item</a>,
		and each contiguous run of text that is directly contained inside a <a>grid container</a>
		is wrapped in an anonymous <a>grid item</a>.
		However, an anonymous grid item that contains only
		<a href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white space</a>
		is not rendered, as if it were ''display:none''.

	<p>
		A <a>grid item</a> establishes a new formatting context for its contents.
		The type of this formatting context is determined by its 'display' value, as usual.
		The computed 'display' of a <a>grid item</a>
		is determined by applying the table in
		<a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 9.7</a>.
		However, grid items are grid-level boxes, not block-level boxes:
		they participate in their container's <a>grid formatting context</a>,
		not in a block formatting context.

	<div class="example">
		<p>
			Examples of grid items:
		<pre>
&lt;div style="display:grid">

	&lt;!-- grid item: block child -->
	&lt;div id="item1">block&lt;/div>

	&lt;!-- grid item: floated element; floating is ignored -->
	&lt;div id="item2" style="float: left;">float&lt;/div>

	&lt;!-- grid item: anonymous block box around inline content -->
	anonymous item 3

	&lt;!-- grid item: inline child -->
	&lt;span>
		item 4
		&lt;!-- grid items do not split around blocks -->
		&lt;div id=not-an-item>item 4&lt;/div>
		item 4
	&lt;/span>
&lt;/div></pre>
	</div>

	<p>
		Some values of 'display' trigger the generation of anonymous boxes.
		For example, a misparented ''table-cell'' child is fixed up
		by <a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">generating anonymous ''table'' and ''table-row'' elements</a> around it. [[!CSS21]]
		This fixup must occur <em>before</em> a <a>grid container</a>’s children are promoted to <a>grid items</a>.
		For example, given two contiguous child elements with ''display:table-cell'',
		an anonymous table wrapper box around them becomes the <a>grid item</a>.

	<p class='note'>
		Future display types may generate anonymous containers (e.g. ruby) or otherwise mangle the box tree (e.g. run-ins).
		It is intended that grid item determination run after these operations.

<!--
<h3 id="position-grid">
Non-children Grid Items</h3>

	<p class="issue">
		This is a proposal to create the ability to have descendants of a grid item participate in a grid layout,
		similar to the behavior defined by the Template Layout module.

	<p>
		A descendant of the grid can be pulled out of flow and participate directly in the grid
		by assigning it ''position: grid''.
		An element with ''position: grid'' is pulled out of flow and participates as a grid item
		belonging to the first ancestor with ''display: grid''.
		If the element is positioned using named lines or slots,
		it belongs to the first ancestor with ''display: grid'' that has all of the corresponding named lines/slots.
		If no such ancestor exists, the item remains in flow.

	<p class="issue">
		Alternatively, the item can just go into the first grid,
		and missing names are treated as <a value for="<grid-line>">auto</a>.
-->


<h3 id="abspos-items">
Absolutely-positioned Grid Children</h3>

	<p>
		An absolutely-positioned child element of a <a>grid container</a> does not participate directly in grid layout.
		Its static position is ???

	<p class='issue'>
		The static position is affected by the alignment properties, 
		as if it was a 0x0 thing floating around in the <a>containing block</a>.
		(Defaults to the start/start corner, since ''stretch'' can't do anything to it.)

	<p>
		If an absolutely positioned element's <a>containing block</a>
		is generated by a <a>grid container</a>,
		the <a>grid-placement properties</a> can be used to constrain it to a particular <a>grid area</a>,
		similar to how they affect regular <a>grid items</a>.
		In this case, an <a value for="<grid-line>">auto</a> value for a <a>grid-placement property</a> indicates the corresponding padding edge of the <a>grid container</a>.

	<p class='note'>
		Absolute positioning can allow an element to “skip past” intervening grid containers,
		and resolve its grid-placement properties against a grid container
		other than its closest ancestor.
		However, as in other forms of CSS layout,
		elements that are absolutely-positioned to a <a>grid container</a>
		do not take up space or otherwise participate in the layout of the grid.

<h3 id="visibility-collapse">
Collapsed Grid Items: the 'visibility' property</h3>
<!--
	<p>
		Specifying ''visibility: collapse'' on a <a>grid item</a> causes it to become a <dfn export title="collapsed grid item|collapsed">collapsed grid item</dfn>.
		This has the same effect as ''visibility: hidden'',
		except that if all the <a>grid items</a> spanning a track are <a>collapsed</a>,
		the track's intrinsic size becomes zero.
-->
	<p class='issue'>
		We want the ability to collapse grid tracks (similar to collapsing flex items or table rows/columns), but we're not sure exactly how to do it.
		Ideas welcome, please post them to the list.


<h3 id='order-property'>
Reordered Grid Items: the 'order' property</h3>

	<p>
		The 'order' property also applies to <a>grid items</a>.
		It affects their <a href="#grid-auto-flow-property">auto-placement</a> and <a href="#z-order">painting order</a>.


<h2 id='grid-definition'>
The Explicit Grid</h2>

	<p>
		The three properties 'grid-template-rows', 'grid-template-columns', and 'grid-template-areas'
		together define the <dfn export>explicit grid</dfn> of a <a>grid container</a>.
		The 'grid-template' property is a shorthand that sets all three at the same time.
		The final grid may end up larger due to <a>grid items</a> placed outside the <a>explicit grid</a>;
		in this case, any implicit tracks are sized by the 'grid-auto-rows' and 'grid-auto-columns' properties.

	<p>
		The size of the <a>explicit grid</a> is determined by the larger of 
		the number of rows/columns defined by 'grid-template-areas'
		and the number of rows/columns sized by 'grid-template-rows'/'grid-template-columns'.
		Any rows/columns defined by 'grid-template-areas' but not sized by 'grid-template-rows'/'grid-template-columns'
		take their size from the 'grid-auto-rows'/'grid-auto-columns' properties.

	<p>
		Numeric indexes in the <a>grid-placement properties</a>
		count from the edges of the <a>explicit grid</a>,
		starting from 1.
		Positive indexes count from the before/start side,
		while negative indexes count from the after/end side.

<h3 id='track-sizing'>
Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties</h3>

	<pre class='propdef'>
	Name: grid-template-columns, grid-template-rows
	Value: none | <<track-list>> | subgrid <<line-names>>*
	Initial: none
	Applies to: <a>grid containers</a>
	Inherited: no
	Percentages: n/a
	Media: visual
	Computed value: As specified, except for <a value for=grid-template-columns>auto</a> (see prose)
	</pre>

	<p>
		These properties specify, 
		as a space-separated <dfn export>track list</dfn>,
		the line names and track <a>sizing functions</a> of the <a>grid</a>.
		Each <dfn export>sizing function</dfn> can be specified as a length,
		a percentage of the <a>grid container</a>’s size,
		a measurement of the contents occupying the column or row,
		or a fraction of the free space in the grid.
		It can also be specified as a range using the ''minmax()'' notation,
		which can combine any of the previously mentioned mechanisms to define a min and max size for the column or row.

	<p>
		The 'grid-template-columns' property specifies the <a>track list</a> for the grid's columns,
		while 'grid-template-rows' specifies the <a>track list</a> for the grid's rows.
		The syntax of a <a>track list</a> is:

	<pre>
		<dfn>&lt;track-list></dfn>    = [ <<line-names>>? [ <<track-size>> | <<repeat()>> ] ]+ <<line-names>>?
		<dfn>&lt;track-size></dfn>    = minmax( <<track-breadth>> , <<track-breadth>> ) | auto | <<track-breadth>>
		<dfn>&lt;track-breadth></dfn> = <<length>> | <<percentage>> | <<flex>> | min-content | max-content
		<dfn>&lt;line-names></dfn>    = ( <<ident>>* )
	</pre>

	<p>Where:

	<dl dfn-for="grid-template-columns grid-template-rows" dfn-type=value>
		<dt><dfn><<length>></dfn>
		<dd>
			A non-negative length, as defined by CSS3 Values. [[!CSS3VAL]]

		<dt><dfn><<percentage>></dfn>
		<dd>
			A non-negative percentage, as defined by CSS3 Values. [[!CSS3VAL]]
			<<percentage>> values are relative to the measure (logical width) of the <a>grid container</a> in column <a>grid tracks</a>,
			and the extent (logical height) of the <a>grid container</a> in row <a>grid tracks</a>.
			If the measure or extent of the <a>grid container</a> is an <a href="http://www.w3.org/TR/css3-sizing/#indefinite-size">indefinite size</a>,
			<<percentage>> values relative to that size are treated as <a value for=width>auto</a>.

		<dt><dfn><<flex>></dfn>
		<dd>
			A non-negative dimension with the unit "fr".
			Each <<flex>> value takes a share of the remaining space in proportion to its value.  
			See <a href="#fr-unit">Flexible Lengths</a> for more details.

		<dt><dfn>max-content</dfn>
		<dd>
			Represents the largest <a href="http://www.w3.org/TR/css3-sizing/#max-size-contribution">max size contribution</a> 
			of the <a>grid items</a> occupying the <a>grid track</a>.

		<dt><dfn>min-content</dfn>
		<dd>
			Represents the largest <a href="http://www.w3.org/TR/css3-sizing/#min-size-contribution">min size contribution</a> 
			of the  <a>grid items</a> occupying the <a>grid track</a>.

		<dt><dfn title="minmax()">minmax(min, max)</dfn>
		<dd>
			Defines a size range
			greater than or equal to <var>min</var>
			and less than or equal to <var>max</var>.
			If <var>max</var> &lt; <var>min</var>, 
			then <var>max</var> is ignored and ''minmax(min,max)'' is treated as <var>min</var>.

		<dt><dfn>auto</dfn>
		<dd>
			Computes to ''minmax(min-content, max-content)''.
	</dl>

	<p>
		The <dfn value for="grid-template-rows grid-template-columns">none</dfn> value indicates that there is no <a>explicit grid</a>;
		any rows/columns will be implicitly generated,
		and their size will be determined by the 'grid-auto-rows' and 'grid-auto-columns' properties.

	<p>
		The <dfn value for="grid-template-rows grid-template-columns">subgrid</dfn> value indicates that the grid will align to its parent grid in that axis.
		Rather than specifying the sizes of rows/columns explicitly,
		they'll be taken from the parent grid's definition.
		If the <a>grid container</a> is not a <a>grid item</a>,
		this value computes to <a value for=grid-template-rows>none</a>.
		See the <a href="#subgrids">Subgrids</a> section for more detail.

	<div class='example'>
		<p>
			Given the following 'grid-template-columns' declaration:

		<pre>grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);</pre>

		<p>
			Five grid lines are created:

		<ol>
			<li>
				At the start edge of the <a>grid container</a>.

			<li>
				100px from the start edge of the <a>grid container</a>.

			<li>
				A distance from the previous line equal to half the <a>free space</a>
				(the width of the <a>grid container</a>, minus the width of the non-flexible <a>grid tracks</a>).

			<li>
				A distance from the previous line equal to the maximum size of any <a>grid items</a>
				belonging to the column between these two lines.

			<li>
				A distance from the previous line at least as large as the largest minimum size of any <a>grid items</a>
				belonging to the column between these two lines,
				but no larger than the other half of the <a>free space</a>.
		</ol>

		<p>
			If the non-flexible sizes
			(''100px'', ''max-content'', and ''min-content'')
			sum to larger than the <a>grid container</a>’s width,
			the final <a>grid line</a> will be a distance equal to their sum away from the start edge of the <a>grid container</a>
			(the ''1fr'' sizes both resolve to ''0'').
			If the sum is less than the <a>grid container</a>’s width,
			the final <a>grid line</a> will be exactly at the end edge of the <a>grid container</a>.
			This is true in general whenever there's at least one <<flex>> value among the <a>grid track</a> sizes.
	</div>

	<div class='example'>
		<p>
			Additional examples of valid <a>grid track</a> definitions:

		<pre>
/* examples of valid track definitions */
grid-template-rows: 1fr minmax(min-content, 1fr);
grid-template-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr));
grid-template-rows: calc(4em - 5px)</pre>
	</div>


<h4 id='named-lines'>
Named Grid Lines: the ''(<<ident>>*)'' syntax</h4>

	<p>
		While <a>grid lines</a> can always be referred to by their numerical index,
		<dfn export title="named line">named lines</dfn> 
		can make the <a>grid-placement properties</a> easier to understand and maintain.
		Lines can be explicitly named in the 'grid-template-rows' and 'grid-template-columns' properties,
		or <a href="#implicit-named-lines">implicitly named</a> by creating <a>named grid areas</a> with the 'grid-template-areas' property.

	<div class='example'>
		<p>
			For example,
			the following code gives meaningful names to all of the lines in the grid.
			Note that some of the lines have multiple names.

		<pre>&lt;style>
  #grid {
    display: grid;
    grid-template-columns: (first nav) 150px (main) 1fr (last);
    grid-template-rows: (first header) 50px (main) 1fr (footer) 50px (last);
  }
&lt;/style></pre>

		<div class="figure">
			<amg class="figure" alt="Image: Named Grid Lines." src="images/grid-named-lines.png" />
			<p class="caption">Named Grid Lines.
		</div>
	</div>

	<p class="issue">
		Consider merging grid line names with grid field names. See: <a href="http://lists.w3.org/Archives/Public/www-style/2012Sep/0047.html">http://lists.w3.org/Archives/Public/www-style/2012Sep/0047.html</a> for proposal.


<h4 id='repeat-notation'>
Repeating Rows and Columns: the ''repeat()'' notation</h4>

	<p>
		The ''repeat()'' notation represents a repeated fragment of the <a>track list</a>.
		This is just a syntactic shorthand that allows writing a large number of columns or rows that exhibit a recurring pattern in a more compact form.
		The syntax of the ''repeat()'' notation is:

	<pre class='prod'><dfn>repeat()</dfn> = repeat( <<positive-integer>> , [ <<line-names>>? <<track-size>> ]+ <<line-names>>? )</pre>

	<p>
		The first argument specifies the number of repetitions.
		The second argument is a <a>track list</a>,
		which is repeated that number of times.
		The ''repeat()'' notation cannot be nested;
		doing so makes the declaration invalid.

	<div class='example'>
		<p>
			This example shows two equivalent ways of writing the same grid definition.
			Both ways produce a grid with a single row and four "main" columns, each 250px wide,
			surrounded by 10px "gutter" columns.

		<pre>
&lt;style>
  #grid {
    display: grid;
    grid-template-columns: 10px (col-start) 250px (col-end) 
                           10px (col-start) 250px (col-end) 
                           10px (col-start) 250px (col-end) 
                           10px (col-start) 250px (col-end) 10px;
    grid-template-rows: 1fr;
  }

  /* Equivalent definition. */
  #grid {
    display: grid;
    grid-template-columns: repeat(4, 10px (col-start) 250px (col-end)) 10px;
    grid-template-rows: 1fr;
  }
&lt;/style></pre>
	</div>

<h4 id='fr-unit'>
Flexible Lengths: the ''fr'' unit</h4>

	<p>
		A <dfn export>flexible length</dfn> or <dfn><<flex>></dfn> is a dimension with the ''fr'' unit,
		which represents a fraction of the <a>free space</a> in the <a>grid container</a>.

	<p>
		The distribution of <a>free space</a> occurs after all non-flexible <a>sizing functions</a> have reached their maximum.
		The total size of such rows or columns is subtracted from the available space, yielding the <dfn export>free space</dfn>,
		which is then divided among the flex-sized rows and columns in proportion to their flex factor.

	<p class='note'>
		Flexible lengths in a <a>track list</a> work similarly to flexible lengths with a zero base size in [[CSS3-FLEXBOX]].

	<p>
		Each column or row's share of the <a>free space</a> can be computed as the column or row's
		<code>&lt;flex> * &lt;free space> / &lt;sum of all flex factors></code>.
		For the purpose of this calculation,
		a flexible length in the <var>min</var> position of a ''minmax()'' function is treated as ''0'' (an inflexible length).

	<p>
		When the available space is infinite
		(which happens when the <a>grid container</a>’s width or height is <a>indefinite</a>),
		flex-sized <a>grid tracks</a> are sized to their contents while retaining their respective proportions.
		The used size of each flex-sized <a>grid track</a> is computed by 
		determining the 'max-content' size of each flex-sized <a>grid track</a> 
		and dividing that size by the respective flex factor
		to determine a <dfn export>hypothetical 1fr size</dfn>.
		The maximum of those is used as the ''1fr'' length,
		which is then multiplied by each <a>grid track</a>’s flex factor to determine its final size.


<h4 id="subgrids">
Subgrids: the <a value for='grid-template-rows'>subgrid</a> keyword</h4>

	<p>
		A <a>grid item</a> can itself be a <a>grid container</a> by giving it ''display: grid''; 
		in this case the layout of its contents will be independent of the layout of the grid it participates in.

	<p>
		In some cases it might be necessary for the contents of multiple <a>grid items</a> to align to each other.
		A <a>grid container</a> that is itself a <a>grid item</a>
		can defer the definition of its rows or columns to its parent <a>grid container</a>
		by using the <a value for='grid-template-rows'>subgrid</a> keyword in 'grid-template-rows' and/or 'grid-template-columns',
		making it a <dfn export>subgrid</dfn> in that dimension.
		In this case, the <a>grid items</a> of the <a>subgrid</a>
		participate in sizing the <a>grid</a> of the parent <a>grid container</a>,
		allowing the contents of both grids to align.

	<p>
		A <a>subgrid</a> behaves just like a normal <a>grid container</a> except that:

	<ul>
		<li>
			The number of explicit tracks is given by its <a>grid span</a>,
			rather than by 'grid-template-rows'/'grid-template-columns'.
			If the grid has an <a>automatic grid span</a>,
			the number of tracks is determined by the size of the <a>subgrid</a>’s <a>implicit grid</a>.

		<li>
			The <a>grid-placement properties</a> of the <a>subgrid</a>’s <a>grid items</a>
			are scoped to the lines covered by the subgrid.
			E.g., numeric indices count starting from the first line of the subgrid
			rather than the first line of the parent grid.

		<li>
			The <a>subgrid</a>'s own grid items participate in the sizing of its parent grid and are aligned to it.
			In this process, the sum of the item's margin, padding, and borders are applied as an extra layer of margin to the items at those edges.

		<li>
			The <a>subgrid</a> is always stretched;
			the 'align-self'/'justify-self' properties on it are ignored.
			Any specified width/height constraints are also ignored.

		<li>
			The <a>subgrid</a>’s <a>explicit grid</a> is always aligned with the corresponding section of the parent <a>grid</a>;
			the 'align-content'/'justify-content' properties on it are ignored.

		<li>
			Explicit named lines can also be specified together with the <a value for=grid-template-rows>subgrid</a> keyword;
			these names apply to the corresponding lines taken from the parent <a>grid</a>.
			If the <a>subgrid</a> has an explicit <a>grid span</a>,
			any names for lines beyond the span are ignored.
			If the <a>subgrid</a> has an explicit <a>grid position</a> as well as an explicit <a>grid span</a>,
			it also automatically receives the names of the lines that it covers in its parent <a>grid</a>.
	</ul>

	<div class="example">
		<p>
			For example, suppose we have a form consisting of a list of inputs with labels:
		<pre>
&lt;ul>
  &lt;li>&lt;label>Name:&lt;/label> &lt;input name=fn>
  &lt;li>&lt;label>Address:&lt;/label> &lt;input name=address>
  &lt;li>&lt;label>Phone:&lt;/label> &lt;input name=phone>
&lt;/ul></pre>

		<p>
			We want the labels and inputs to align, and we want to style each list item with a border.
			This can be accomplished with subgrid layout:

		<pre>
ul {
	display: grid;
	grid-auto-flow: rows;
	grid-template-columns: auto 1fr;
}
li {
	display: subgrid;
	margin: 0.5em;
	border: solid;
	padding: 0.5em;
}
label {
	grid-column: 1;
}
input {
	grid-column: 2;
}</pre>
	</div>

	<p class='issue'>
		Do we want to allow ''repeat()'' when specifying named lines for subgrids?

<h4 id='resolved-track-list'>
Resolved Values</h4>

	<p>
		The <a href="http://www.w3.org/TR/cssom/#resolved-values">resolved value</a> of the 'grid-template-rows' and 'grid-template-columns' properties is the used value,
		serialized as follows:

	<ul>
		<li>
			Every track listed,
			whether implicitly or explicitly created.

		<li>
			Every track size given as a length in pixels, 
			regardless of sizing function.

		<li>
			A contiguous run of two or more tracks that have the same size and associated line names
			may be serialized with the ''repeat()'' notation.
	</ul>

	<div class="example">
		<pre>
&lt;style>
  #grid {
    width: 500px;
    grid-template-columns:
      (a)     auto
      (b)     minmax(min-content, 1fr)
      (b c d) repeat(2, (e) 40px)
              repeat(5, auto);
  }
&lt;/style>
&lt;div id="grid">
  &lt;div style="grid-column-start:1; width:50px">&lt;/div>
  &lt;div style="grid-column-start:9; width:50px">&lt;/div>
&lt;/div>
&lt;script>
  var gridElement = document.getElementById("grid");
  getComputedStyle(gridElement).gridDefinitionColumns;
  // (a) 50px (b) 320px (b c d) repeat(2, (e) 40px) repeat(4, 0px) 50px
&lt;/script></pre>
	</div>

	<p class='issue'>
		In general, resolved values are the computed values,
		except for a small list of legacy 2.1 properties.
		Do we really want these properties to return the used value here?
		<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16906">Bug about this.</a>


<h3 id="grid-template-areas-property">
Named Areas: the 'grid-template-areas' property</h3>

	<pre class='propdef'>
	Name: grid-template-areas
	Value: none | <<string>>+
	Initial: none
	Applies to: <a>grid containers</a>
	Inherited: no
	Percentages: n/a
	Media: visual
	Computed value: specified value
	</pre>

	<p>
		This property specifies <dfn export title="named grid area">named grid areas</dfn>,
		which are not associated with any particular <a>grid item</a>,
		but can be referenced from the <a>grid-placement properties</a>.
		The syntax of the 'grid-template-areas' property also provides a visualization
		of the structure of the <a>grid</a>,
		making the overall layout of the <a>grid container</a> easier to understand.

	<p>
		Values have the following meanings:

	<dl dfn-for="grid-template-areas" dfn-type=value>
		<dt><dfn>none</dfn>
		<dd>
			The <a>grid container</a> doesn't define any <a>named grid areas</a>.

		<dt><dfn><<string>>+</dfn>
		<dd>
			A row is created for every separate string listed for the 'grid-template-areas' property,
			and a column is created for each identifier or period ("." U+002E) in the string,
			when the string's contents are parsed as CSS.

			<ul>
				<li>
					A period represents an unnamed area in the <a>grid container</a>.

				<li>
					An identifier creates a <a>named grid area</a> with the identifier as its name.
					Multiple identical identifiers
					create a single <a>named grid area</a> that spans the corresponding <a>grid cells</a>.
			</ul>

			<p>
				All strings must have the same number of columns,
				or else the declaration is invalid.
				If a <a>named grid area</a> spans multiple <a>grid cells</a>,
				but those cells do not form a single filled-in rectangle,
				the declaration is invalid.
				If a string's contents, when parsed as CSS,
				contain anything other than whitespace, identifiers, or periods,
				the declaration is invalid.

			<p class='note'>
				Non-rectangular or disconnected regions may be permitted in a future version of this module.
	</dl>


	<div class='example'>
		<p>
			In this example, the 'grid-template-areas' property is used to create a page layout 
			where areas are defined for header content (<code>head</code>),
			navigational content (<code>nav</code>),
			footer content (<code>foot</code>),
			and main content (<code>main</code>). 
			Accordingly, the template creates three rows and two columns,
			with four <a>named grid areas</a>.
			The <code>head</code> area spans both columns and the first row of the grid. 

		<pre>
&lt;style type="text/css">
  #grid {
    display: grid;
    grid-template-areas: "head head"
                         "nav  main"
                         "foot .   "
  }
  #grid > header { grid-area: head; }
  #grid > nav    { grid-area: nav; }
  #grid > main   { grid-area: main; }
  #grid > footer { grid-area: foot; }
&lt;/style></pre>
	</div>

<h4 id="implicit-named-lines">
Implicit Named Lines</h4>

	<p>
		The 'grid-template-areas' property creates <dfn export title="implicit named line">implicit named lines</dfn> from the <a>named grid areas</a> in the template.
		For each <a>named grid area</a> <var>foo</var>, four <a>implicit named lines</a> are created:
		two named ''<var>foo</var>-start'', naming the row-start and column-start lines of the <a>named grid area</a>,
		and two named ''<var>foo</var>-end'', naming the row-end and column-end lines of the <a>named grid area</a>.

	<p>
		These named lines behave just like any other named line,
		except that they do not appear in the value of 'grid-template-rows'/'grid-template-columns'.
		Even if an explicit line of the same name is defined,
		the implicit named lines are just more lines with the same name.

<h3 id='explicit-grid-shorthand'>
Grid Definition Shorthand: the 'grid-template' property</h3>

	<pre class='propdef'>
	Name: grid-template
	Value: none | <<'grid-template-columns'>> / <<'grid-template-rows'>> |<br> [ <<track-list>> / ]? [ <<line-names>>? <<string>> [ <<track-size>> <<line-names>> ]? ]+
	Initial: see individual properties
	Applies to: <a>grid containers</a>
	Inherited: see individual properties
	Percentages: see individual properties
	Media: visual
	Computed value: see individual properties
	</pre>

	<p>
		The 'grid-template' property is a shorthand for setting
		'grid-template-columns', 'grid-template-rows', and 'grid-template-areas' in a single declaration.
		It has three distinct syntax forms:

	<dl dfn-for=grid-template dfn-type=value>
		<dt><dfn>none</dfn>
		<dd>
			Sets all three properties to their initial values (<a value for=grid-template-rows>none</a>).

		<dt><dfn><<'grid-template-columns'>> / <<'grid-template-rows'>></dfn>
		<dd>
			Sets 'grid-template-columns' and 'grid-template-rows' to the specified values, respectively,
			and sets 'grid-template-areas' to <a value for=grid-template-areas>none</a>.

			<div class='example'>
				<pre>grid-template: auto 1fr auto / auto 1fr;</pre>

				<p>
					is equivalent to

				<pre>
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr;
grid-template-areas: none;</pre>
			</div>

		<dt><dfn>[ <<track-list>> / ]?<br>
				[ <<line-names>>? <<string>> [ <<track-size>> <<line-names>> ]? ]+</dfn>
		<dd>
			<ul>
				<li>
					Sets 'grid-template-columns' to the track listing specified before the slash
					(or <a value for=grid-template-columns>none</a>, if not specified).

				<li>
					Sets 'grid-template-areas' to the strings listed after the slash.

				<li>
					Sets 'grid-template-rows' to the <<track-size>>s following each string
					(filling in <a value for=grid-template-rows>auto</a> for any missing sizes),
					and splicing in the named lines defined before/after each size.
			</ul>

			<p>
				This syntax allows the author to align track names and sizes inline with their respective grid areas.

			<div class='example'>
				<pre>
grid-template: auto 1fr auto / 
  (header-top) "a   a   a"     (header-bottom)
    (main-top) "b   b   b" 1fr (main-bottom);</pre>

				<p>
					is equivalent to

				<pre>
grid-template-columns: auto 1fr auto;
grid-template-rows: (header-top) auto (header-bottom main-top) 1fr (main-bottom);
grid-template-areas: "a a a" 
                     "b b b";</pre>
            </div>
    </dl>


<h2 id='implicit-grids'>
The Implicit Grid</h2>

	<p>
		While 'grid-template' and its longhand properties define the <a>explicit grid</a>,
		<a>grid items</a> can be positioned outside of these bounds.
		This causes the <a>grid container</a> to generate <a>implicit grid tracks</a>,
		forming the <dfn export>implicit grid</dfn>.
		The 'grid-auto-rows' and 'grid-auto-columns' properties size these <a>implicit grid tracks</a>.

	<p>
		The 'grid-auto-flow' property controls auto-placement of <a>grid items</a>
		without an explicit position.
		Once the <a>explicit grid</a> is filled
		(or if there is no <a>explicit grid</a>)
		auto-placement will also cause the generation of <a>implicit grid tracks</a>.
		The 'grid-auto' shorthand can be used to set 'grid-auto-flow', 'grid-auto-rows', and 'grid-auto-columns' together.

<h3 id='auto-tracks'>
Sizing Auto-generated Rows and Columns: the 'grid-auto-rows' and 'grid-auto-columns' properties</h3>

	<pre class='propdef'>
	Name: grid-auto-columns, grid-auto-rows
	Value: <<track-size>>
	Initial: auto
	Applies to: <a>grid containers</a>
	Inherited: no
	Percentages: see <a href="#track-sizing">Track Sizing</a>
	Media: visual
	Computed value: see <a href="#track-sizing">Track Sizing</a>
	</pre>

	<p>
		If a grid item is positioned into a row or column that is not explicitly sized
		by 'grid-template-rows' or 'grid-template-columns',
		<dfn export title="implicit grid track|implicit grid row|implicit grid column">implicit grid tracks</dfn> are created to hold it.
		This can happen either by explicitly positioning into a row or column that is out of range,
		or by the <a>auto-placement algorithm</a> creating additional rows or columns.
		The 'grid-auto-columns' and 'grid-auto-rows' properties specify the size of such implicitly-created tracks.

	<div class='example'>
		<p>
			This example illustrates the sizing of <a>implicit grid tracks</a>.
			Note that <a>grid item</a> B is positioned on <a>grid line</a> 5,
			which automatically creates <strong>four</strong> <a>implicit grid columns</a>.
			However, only two of them
			(the first and the last) 
			are occupied by any <a>grid items</a>,
			so the two empty <a>grid tracks</a>
			collapse to zero width.

		<div class="figure">
			<p>
				<amg alt="" src="images/implicit-columns-and-rows.png" />

			<p class="caption">
				A Grid with an implicit row and four implicit columns, two of which are zero-sized.
		</div>

		<pre>
&lt;style type="text/css">
	#grid { 
		display: grid; 
		grid-template-columns: 20px; 
		grid-template-rows: 20px }
	#A { grid-column: 1;          grid-row: 1; }
	#B { grid-column: 5;          grid-row: 1 / span 2; }
	#C { grid-column: 1 / span 2; grid-row: 2; }
&lt;/style>

&lt;div id="grid">
	&lt;div id="A">A&lt;/div>
	&lt;div id="B">B&lt;/div>
	&lt;div id="C">C&lt;/div>
&lt;/div></pre>
	</div>

<h3 id="grid-auto-flow-property">
Automatic Placement: the 'grid-auto-flow' property</h3>

	<pre class='propdef'>
	Name: grid-auto-flow
	Value: [ rows | columns ] && dense?
	Initial: rows
	Applies to: <a>grid containers</a>
	Inherited: no
	Percentages: n/a
	Media: visual
	Computed value: specified value
	</pre>

	<p>
		<a>Grid items</a> that aren't explicitly placed are are automatically placed into an unoccupied space in the <a>grid container</a>.
		The 'grid-auto-flow' property controls the direction in which the search for unoccupied space takes place, 
		and whether rows or columns are added as needed to accommodate the content.

	<dl dfn-for=grid-auto-flow dfn-type=value>
		<dt><dfn>rows</dfn>
		<dd>
			The auto-placement algorithm places items
			by filling each row in turn,
			adding new rows as necessary.

		<dt><dfn>columns</dfn>
		<dd>
			The auto-placement algorithm places items
			by filling each column in turn,
			adding new columns as necessary.

		<dt><dfn>dense</dfn>
		<dd>
			If specified, the auto-placement algorithm uses a "dense" packing algorithm,
			which attempts to fill in holes in the grid if smaller items come up later.
			(By default, the auto-placement algorithm is "sparse",
			permanently skipping spaces that it can't fill with the curren grid item.)

			Note: This may cause items to appear out-of-order.
	</dl>

	<p class='issue'>
		Add a value for stacking items on top of each other?

	<p class='issue'>
		Add a value for flowing items together into a single slot?

	<p>
		Auto-placement takes <a>grid items</a> in 'order'-modified document order.

	<div class='example'>
		<p>
			In the following example, there are three columns, each auto-sized to their contents.
			No rows are explicitly defined.  
			The 'grid-auto-flow' property is <a value for=grid-auto-flow>rows</a>
			which instructs the grid to search across its three columns starting with the first row, 
			then the next, 
			adding rows as needed until sufficient space is located to accommodate the position of any auto-placed <a>grid item</a>.

		<div class="figure">
			<p>
				<amg alt="Image: A form arranged using automatic placement." src="images/auto-placed-form.png" />

			<p class="caption">A form arranged using automatic placement.
		</div>

		<pre>
&lt;style type="text/css">
  form {
    display: grid;
    /* Define three columns, all content-sized,
       and name the corresponding lines. */
    grid-template-columns: (labels) auto (controls) auto (oversized) auto;
    grid-auto-flow: rows;
  }
  form > label {
    /* Place all labels in the "labels" column and 
       automatically find the next available row. */
    grid-column: labels;
    grid-row: auto;
  }
  form > input, form > select {
    /* Place all controls in the "controls" column and 
       automatically find the next available row. */
    grid-column: controls;
    grid-row: auto;
  }

  #department {
    /* Auto place this item in the "oversized" column 
       in the first row where an area that spans three rows 
       won't overlap other explicitly placed items or areas 
       or any items automatically placed prior to this area. */
    grid-column: oversized;
    grid-row: span 3;
  }

  /* Place all the buttons of the form 
     in the explicitly defined grid area. */
  #buttons {
    grid-row: auto;

    /* Ensure the button area spans the entire grid element 
       in the row axis. */
    grid-column: 1 / -1;
    text-align: end;
  }
&lt;/style>
&lt;form>
  &lt;label for="firstname">First name:&lt;/label>
  &lt;input type="text" id="firstname" name="firstname" />
  &lt;label for="lastname">Last name:&lt;/label>
  &lt;input type="text" id="lastname" name="lastname" />
  &lt;label for="address">Address:&lt;/label>
  &lt;input type="text" id="address" name="address" />
  &lt;label for="address2">Address 2:&lt;/label>
  &lt;input type="text" id="address2" name="address2" />
  &lt;label for="city">City:&lt;/label>
  &lt;input type="text" id="city" name="city" />
  &lt;label for="state">State:&lt;/label>
  &lt;select type="text" id="state" name="state">
    &lt;option value="WA">Washington&lt;/option>
  &lt;/select>
  &lt;label for="zip">Zip:&lt;/label>
  &lt;input type="text" id="zip" name="zip" />

  &lt;div id="department">
    &lt;label for="department">Department:&lt;/label>
    &lt;select id="department" name="department" multiple>
      &lt;option value="finance">Finance&lt;/option>
      &lt;option value="humanresources">Human Resources&lt;/option>
      &lt;option value="marketing">Marketing&lt;/option>
    &lt;/select>
  &lt;/div>

  &lt;div id="buttons">
    &lt;button id="cancel">Cancel&lt;/button>
    &lt;button id="back">Back&lt;/button>
    &lt;button id="next">Next&lt;/button>
  &lt;/div>
&lt;/form></pre>
	</div>

<h4 id='auto-placement-algo'>
Automatic Grid Item Placement Algorithm</h4>
	<p>
		The following summarizes the <dfn export>auto-placement algorithm</dfn> for <a>Grid items</a>:

	<ol>
		<li>
			For each <a>Grid item</a> with a major-axis position that is not <a value for="<grid-line>">auto</a> in source order:
			<ol>
				<li>Resolve the <a value for="<grid-line>">auto</a> value for its minor-axis position to the minimum value that ensures this item's <a>grid area</a> will not overlap the <a>grid area</a> of any explicitly or previously auto-placed item.
			</ol>

		<li>
			Determine the maximum number of minor tracks based on maximum track number implied by the 'grid-template-areas' property, the 'grid-template-rows' and 'grid-template-columns' properties, the position and size of any explicitly-defined <a>grid items</a>, or any minor-axis <a value for="<grid-line>">auto</a> values resolved by the step 1 of the algorithm. Note that this step must be run prior to the layout algorithm.
		<li>
			The <dfn export>auto-placement cursor</dfn> defines the current "insertion point" in the grid.
			Position the <a>auto-placement cursor</a> at position 1,1 in the grid.
		<li>
			For each <a>grid item</a> having an unresolved value of <a value for="<grid-line>">auto</a>, in source order:
			<ol>
				<li>
					If the minor-axis position is not <a value for="<grid-line>">auto</a>, then:
					<ol>
						<li>
							Set the minor-axis position of the cursor to be equal to the minor-axis position of the <a>grid item</a>.
						<li>
							Increment the <a>auto-placement cursor</a> along the major-axis until a value is found where the <a>grid item</a> does not overlap the <a>grid area</a> of any other <a>grid item</a> (creating new major-axis tracks as necessary).
					</ol>

				<li>
					If the minor and major-axis positions are both <a value for="<grid-line>">auto</a>, then:
					<ol>
						<li>
							Increment the minor-axis position of the <a>auto-placement cursor</a> until this item's <a>grid area</a> does not overlap another item's <a>grid area</a>, or causes the <a>grid area</a> to exceed the maximum number of minor-axis tracks previously determined in step 2.
						<li>
							If this item's position is still unresolved after the previous step, then increment the cursor's major-axis position and reset the minor-axis position to 1 (creating new major-axis tracks if necessary).
					</ol>
			</ol>
	</ol>

	<div class='issue'>
		Two mistakes in the algorithm currently:

		<ol>
			<li>Step 2 needs to take into account the major-axis spans of every item as well.  Otherwise, extra-wide single items can create new columns late in auto-placement.

			<li>Step 4 needs to verify that placement also doesn't cause the item to generate new columns.  Currently, it only verifies that placement won't overlap anything else.
		</ol>
	</div>

	<p class='issue'>
		Edit the algorithm to allow for dense packing.

<h3 id='implicit-grid-shorthand'>
Implicit Grid Shorthand: the 'grid-auto' property</h3>

	<pre class='propdef'>
	Name: grid-auto
	Value: <<'grid-auto-flow'>> || [ <<'grid-auto-columns'>> [ / <<'grid-auto-rows'>> ]? ]
	Initial: see individual properties
	Applies to: <a>grid containers</a>
	Inherited: see individual properties
	Percentages: see individual properties
	Media: visual
	Computed value: see individual properties
	</pre>

	<p>
		The 'grid-auto' property is a shorthand that sets
		all three of 'grid-auto-rows', 'grid-auto-columns', and 'grid-auto-flow' in a single declaration.
		If <<'grid-auto-rows'>> value is omitted,
		it is set to the value specified for 'grid-auto-columns'.
		Other omitted values are set to their initial values.

	<div class='example'>
		<p>For example, ''grid-auto: 1fr;'' is equivalent to
		<pre>
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
grid-auto-flow: rows;</pre>
		<p>Similarly, ''grid-auto: columns 1fr / auto'' is equivalent to
		<pre>
grid-auto-columns: 1fr;
grid-auto-rows: auto;
grid-auto-flow: columns;</pre>
	</div>

<h2 id="placement">
Placing Grid Items</h2>

	<p class='issue'>
		Put in "common uses" section, like 'flex' has, to describe what you would use 'grid-area' for, etc.

<h3 id='line-placement'>
Line-based Placement: the 'grid-row-start', 'grid-column-start', 'grid-row-end', and 'grid-column-end' properties</h3>

	<pre class='propdef'>
	Name: grid-row-start, grid-column-start, grid-row-end, grid-column-end
	Value: <<grid-line>>
	Initial: auto
	Applies to: <a>grid items</a>
	Inherited: no
	Percentages: n/a
	Media: visual
	Computed value: specified value (almost)
	</pre>
	<tablee>

	<pre>
		<dfn for="grid-row-start grid-column-start grid-row-end grid-column-end"><<grid-line>></dfn> = 
		  auto |
		  <<ident>> |
		  [ <<integer>> && <<ident>>? ] | 
		  [ span &amp;&amp; [ <<integer>> || <<ident>> ] ]
	</pre>

	<p>
		The 'grid-row-start', 'grid-column-start', 'grid-row-end', and 'grid-column-end' properties
		(collectively, the <dfn export title="grid-placement property">grid-placement properties</dfn>)
		determine a <a>grid item</a>’s <a>placement</a> by specifying, respectively,
		the <a>block-start</a>, <a>inline-start</a>, <a>block-end</a>, and <a>inline-end</a>
		<a>grid lines</a> of a <a>grid item</a>’s <a>grid area</a>.

	<p>
		A <a>grid item</a>’s <dfn export>placement</dfn> consists of both a <dfn export>grid position</dfn>
		(which can be either <dfn export title="definite grid position">definite</dfn> or <dfn export title="automatic grid position">automatic</dfn>)
		and a <dfn export>grid span</dfn>
		(which also can be either <dfn export title="definite grid span">definite</dfn> or <dfn export title="automatic grid span">automatic</dfn>).
		The <a>grid position</a> indicates the item’s location in the <a>grid</a>.
		The <a>grid span</a> indicates how many <a>grid tracks</a> the <a>grid item</a> occupies.
		An <a>automatic grid position</a> triggers <a title="auto-placement algorithm">auto-placement</a>.
		An <a>automatic grid span</a> causes a <a>subgrid</a> to take its <a>grid span</a> from the size of its <a>implicit grid</a>.
		(See <a href="#subgrids">Subgrids</a>, above.)

	<p>
		Each <a>grid-placement property</a> contributes a line, a span, or nothing (automatic)
		to the item's row <a>placement</a> or column <a>placement</a>.
		Values have the following meanings:

	<dl dfn-for="<grid-line>" dfn-type=value>
		<dt><dfn id='grid-placement-slot'><<ident>></dfn>
		<dd>
			If there is a <a>named grid area</a> with the specified name,
			contributes a line to the <a>grid item</a>’s <a>placement</a>
			by specifying the line at the corresponding edge of that <a>named grid area</a>.

			<p>
				Otherwise, if there is a <a>named line</a> with the specified name,
				contributes a line to the <a>grid item</a>’s <a>placement</a>
				by specifying the first line of that name.

			<p>
				Otherwise,
				the property contributes nothing (just as if <a value for="<grid-line>">auto</a> were specified).

		<dt><dfn id='grid-placement-int'><<integer>> && <<ident>>?</dfn>
		<dd>
			Contributes a line to the <a>grid item</a>’s <a>placement</a>
			by specifying the <var>N</var>th <a>grid line</a>.
			If a negative integer is given,
			it instead counts in reverse,
			starting from the end edge of the <a>explicit grid</a>.

			<p>
				If a name is given as an <<ident>>,
				only lines with that name are counted.
				(If no line with that name exists,
				it instead specifies the first grid line;
				or the last, if the <<integer>> is negative.
				If not enough lines of that name exist,
				it specifies the <em>last</em> such named line;
				or the first, if the <<integer>> is negative.)

			<p>
				If the <<integer>> is omitted, it defaults to ''1''.
				A value of zero makes the declaration invalid.

		<dt><dfn id='grid-placement-span-int'>span &amp;&amp; [ <<integer> || <<ident>> ]</var></dfn>
		<dd>
			Contributes a <a>grid span</a> to the <a>grid item</a>’s <a>placement</a>
			by specifying that the corresponding edge of the item’s <a>grid area</a> 
			is <var>N</var> grid lines from the opposite edge of the item’s <a>grid area</a>.

			<p>
				If a name is given as an <<ident>>,
				only lines with that name are counted.
				(If no line with that name exists,
				the name is ignored.
				If not enough lines of that name exist,
				it spans to the last such named line in the spanning direction.)

			<p>
				If the <<integer>> is omitted, it defaults to ''1''.
				Negative integers or zero are invalid.

		<dt><dfn id='grid-placement-auto'>auto</dfn>
		<dd>
			The property contributes nothing to the <a>grid item</a>’s <a>placement</a>.
	</dl>

	<p>
		If 'grid-row-end'/'grid-column-end' specifies a line at or before that specified by 'grid-row-start'/'grid-column-start',
		it instead contributes nothing.

	<p>
		In each dimension (row or column), if the corresponding pair of properties contributed:

	<dl>
		<dt>two lines
		<dt>one line and one span
		<dd>
			The item has a <a>definite grid position</a> and <a>definite grid span</a>.

		<dt>one line and no span
		<dd>
			If the item is a <a>subgrid</a> in this dimension, it has an <a>definite grid position</a> and <a>automatic grid span</a>.
			Otherwise, it has an <a>definite grid position</a> and a <a>definite grid span</a> of one.

		<dt>no lines and one span
		<dt>two spans
		<dd>
			The item has an <a>automatic grid position</a> and an <a>definite grid span</a>.
			If two spans were specified, the <a>end</a> span is ignored.
			If the <a>grid span</a> is for a named line,
			it's instead treated as a <a>definite grid span</a> of one.

		<dt>no lines and no spans
		<dd>
			If the item is a <a>subgrid</a> in this dimension, it has an <a>automatic grid position</a> and <a>automatic grid span</a>.
			Otherwise, it has an <a>automatic grid position</a> and a <a>definite grid span</a> of one.
	</dl>

	<div class='example'>
		<p>
			Given a single-row, 8-column grid and the following 9 named lines:

		<pre>			
1  2  3  4  5  6  7  8  9
+--+--+--+--+--+--+--+--+
|  |  |  |  |  |  |  |  |
A  B  C  A  B  C  A  B  C
|  |  |  |  |  |  |  |  |
+--+--+--+--+--+--+--+--+</pre>

		<p>
			The following declarations place the grid item between the lines indicated by index:

		<pre>
grid-column-start: 4; grid-column-end: auto;
/* Line 4 to line 5 */

grid-column-start: auto; grid-column-end: 6;
/* Line 5 to line 6 */

grid-column-start: 'C'; grid-column-end: 'C';
/* Line 3 to line 9 */

grid-column-start: 'C'; grid-column-end: span 'C';
/* Line 3 to line 6 */

grid-column-start: span 'C'; grid-column-end: 'C';
/* Line 6 to line 9 */

grid-column-start: span 'C'; grid-column-end: span 'C';
/* Error: both properties compute to <a value for="<grid-line>">auto</a> */

grid-column-start: 5; grid-column-end: 'C';
/* Line 5 to line 9 */

grid-column-start: 5; grid-column-end: span 'C';
/* Line 5 to line 6 */

grid-column-start: 8; grid-column-end: 8;
/* Error: line 8 to line 9 */

grid-column-start: 'B' 2; grid-column-end: span 1;
/* Line 5 to line 6 */</pre>
	</div>

<h3 id='placement-shorthands'>
Placement Shorthands: the 'grid-column', 'grid-row', and 'grid-area' properties</h3>

	<pre class='propdef'>
	Name: grid-column, grid-row
	Value: <<grid-line>> [ / <<grid-line>> ]?
	Initial: see individual properties
	Applies to: <a>grid items</a>
	Inherited: see individual properties
	Percentages: see individual properties
	Media: visual
	Computed value: see individual properties
	</pre>

	<p>
		The 'grid-row' and 'grid-column' properties are shorthands for 'grid-row-start'/'grid-row-end' and 'grid-column-start'/'grid-column-end', respectively.

	<p>
		If two <<grid-line>> values are specified,
		the 'grid-row-start'/'grid-column-start' longhand is set to the value before the slash,
		and the 'grid-row-end'/'grid-column-end' longhand is set to the value after the slash.
	
	<p>
		When the second value is omitted,
		if the first value is an <<ident>>,
		the 'grid-row-end'/'grid-column-end' longhand is also set to that <<ident>>;
		otherwise, it is set to <a value for="<grid-line>">auto</a>.


	<pre class='propdef'>
	Name: grid-area
	Value: <<grid-line>> [ / <<grid-line>> ]{0,3}
	Initial: see individual properties
	Applies to: <a>grid items</a>
	Inherited: see individual properties
	Percentages: see individual properties
	Media: visual
	Computed value: see individual properties
	</pre>

	<p>
		If four <<grid-line>> values are specified,
		'grid-row-start' is set to the first value,
		'grid-column-start' is set to the second value,
		'grid-row-end' is set to the third value,
		and 'grid-column-end' is set to the fourth value.

	<p>
		When 'grid-column-end' is omitted,
		if 'grid-column-start' is an <<ident>>,
		'grid-column-end' is set to that <<ident>>;
		otherwise, it is set to <a value for="<grid-line>">auto</a>.

	<p>
		When 'grid-row-end' is omitted,
		if 'grid-row-start' is an <<ident>>,
		'grid-row-end' is set to that <<ident>>;
		otherwise, it is set to <a value for="<grid-line>">auto</a>.

	<p>
		When 'grid-column-start' is omitted,
		if 'grid-row-start' is an <<ident>>,
		all four longhands are set to that value.
		Otherwise, it is set to <a value for="<grid-line>">auto</a>.

	<p class='note'>
		The resolution order for this shorthand is row-start/column-start/row-end/column-end,
		which goes CCW for LTR pages,
		the opposite direction of the related 4-edge properties using physical directions, like 'margin'.

	<p class='issue'>
		Should 'grid-area' be 'grid-field'?


<h2 id='gutters'>
Gutters</h2>

	<div class='issue'>
		We should have some way of defining "gutter" columns/rows,
		where content can never go
		(unless it's spanning across two tracks).
		Otherwise, auto-flow is completely broken when you manually add gutters,
		and it's just much less convenient to add them manually.

		<a href="http://lists.w3.org/Archives/Public/www-style/2013May/0057.html">Lea's email on the subject.</a>
		See <a href="http://lists.w3.org/Archives/Public/www-style/2013May/0077.html">our proposal</a>
		and <a href="http://lists.w3.org/Archives/Public/www-style/2012Mar/0611.html">Tab's email on the subject</a>.
	</div>



<h2 id='alignment'>
Alignment</h2>

	<p>
		After a <a>grid container</a>’s <a>grid tracks</a> have been sized,
		and the dimensions of all <a>grid items</a> are finalized, 
		<a>grid items</a> can be aligned within their <a>grid areas</a>.

	<p>
		The 'margin' properties can be used to align items in a manner similar to, 
		but more powerful than, 
		what margins can do in block layout.
		<a>Grid items</a> also respect the alignment properties from the Box Alignment spec,
		which allow easy keyword-based alignment of items in both the <a>row axis</a> and <a>column axis</a>.

	<p>
		By default,
		<a>grid items</a> stretch to fill their <a>grid area</a>.
		However, if 'justify-self' or 'align-self' compute to a value other than ''stretch''
		or margins are <a value for="margin">auto</a>,
		<a>grid items</a> will auto-size to fit their contents.


<h3 id='auto-margins'>
Aligning with <a value for="margin">auto</a> margins</h3>

	<p>
		<em>This section is non-normative.  
			The normative definition of how margins affect grid items is in the <a href="#layout-algorithm">Grid Layout Algorithm</a> section.</em>

	<p>
		Auto margins on <a>grid items</a> have an effect very similar to auto margins in block flow:

	<ul>
		<li>
			During calculations of <a>grid track</a> sizes, auto margins are treated as ''0''.

		<li>
			Auto margins absorb positive free space
			prior to alignment via the alignment properties
			(defined in the next sections).

		<li>
			Overflowing elements ignore their auto margins and overflow in the <a>end</a> directions.
	</ul>

	<p class='note'>
		Note that, if free space is distributed to auto margins, 
		the alignment properties will have no effect in that dimension
		because the margins will have stolen all the free space
		left over after sizing.

	<div class='example'>
		TODO: EXAMPLE HERE
	</div>


<h3 id='row-align'>
Row-axis Alignment: the 'justify-self' and 'justify-items' properties</h3>

	<p>
		<a>Grid items</a> can be aligned in the inline dimension 
		by using the 'justify-self' property on the <a>grid item</a>
		or 'justify-items' property on the <a>grid container</a>,
		as defined in [[!CSS3-ALIGN]].

	<div class='example'>
		For example,
		for an English document,
		the inline axis is horizontal,
		and so the 'justify-*' properties align the <a>grid items</a> horizontally.

		<pre>
TODO: provide example
		</pre>
	</div>




<h3 id='column-align'>
Column-axis Alignment: the 'align-self' and 'align-items' properties</h3>

	<p>
		<a>Grid items</a> can also be aligned in the block dimension
		(perpendicular to the inline dimension)
		by using the 'align-self' property on the <a>grid item</a>
		or 'align-items' property on the <a>grid container</a>,
		as defined in [[!CSS3-ALIGN]].

<h3 id='z-order'>
Z-axis Ordering: the 'z-index' property</h3>


	<p>
		<a>Grid items</a> can overlap when they are positioned into intersecting <a>grid areas</a>.
		<a>Grid item</a> boxes in non-intersecting areas can also overlap because of negative margins or positioning.

	<p>
		When <a>grid items</a> overlap, 
		the <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">'z-index'</a> property provides control over the drawing order of <a>grid items</a>.
		<a>Grid items</a> paint <a href="http://www.w3.org/TR/css3-flexbox/#painting">exactly the same as flex items</a> [[!CSS3-FLEXBOX]]:
		they use 'order'-modified document order,
		and 'z-index' values other than <a value for=z-index>auto</a> create a stacking context even if 'position' is ''static''.

	<p class='note'>
		Note: Descendants that are positioned outside a grid item still participate in any stacking context established by the grid item.

	<div class="example">
		<p>
			The following diagram shows several overlapping grid items,
			with a combination of implicit source order
			and explicit 'z-index'
			used to control their stacking order.

		<div class="figure">
			<p>
				<amg alt="Image: Drawing order controlled by z-index and source order." src="images/drawing-order.png" />

			<p class="caption">
				Drawing order controlled by z-index and source order.
		</div>

		<pre>
&lt;style type="text/css">
  #grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr 
  }
  #A { grid-column: 1 / span 2; grid-row: 2; align-self: foot }
  #B { grid-column: 1; grid-row: 1; z-index: 10 }
  #C { grid-column: 2; grid-row: 1; align-self: head; margin-left: -20px }
  #D { grid-column: 2; grid-row: 2; justify-self: end; align-self: head }
  #E { grid-column: 1 / span 2; grid-row: 1 / span 2;
       z-index: 5; justify-self: center; align-self: center; }
&lt;/style>

&lt;div id="grid">
  &lt;div id="A">A&lt;/div>
  &lt;div id="B">B&lt;/div>
  &lt;div id="C">C&lt;/div>
  &lt;div id="D">D&lt;/div>
  &lt;div id="E">E&lt;/div>
&lt;/div></pre>
	</div>

<h3 id='grid-baselines'>
Grid Baselines</h3>

	<p>
		The baselines of a <a>grid container</a> are determined as follows:

	<ol>
		<li>
			If any of the <a>grid items</a> whose areas intersect the <a>grid container</a>’s first row/column
			<a href="#baseline-participation">participate in baseline alignment</a>,
			the grid container's baseline is the baseline of those <a>grid items</a>.

		<li>
			Otherwise, if the grid container has at least one <a>grid item</a> whose area intersects the first row/column,
			and the first such <a>grid item</a> (in <a>'order'-modified grid order</a>) has a baseline
			parallel to the relevant axis,
			the grid container's baseline is that baseline.

		<li>
			Otherwise, the grid container's baseline is <a href="http://www.w3.org/TR/css3-writing-modes/#inline-alignment">synthesized</a> 
			from the first item's (in <a>'order'-modified grid order</a>) content box, 
			or, failing that, from the grid container's content box.
	</ol>

	<p>
		A <a>grid item</a> <dfn export id="baseline-participation">participates in baseline alignment</dfn> in a particular dimension
		if its value for 'align-self' or 'justify-self', as appropriate, is ''baseline'' 
		and its inline axis is parallel to that dimension.

	<p>
		<dfn export>'order'-modified grid order</dfn> is the order in which
		<a>grid items</a> are encountered when traversing the grid's <a>grid cells</a>,
		in row-major order if calculating the inline-axis baseline,
		or in column-major order if calculating the block-axis baseline.
		If two items are encountered at the same time,
		they are taken in 'order'-modified document order.

	<p>
		When calculating the baseline according to the above rules,
		if the box contributing a baseline has an 'overflow' value that allows scrolling,
		the box must be treated as being in its initial scroll position
		for the purpose of determining its baseline.

	<p>
		When <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">determining the baseline of a table cell</a>,
		a grid container provides a baseline just as a line box or table-row does. [[!CSS21]]



<h2 id='layout-algorithm'>
Grid Layout Algorithm</h2>

<h3 id='algo-terms'>
Definition of Terms for use in Calculating Grid Track Sizes</h3>

	<dl>
		<dt><dfn id="AvailableSpace-definition">AvailableSpace</dfn>
		<dd>
			The <a>grid container</a>’s content box size in the applicable dimension.

		<dt><dfn id="MaxTrackSizingFunction-definition">MaxTrackSizingFunction</dfn>
		<dd>
			One of the <<track-breadth>> sizing functions assigned as the maximum breadth of a <a>Grid track</a>.

		<dt><dfn id="MinTrackSizingFunction-definition">MinTrackSizingFunction</dfn>
		<dd>
			One of the <<track-breadth>> sizing functions assigned as the minimum breadth of a <a>Grid track</a>.

		<dt><dfn id="RemainingSpace-definition">RemainingSpace</dfn>
		<dd>
			The max of zero and the AvailableSpace less the sum of all <a>Grid track</a> UsedBreadth values. This is undefined if AvailableSpace is undefined (i.e. the Grid element is shrink-to-fit or the height is auto.)

		<dt><dfn id="SpanCount-definition">SpanCount</dfn>
		<dd>
			The number of <a>Grid tracks</a> crossed by a <a>Grid item</a> in the applicable dimension.
	</dl>


<h3>
Grid Track Sizing Algorithm</h3>
	<ol>
		<li>Call ComputedUsedBreadthOfGridTracks for Grid Columns to resolve their logical width.
		<li>Call ComputedUsedBreadthOfGridTracks for Grid Rows to resolve their logical height.  The logical width of Grid Columns from the prior step is used in the formatting of <a>Grid items</a> in content-sized Grid Rows to determine their required height.
		<li>If the minimum content size of any <a>Grid item</a> has changed based on available height for the <a>Grid item</a> as computed in step 2, adjust the min content size of the <a>Grid item</a> and restart the <a>Grid track</a> Sizing algorithm (once only).
	</ol>

				<dl>
	<dt id="function-ComputeUsedBreadthOfGridTracks">ComputeUsedBreadthOfGridTracks

	<dd>
		<p>
			This is the core <a>Grid track</a> sizing algorithm.  It is run for Grid columns and Grid rows.  The goal of the function is to ensure:

		<ol>
			<li>That each <a>Grid track</a> satisfies its MinTrackSizingFunction
			<li>That each <a>Grid track</a> grows from the breadth which satisfied its MinTrackSizingFunction to a breadth which satisfies its MaxTrackSizingFunction, subject to RemainingSpace.
		</ol>
		<p>
			For the purposes of resolving the breadth that satisfies the MinTrackSizingFunction and MaxTrackSizingFunction, each <a>Grid track</a> falls into one of three categories:

		<ol>
			<li>A percentage or length value which can be trivially resolved.
			<li>A min-content or max-content value which will be resolved based on the measurements of the <a>Grid items</a> which cover the <a>Grid track</a>.
			<li>A flexible length which can only be resolved after determining the RemainingSpace in the <a>grid container</a>’s content box after having considered all contributions from the prior two categories of <a>Grid tracks</a>.
		</ol>
		<p>
			The breadths which satisfy MinTrackSizingFunctions and MaxTrackSizingFunctions for the first category of <a>Grid tracks</a> are resolved in step 1 during <a>Grid track</a> variable initialization.
			The breadths which satisfy the MinTrackSizingFunctions and the MaxTrackSizingFunctions for the second category of content-sized <a>Grid tracks</a> are resolved in step 2.  At the end of step 2, the first goal of ComputeUsedBreadthOfGridTracks function has been satisfied:
			the UsedBreadth variable of each GridTrack now satisfies its MinTrackSizingFunction. The MaxBreadth variable for each <a>Grid track</a> now contains the resolved value for its MaxTrackSizingFunction.

		<p>
			In step 3, the second goal of this function is satisfied as each (non-flex-sized) <a>Grid track</a>
			attempts to grow from the UsedBreadth value to the MaxBreadth value, subject to RemainingSpace.

		<p>
			Finally in step 4, the third category of flex-sized <a>Grid tracks</a> can be resolved using what is now the RemainingSpace having updated the UsedBreadth of each <a>Grid track</a> at the end of step 3.

		<dl>
			<dt id="function-ComputeUsedBreadthOfGridTracks-inputs">Inputs

			<dd>
				<ul>
					<li>GridTracks: The set of <a>Grid tracks</a> for which the <a>Grid track</a> variable UsedBreadth will be computed.
				</ul>

		</dl>
		<dl>
			<dt id="function-ComputeUsedBreadthOfGridTracks-algorithm">Algorithm

			<dd class="pseudo-code">
				<ol>
					<li>Initialize per <a>Grid track</a> variables
						<ol>
							<li>For each <a>Grid track</a> t in GridTracks
								<ol>
									<li>If t.MinTrackSizingFunction is a percentage or length, then t.UsedBreadth = resolved length
									<li>If t.MinTrackSizingFunction is min-content, max-content, or a flexible length, then t.UsedBreadth = 0
									<li>If t.MaxTrackSizingFunction is percentage or length, then t.MaxBreadth = resolved length
										<ol>
											<li>If the resolved length of the MaxTrackSizingFunction is less than the MinTrackSizingFunction, t.MaxBreadth = t.UsedBreadth.
										</ol>

									<li>If t.MaxTrackSizingFunction is min-content, or max-content, then t.MaxBreadth = Infinity
									<li>If t.MaxTrackSizingFunction is a flexible length, then t.MaxBreadth = t.UsedBreadth
									<li>t.SpanGroupInWhichMaxBreadthWasMadeFinite = null
								</ol>

						</ol>

					<li>Resolve content-based TrackSizingFunctions
						<ol>
							<li>Call ResolveContentBasedTrackSizingFunctions, with arguments:
								<ul>
									<li>GridItems: All <a>Grid items</a>.
								</ul>

						</ol>

					<li>Grow all <a>Grid tracks</a> in GridTracks from their UsedBreadth up to their MaxBreadth value until RemainingSpace is exhausted.
						<ol>
							<li>If RemainingSpace is defined
								<ol>
									<li>Iterate over all GridTracks and assign UsedBreadth to UpdatedTrackBreadth
									<li>Call DistributeSpaceToTracks, with arguments:
										<ul>
											<li>SpaceToDistribute: RemainingSpace
											<li>TrackGrowthConstraint: A function which given a <a>Grid track</a> returns its MaxBreadth.
											<li>TracksForGrowth: All <a>Grid tracks</a>
											<li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: The empty set.
											<li>CurrentBreadth: A function which given a <a>Grid track</a> returns the UsedBreadth.
										</ul>

									<li>Iterate over all GridTracks and assign UpdatedTrackBreadth to UsedBreadth
								</ol>

							<li>Else
								<ol>
									<li>For each <a>Grid track</a> t in GridTracks
										<ol>
											<li>t.UsedBreadth = t.MaxBreadth
										</ol>

								</ol>

						</ol>

					<li>Grow all <a>Grid tracks</a> having a flexible length as the MaxTrackSizingFunction
						<ol>
							<li>normalizedFlexBreadth = 0
							<li>If RemainingSpace is defined
								<ol>
									<li>normalizedFlexBreadth = Call ComputeNormalizedFlexBreadth, with arguments:
										<ul>
											<li>GridTracks: GridTracks
											<li>SpaceToFill: AvailableSpace
										</ul>

								</ol>

							<li>Else
								<ol>
									<li>For each <a>Grid track</a> t in GridTracks having a flexible length as the MaxTrackSizingFunction
										<ol>
											<li>normalizedFlexBreadth = Max( normalizedFlexBreadth, t.UsedBreadth / t.MaxTrackSizingFunction.FlexValue )

										</ol>

									<li>For each <a>Grid item</a> i, which crosses a set of GridTracks s
										<ol>
											<li>itemNormalizedFlexBreadth = Call ComputeNormalizedFlexBreadth, with arguments:
												<ul>
													<li>GridTracks: s
													<li>SpaceToFill: max-content size of i
												</ul>

											<li>normalizedFlexBreadth = Max( normalizedFlexBreadth, itemNormalizedFlexBreadth )

										</ol>

								</ol>

							<li>For each <a>Grid track</a> t in GridTracks
								<ol>
									<li>t.UsedBreadth = Max( t.UsedBreadth, normalizedFlexBreadth * t.MaxTrackSizingFunction.FlexValue )
								</ol>

						</ol>

				</ol>

		</dl>

<!--End Function Definition: ComputeUsedBreadthOfGridTracks-->
</dl>

<dl>
	<dt id="function-ResolveContentBasedTrackSizingFunctions">ResolveContentBasedTrackSizingFunctions

	<dd>
		<p>
			The purpose of this function is to resolve the contribution that each <a>Grid item</a> makes to any min-content or max-content TrackSizingFunctions for the <a>Grid tracks</a> it covers. There are four permutations: min-content or max-content in either the MinTrackSizingFunction or MaxTrackSizingFunction. MinTrackSizingFunctions are resolved before MaxTrackSizingFunctions, and min-content contributions are resolved before max-content contributions. Note that when resolving min-content contributions they may grow tracks that have either min-content or max-content keywords, as seen in 3.a.i and 3.b.i below.

		<p class="issue">
			Currently this algorithm embodies several heuristics which regulate the growth of spanning <a>Grid items</a> to accommodate certain use cases. (E.g. the game example in Figures 2 and 3 above.) These heuristics should be a normative part of this specification to ensure interoperability. To the extent additional use cases can be identified that cannot be satisfied by following the current heuristics, the normative algorithm can be updated, or additional mechanisms can be introduced for fine-grained control of content-based TrackSizingFunction.

		<dl>
			<dt id="function-ResolveContentBasedTrackSizingFunctions-inputs">Inputs

			<dd>
				<ul>
					<li>GridItems: The set of <a>Grid items</a> for which min-content or max-content keywords should be resolved.
				</ul>

		</dl>
		<dl>
			<dt id="function-ResolveContentBasedTrackSizingFunctions-algorithm">Algorithm

			<dd class="pseudo-code">
				<ol>
					<li>Filter all <a>Grid items</a> into a set g, such that each <a>Grid item</a> has either a SpanCount of 1 or does not cross a flex-sized <a>Grid track</a>
					<li>Group all <a>Grid items</a> in set g by their SpanCount ascending
					<li>For each group of <a>Grid items</a>
						<ol>
							<li>Resolve content-based MinTrackSizingFunctions
								<ol>
									<li>Call ResolveContentBasedTrackSizingFunctionsForItems, with arguments:
										<ul>
											<li>GridItems: All <a>Grid items</a> in the current group.
											<li>AdditionalSpaceRequiredByItem: A function which given a <a>Grid item</a> returns the min-content size of that <a>Grid item</a> less the summed UsedBreadth of all <a>Grid tracks</a> it covers.
											<li>TrackGrowthConstraint: A function which given a <a>Grid track</a> returns its MaxBreadth.
											<li>TracksForGrowth: A function which given a <a>Grid item</a> returns the set of <a>Grid tracks</a> covered by that <a>Grid item</a> that have a min-content or max-content MinTrackSizingFunction.
											<li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A function which given a set of <a>Grid tracks</a> returns the subset of <a>Grid tracks</a> having a min-content or max-content MaxTrackSizingFunction.  If that set is the empty set, return the input set instead.
											<li>Accumulator: A function which given a <a>Grid track</a> returns a reference to its UsedBreadth variable.
										</ul>

									<li>Call ResolveContentBasedTrackSizingFunctionsForItems, with arguments:
										<ul>
											<li>GridItems: All <a>Grid items</a> in the current group.
											<li>AdditionalSpaceRequiredByItem: A function which given a <a>Grid item</a> returns the max-content size of that <a>Grid item</a> less the summed UsedBreadth of all <a>Grid tracks</a> it covers.
											<li>TrackGrowthConstraint: A function which given a <a>Grid track</a> returns its MaxBreadth.
											<li>TracksForGrowth: A function which given a <a>Grid item</a> returns the set of <a>Grid tracks</a> covered by that <a>Grid item</a> that have a max-content MinTrackSizingFunction.
											<li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A function which given a set of <a>Grid tracks</a> returns the subset of <a>Grid tracks</a> having a max-content MaxTrackSizingFunction.  If that set is the empty set, return the input set instead.
											<li>Accumulator: A function which given a <a>Grid track</a> returns a reference to its UsedBreadth variable.
										</ul>

								</ol>

							<li>Resolve content-based MaxTrackSizingFunctions
								<ol>
									<li>Call ResolveContentBasedTrackSizingFunctionsForItems, with arguments:
										<ul>
											<li>GridItems: All <a>Grid items</a> in the current group.
											<li>AdditionalSpaceRequiredByItem: A function which given a <a>Grid item</a> returns the min-content size of that <a>Grid item</a> less the summed MaxBreadth (unless the MaxBreadth is infinite, in which case use the UsedBreadth) of all <a>Grid tracks</a> it covers.
											<li>TrackGrowthConstraint: A function which given a <a>Grid track</a> returns its MaxBreadth.
											<li>TracksForGrowth: A function which given a <a>Grid item</a> returns the set of <a>Grid tracks</a> covered by that <a>Grid item</a> that have a min-content or max-content MaxTrackSizingFunction.
											<li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: The identity function.
											<li>Accumulator: A function which given a <a>Grid track</a> returns a reference to its MaxBreadth variable.
										</ul>

									<li>Call ResolveContentBasedTrackSizingFunctionsForItems, with arguments:
										<ul>
											<li>GridItems: All <a>Grid items</a> in the current group.
											<li>AdditionalSpaceRequiredByItem: A function which given a <a>Grid item</a> returns the max-content size of that <a>Grid item</a> less the summed MaxBreadth (unless the MaxBreadth is infinite, in which case use the UsedBreadth) of all <a>Grid tracks</a> it covers.
											<li>TrackGrowthConstraint: A function which given a <a>Grid track</a> returns infinity if the <a>Grid track</a>’s SpanGroupInWhichMaxBreadthWasMadeFinite is equal to the current group; otherwise return the <a>Grid track</a>’s MaxBreadth.
											<li>TracksForGrowth: A function which given a <a>Grid item</a> returns the set of <a>Grid tracks</a> covered by that <a>Grid item</a> that have a max-content MaxTrackSizingFunction.
											<li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: The identity function.
											<li>Accumulator: A function which given a <a>Grid track</a> returns a reference to its MaxBreadth variable.
										</ul>

								</ol>

						</ol>

					<li>For each <a>Grid track</a> t from the set of all <a>Grid tracks</a>
						<ol>
							<li>If t.MaxBreadth == infinity then t.MaxBreadth = t.UsedBreadth
						</ol>

				</ol>

		</dl>

<!--End Function Definition: ResolveContentBasedTrackSizingFunctions-->
</dl>

<dl>
	<dt id="function-ResolveContentBasedTrackSizingFunctionsForItems">ResolveContentBasedTrackSizingFunctionsForItems

	<dd>
		<p>
			The above function, ResolveContentBasedTrackSizingFunctions, groups <a>Grid items</a> based on the number of <a>Grid tracks</a> each <a>Grid item</a> spanned. ResolveContentBasedTrackSizingFunctionsForItems, below, then calls DistributeSpaceToTracks for each <a>Grid item</a> in the
			group to determine how much each <a>Grid item</a> needs to grow the <a>Grid tracks</a> that it covers.  The maximum contribution made by any <a>Grid item</a> is accumulated into a temporary, per-<a>Grid track</a> variable,
			and at the end of the group, the space is recorded into a final <a>Grid track</a> variable as determined by the Accumulator function.

		<dl>
			<dt id="function-ResolveContentBasedTrackSizingFunctionsForItems-inputs">Inputs

			<dd>
				<ul>
					<li>GridItems: The set of <a>Grid items</a> which will contribute to the growth of <a>Grid tracks</a>.
					<li>AdditionalSpaceRequiredByItem: A function which returns the difference between either the min-content or max-content for the <a>Grid item</a> and the space already allocated to the <a>Grid tracks</a> covered by the <a>Grid item</a> in earlier phases of the algorithm.
					<li>TrackGrowthConstraint: A function which given a <a>Grid track</a> returns a value that limits the amount by which it may be grown by the <a>Grid items</a> which cover it.
					<li>TracksForGrowth: A function which given a <a>Grid item</a> identifies the set of <a>Grid tracks</a> to be grown in this phase of the algorithm.
					<li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A function which identifies a subset of <a>Grid tracks</a> from TracksForGrowth that may be grown in this phase of the algorithm after all <a>Grid tracks</a> in the TracksForGrowth set have already grown to their TrackGrowthConstraint.
					<li>Accumulator: A function which given a <a>Grid track</a> returns the variable used to accumulate the results of the UpdatedTrackBreadth from DistributeSpaceToTracks.
				</ul>

		</dl>
		<dl>
			<dt id="function-ResolveContentBasedTrackSizingFunctionsForItems-algorithm">Algorithm

			<dd class="pseudo-code">
				<ol>
					<li>For each <a>Grid track</a> t
						<ol>
							<li>t.UpdatedTrackBreadth = Accumulator( t )
						</ol>

					<li>For each <a>Grid item</a> i in GridItems
						<ol>
							<li>Call DistributeSpaceToTracks, with arguments:
								<ul>
									<li>SpaceToDistribute: AdditionalSpaceRequiredByItem( i )
									<li>TrackGrowthConstraint: TrackGrowthConstraint
									<li>TracksForGrowth: TracksForGrowth( i )
									<li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: SubsetOfTracksForGrowthBeyondTrackGrowthConstraint( TracksForGrowth( i ) )
									<li>CurrentBreadth: A function which given a <a>Grid track</a> returns the UsedBreadth of the <a>Grid track</a> if Accumulator returns infinity; otherwise the value of the Accumulator is returned.
								</ul>

						</ol>

					<li>For each <a>Grid track</a> t
						<ol>
							<li>If Accumulator( t ) == infinity and t.UpdatedTrackBreadth != infinity
								<ol>
									<li>t.SpanGroupInWhichMaxBreadthWasMadeFinite = GridItems
								</ol>

							<li>Accumulator( t ) = t.UpdatedTrackBreadth
						</ol>

				</ol>

		</dl>

<!--End Function Definition: ResolveContentBasedTrackSizingFunctionsForItems-->
</dl>

<dl>
	<dt id="function-DistributeSpaceToTracks">DistributeSpaceToTracks

	<dd>
		<p>
			Ensures that for each <a>Grid track</a> in RecipientTracks, a value will be computed, UpdatedTrackBreadth, that represents the <a>Grid track</a>’s share of SpaceToDistribute.

		<p>
			There are two parts to this function.  The first for loop in step 2 is giving each <a>Grid track</a> an equal share of the space, but without exceeding their TrackGrowthConstraint values.
			Because there are different MaxBreadths assigned to the different <a>Grid tracks</a>, the first loop can result in their uneven growth.

		<p>
			If the first loop completes having grown every <a>Grid track</a> to its TrackGrowthConstraint, and there is still SpaceToDistribute, then  SubsetOfTracksForGrowthBeyondTrackGrowthConstraint are further grown equally until SpaceToDistribute is exhausted.

		<p>
			Note that <a>Grid tracks</a> considered by this function may have a TrackGrowthConstraint equal to Infinity, which signals that these tracks have not yet been grown by a <a>Grid item</a>. These tracks can therefore be grown without exceeding the TrackGrowthConstraint of the track. By only growing tracks up to their TrackGrowthConstraint value, we can ensure that the grid remains "tight" - that is, that track breadth is as close to the content size of the <a>Grid items</a> inside as possible. Only once all <a>Grid tracks</a> have a CurrentBreadth equal to a TrackGrowthConstraint do we move to the second for loop and grow tracks further, thereby making the <a>grid container</a> less tight.

		<dl>
			<dt id="function-DistributeSpaceToTracks-inputs">Inputs

			<dd>
				<ul>
					<li>SpaceToDistribute: A length to be distributed among the supplied set of <a>Grid tracks</a>.
					<li>TrackGrowthConstraint: A function which given a <a>Grid track</a> returns the maximum breadth of the track, unless the track is in the SubsetOfTracksForGrowthBeyoundTrackGrowthConstraint.
					<li>TracksForGrowth: A set of <a>Grid tracks</a> to be grown up to their TrackGrowthConstraint while SpaceToDistribute remains.
					<li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A subset of <a>Grid tracks</a> from TracksForGrowth that may be grown beyond their TrackGrowthConstraint after all <a>Grid tracks</a> in the TracksForGrowth set have already grown to their TrackGrowthConstraint if there is remaining SpaceToDistribute.
					<li>CurrentBreadth: A function which given a <a>Grid track</a> returns a value to use as a starting point from which to grow this track.
				</ul>

		</dl>
		<dl>
			<dt id="function-DistributeSpaceToTracks-algorithm">Algorithm

			<dd class="pseudo-code">
				<ol>
					<li>Sort TracksForGrowth by TrackGrowthConstraint( t ) - CurrentBreadth( t ) ascending (where t is an element in the RecipientTrack set).
					<li>For i = 0 to TracksForGrowth.length - 1
						<ol>
							<li>t = TracksForGrowth[i]
							<li>share = Min ((SpaceToDistribute / ( TracksForGrowth.length - i )), (TrackGrowthConstraint( t ) - CurrentBreadth( t )))
							<li>t.TempBreadth = CurrentBreadth( t ) + share
							<li>SpaceToDistribute -= share
						</ol>

					<li>If SpaceToDistribute > 0
						<ol>
							<li>Let tracks = SubsetOfTracksForGrowthBeyondTrackGrowthConstraint( TracksForGrowth )
							<li>For i = 0 to tracks.length - 1
								<ol>
									<li>t = tracks[i]
									<li>share = SpaceToDistribute / ( tracks.length - i )
									<li>t.TempBreadth += share
									<li>SpaceToDistribute -= share
								</ol>

						</ol>

					<li>For each <a>Grid track</a> t in TracksForGrowth
						<ol>
							<li>If t.UpdatedTrackBreadth == infinity
								<ol>
									<li>t.UpdatedTrackBreadth = t.TempBreadth
								</ol>

							<li>Else
								<ol>
									<li>t.UpdatedTrackBreadth = Max( t.UpdatedTrackBreadth, t.TempBreadth )
								</ol>

						</ol>

				</ol>

		</dl>

<!--End Function Definition: DistributeSpaceToTracks-->
</dl>


<dl>
	<dt id="function-CalculateNormalizedFlexBreadth">CalculateNormalizedFlexBreadth

	<dd>
		This method computes a ''1fr'' value, referred to as the NormalizedFlexBreadth, for a set of <a>Grid tracks</a>.  The value computed will ensure that when the NormalizedFlexBreadth is multiplied by the flex factors associated with GridTracks, that the UsedBreadths of GridTracks will increase by an amount equal to the maximum of zero and the specified SpaceToFill less the sum of the current UsedBreadths.
		<dl>
			<dt id="function-CalculateNormalizedFlexBreadth-inputs">
				Inputs

			<dd>
				<ul>
					<li>GridTracks: The set of <a>Grid tracks</a> whose flex sizing functions are considered for the purposes of a computing a NormalizedFlexBreadth that will cause GridTracks to fill SpaceToFill.
					<li>SpaceToFill: The space to be filled by GridTracks.
				</ul>

		</dl>
		<dl>
			<dt id="function-CalculateNormalizedFlexBreadth-returns">Returns

			<dd>
				<ul>
					<li>The 1fr value required by GridTracks to fill SpaceToFill.
				</ul>

		</dl>
		<dl>
			<dt id="function-CalculateNormalizedFlexBreadth-algorithm">Algorithm

			<dd class="pseudo-code">
				<ol>
					<li>allocatedSpace = the sum of the UsedBreadth for each <a>Grid track</a> in GridTracks
					<li>flexTracks = the subset of GridTracks whose MaxTrackSizingFunction is a flexible length
					<li>For each <a>Grid track</a> t in flexTracks
						<ol>
							<li>t.NormalizedFlexValue = t.UsedBreadth / t.MaxTrackSizingFunction.FractionValue
						</ol>

					<li>Sort flexTracks by their NormalizedFlexValue ascending
					<li>spaceNeededFromFlexTracks = SpaceToFill - allocatedSpace
					<li>currentBandFractionBreadth = accumulatedFractions = 0
					<li>For each <a>Grid track</a> t in flexTracks
						<ol>
							<li>If t.NormalizedFlexValue > currentBandFractionBreadth
								<ol>
									<li>If t.NormalizedFlexValue * accumulatedFractions > spaceNeededFromFlexTracks then break from for loop
									<li>currentBandFractionBreadth = t.NormalizedFlexValue
								</ol>

							<li>accumulatedFractions += t.MaxTrackSizingFunction.FractionValue
							<li>spaceNeededFromFlexTracks += t.UsedBreadth
						</ol>

					<li>return spaceNeededFromFlexTracks / accumulatedFractions
				</ol>

		</dl>
	</dl>

<h3 id='shrink-to-fit'>
Defining the Shrink-to-fit Behavior of Grid Elements</h3>

	<p>
		The <a href="http://www.w3.org/TR/css3-box/#shrink-to-fit">CSS3 Box Model</a> defines the shrink-to-fit behavior of an element as min(max(preferred minimum width, available width), preferred width), with available width defined in the Box Model spec. Accordingly, for the <a>grid container</a> we define the preferred minimum width as the sum of the UsedBreadths of the <a>Grid tracks</a> just before step 3 in ComputeUsedBreadthOfGridTracks, and the preferred width as the sum of the UsedBreadths of the <a>Grid tracks</a> after the entire track sizing algorithm has been run with infinite space.


<h2 id='pagination'>
Fragmenting Grid Layout</h2>

	<p class='issue'>
		Fill this in.

<h2 class="no-num">
Acknowledgements</h2>
	<p>
		This specification is made possible by input from Erik Anderson, Rossen Atanassov, Arron Eicholz, Sylvain Galineau, Markus Mielke, John Jansen, Chris Jones, Kathy Kam, Veljko Miljanic, Peter Salas, Christian Stockwell, Eugene Veselov, and the CSS Working Group members. Thanks to Eliot Graff for editorial input.

<h2 class="no-num" id="changes">
Changes</h2>

	<p>
		The following significant changes were made since the
		<a href="http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/">2 April 2013 Working Draft</a>.

	<ul>
		<li>Percentages are no longer resolved like they are in table layout.
		<li><a href="#auto-margins">Margin alignment</a> now matches <a href="http://www.w3.org/TR/css3-flexbox">Flexbox</a> and <a href="http://www.w3.org/TR/css3-align">Box Alignment</a>.
		<li>Renamed all the <a href="#placement">placement properties</a> and <a href="#grid-definition">grid-defining properties</a>.
		<li>Added the 'grid-template' shorthand for all the grid-defining properties.
		<li>Refined <a href="#abspos-items">definitions of absolutely-positioned elements</a> whose containing block is a grid container.
		<li>Marked <a href="#visibility-collapse">grid row/column collapsing</a> as an open issue.
		<li>Changed the syntax of <a href="#named-lines">named lines</a> to use parentheses and identifiers rather than strings.
		<li>Removed the "none" value from 'grid-auto-flow', turning auto-placement on by default so that grid items by default don't stack on top of each other.
		<li>Made named grid areas <a href="#implict-named-lines">imply named grid lines</a>.
		<li>Added the 'grid-auto' shorthand.
		<li>Added an option for dense packing to 'grid-auto-flow'.
		<li>Redesigned ''subgrid'' feature.
	</ul>