Mercurial > drafts / file revision

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

 <pre class='metadata'>

 Status: ED

 Work Status: Refining

 Shortname: css-grid

 Level: 1

 Group: csswg

 ED: https://drafts.csswg.org/css-grid/

 TR: http://www.w3.org/TR/css-grid-1/

 Previous version: http://www.w3.org/TR/2015/WD-css-grid-1-20150917/

 Previous version: http://www.w3.org/TR/2015/WD-css-grid-1-20150806/

 Previous version: http://www.w3.org/TR/2015/WD-css-grid-1-20150317/

 Previous version: http://www.w3.org/TR/2014/WD-css-grid-1-20140513/

 Previous version: http://www.w3.org/TR/2014/WD-css-grid-1-20140123/

 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/

 Editor: Tab Atkins Jr., Google, http://www.xanthir.com/contact/

 Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact

 Editor: Rossen Atanassov, Microsoft, [email protected]

 Former editor: Alex Mogilevsky, Microsoft Corporation, [email protected]

 Former editor: Phil Cupp, Microsoft Corporation, [email protected]

 Issue Tracking: Disposition of Comments https://drafts.csswg.org/css-grid-1/issues

 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 predefined flexible or fixed-size layout grid.

 Ignored Terms: containing block, <positive-integer>, <ident>, auto, grid-*-start, grid-*-end, flex factor, flex factors, block formatting context, grid-auto-position, min size property, max size property

 Ignored Vars: A, B, C, size-contribution, track-sizes, extra-space

 Link Defaults: css21 (property) margin/min-height/max-height/min-width/max-width, css-align-3 (dfn) alignment container/alignment subject/box alignment properties, css-align-3 (value) stretch/baseline, css-position-3 (property) left, css-position-3 (property) position, css-writing-modes-3 (dfn) start/end

 At Risk: the ''grid-template-rows/subgrid'' value of 'grid-template-columns' and 'grid-template-rows', and its component parts individually

 </pre>

 <pre class="link-defaults">

 spec:css-break-3; type:dfn; text:fragment

 </pre>

 <style type="text/css">

 .example {

 	clear:both

 }

 .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

 }

 dd:last-child {

 	margin-bottom: 0;

 }

 dl.phase {

 	padding-left: .5em;

 	border-left: .5em #e0e0e0 solid;

 }

 #grid-property-breakdown tr:nth-child(3) td {

 	width: 25%;

 	border-style: solid;

 }

 </style>

 <h2 id='intro'>

 Introduction and Overview</h2>

 	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,

 	as well as defining the relative size, position, and painting order

 	for the parts of a control built from HTML primitives.

 	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 similar to positioned elements.

 	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>

 	<figure class="sidefigure">

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

 		<figcaption>Application layout example requiring horizontal and vertical alignment.</figcaption>

 	</figure>

 	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.

 	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

 	into <a>grid areas</a> defined by the intersection of 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>

 	<figure class="sidefigure">

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

 		<figcaption>Five grid items arranged according to content size and available space.</figcaption>

 	</figure>

 	<figure class="sidefigure">

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

 		<figcaption>Growth in the grid due to an increase in available space.</figcaption>

 	</figure>

 	Grid layout can be used to intelligently reflow elements within a webpage.

 	Figure 2 represents a game with five major components 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>

 	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.

 	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>.

 	<div class="example">

 		<pre class="lang-css">

 		#grid {

 			/**

 			 * Two columns:

 			 *  1. the first sized to content,

 			 *  2. 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 [3])

 			 *

 			 * Three rows:

 			 *  3. the first sized to content,

 			 *  4. the middle row receives the remaining space

 			 *     (but is never smaller than the minimum height

 			 *      of the board or stats areas)

 			 *  5. the last sized to content.

 			 */

 			display: grid;

 			grid-template-columns:

 				/* 1 */ auto

 				/* 2 */ 1fr;

 			grid-template-rows:

 				/* 3 */ auto

 				/* 4 */ 1fr

 				/* 5 */ 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; align-self: start; }

 		#board    { grid-column: 2; grid-row: 1 / span 2; }

 		#controls { grid-column: 2; grid-row: 3; justify-self: center; }

 		</pre>

 		<pre class="lang-markup">

 			<div id="grid">

 			  <div id="title">Game Title</div>

 			  <div id="score">Score</div>

 			  <div id="stats">Stats</div>

 			  <div id="board">Board</div>

 			  <div id="controls">Controls</div>

 			</div>

 		</pre>

 	</div>

 <h3 id='source-independence'>

 Source-Order Independence</h3>

 	<figure class="sidefigure">

 		<img alt="Image: An arrangement suitable for portrait orientation." src="images/game-portrait.png" />

 		<figcaption>An arrangement suitable for “portrait” orientation.</figcaption>

 	</figure>

 	<figure class="sidefigure">

 		<img alt="Image: An arrangement suitable for landscape orientation." src="images/game-landscape.png" />

 		<figcaption>An arrangement suitable for “landscape“ orientation.</figcaption>

 	</figure>

 	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 portrait or landscape 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.

 	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.

 	<div class="example">

 		<pre class="lang-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 1fr;

 				grid-template-rows: auto auto 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 1fr;

 				grid-template-rows: auto 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 }

 		</pre>

 		<pre class="lang-markup">

 		<div id="grid">

 			<div id="title">Game Title</div>

 			<div id="score">Score</div>

 			<div id="stats">Stats</div>

 			<div id="board">Board</div>

 			<div id="controls">Controls</div>

 		</div>

 		</pre>

 	</div>

 	Note: The reordering capabilities of grid layout intentionally affect

 	<em>only the visual rendering</em>,

 	leaving speech order and navigation based on the source order.

 	This allows authors to manipulate the visual presentation

 	while leaving the source order intact and optimized for non-CSS UAs

 	and for linear models such as speech and sequential navigation.

 	Advisement: Grid item placement and reordering must not be used

 	as a substitute for correct source ordering,

 	as that can ruin the accessibility of the document.

 <h3 id='grid-layering'>

 Grid Layering of Elements</h3>

 	<figure class="sidefigure">

 		<img alt="Image: A control composed of layered HTML elements." src="images/control-layering-and-alignment.png" />

 		<figcaption>A control composed of layered HTML elements.</figcaption>

 	</figure>

 	In the example shown in Figure 6,

 	the author is creating a custom slider control.

 	The control has six parts.

 	The lower-limit and upper-limit labels align to the left and right edges of the control.

 	The track of the slider spans the area between the labels.

 	The lower-range and upper-range 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.

 	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.

 	<div class="example">

 		<pre class="lang-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. */

 		#low-label  { grid-column-start: start; }

 		#track      { grid-column: track-start / track-end; justify-self: center; }

 		#high-label { grid-column-end: end; }

 		/* Fill parts are drawn above the track so set z-index to 5. */

 		#low-fill  { grid-column: track-start / fill-split;

 		             justify-self: end;

 		             z-index: 5; }

 		#high-fill  { grid-column: fill-split / track-end;

 		              justify-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 }

 		</pre>

 		<pre class="lang-markup">

 		<div id="grid">

 			<div id="low-label">0</div>

 			<div id="high-label">50</div>

 			<div id="track"></div>

 			<div id="low-fill"></div>

 			<div id="high-fill"></div>

 			<div id="thumb"></div>

 		</div>

 		</pre>

 	</div>

 <!--

  ██████   ███████  ██    ██  ██████  ████████ ████████  ████████  ██████

 ██    ██ ██     ██ ███   ██ ██    ██ ██       ██     ██    ██    ██    ██

 ██       ██     ██ ████  ██ ██       ██       ██     ██    ██    ██

 ██       ██     ██ ██ ██ ██ ██       ██████   ████████     ██     ██████

 ██       ██     ██ ██  ████ ██       ██       ██           ██          ██

 ██    ██ ██     ██ ██   ███ ██    ██ ██       ██           ██    ██    ██

  ██████   ███████  ██    ██  ██████  ████████ ██           ██     ██████

 -->

 <h2 id='grid-concepts'>

 Grid Layout Concepts and Terminology</h2>

 	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 lt="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 lt="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">

 		<img 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>

 -->

 	<figure>

 		<img class="figure" alt="Image: Grid Lines." src="images/grid-lines.png" />

 		<figcaption>Grid lines: Three in the block axis and four in the inline axis.</figcaption>

 	</figure>

 <h3 id="grid-line-concept">

 Grid Lines</h3>

 	<dfn id='grid-line' export lt='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">

 		The following two examples both create three column <a>grid lines</a> and four row <a>grid lines</a>.

 		This first example demonstrates how an author would position a <a>grid item</a> using <a>grid line</a> numbers:

 		<pre>

 			#grid {

 				display: grid;

 				grid-template-columns: 150px 1fr;

 				grid-template-rows: 50px 1fr 50px;

 			}

 			#item1 { grid-column: 2;

 			         grid-row-start: 1; grid-row-end: 4; }

 		</pre>

 		This second example uses explicitly named <a>grid lines</a>:

 		<pre>

 			/* 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;

 			}

 		</pre>

 	</div>

 <h3 id="grid-track-concept">

 Grid Tracks and Cells</h3>

 	<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.

 	Adjacent <a>grid tracks</a> can be separated by <a href="#gutters">gutters</a> or <a href="#grid-align">alignment spacing</a>,

 	but are otherwise packed tightly.

 	A <dfn export>grid cell</dfn> is the intersection of a grid row and a grid column.

 	It is the smallest unit of the grid that can be referenced when positioning <a>grid items</a>.

 	<div class="example">

 		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>

 				#grid {

 					display: grid;

 					grid-template-columns: 150px 1fr;  /* two columns */

 					grid-template-rows: 50px 1fr 50px; /* three rows  */

 				}

 		</pre>

 	</div>

 <h3 id="grid-area-concept">

 Grid Areas</h3>

 	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>.

 	<div class="example">

 		<pre>

 			/* 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: start; }

 			#item3 { justify-self: end; align-self: end; }

 		</pre>

 	</div>

 	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).

 	Issue: This margin/padding behavior is disputed.

 	<a href="https://lists.w3.org/Archives/Public/www-style/2015Mar/0273.html">(see discussion)</a>

 	<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 content-based relative size,

 	which in turn can affect the position or size of another <a>grid item</a>.

 <!--

 ████████  ████  ██████  ████████  ██          ███    ██    ██  ██   ██████   ████████  ████ ████████

 ██     ██  ██  ██    ██ ██     ██ ██         ██ ██    ██  ██  ████ ██    ██  ██     ██  ██  ██     ██

 ██     ██  ██  ██       ██     ██ ██        ██   ██    ████    ██  ██        ██     ██  ██  ██     ██

 ██     ██  ██   ██████  ████████  ██       ██     ██    ██         ██   ████ ████████   ██  ██     ██

 ██     ██  ██        ██ ██        ██       █████████    ██     ██  ██    ██  ██   ██    ██  ██     ██

 ██     ██  ██  ██    ██ ██        ██       ██     ██    ██    ████ ██    ██  ██    ██   ██  ██     ██

 ████████  ████  ██████  ██        ████████ ██     ██    ██     ██   ██████   ██     ██ ████ ████████

 -->

 <h2 id="grid-model">

 Grid Containers</h2>

 <h3 id='grid-containers'>

 Establishing Grid Containers: the ''display/grid'' 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>

 	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.

 	The contents of a <a>grid container</a> are laid out into a <a>grid</a>,

 	with <a>grid lines</a> forming the boundaries of each <a>grid items</a>’ containing block.

 	The 'overflow' property applies to <a>grid containers</a>.

 	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>

 			the 'column-*' properties in the Multi-column Layout module [[!CSS3COL]] 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>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>,

 			and <a>grid containers</a> do not contribute a first formatted line or first letter to their ancestors.

 	</ul>

 	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 ''grid'' in the "Computed Value" column.

 <h3 id='intrinsic-sizes'>

 Sizing Grid Containers</h3>

 	A <a>grid container</a> is sized

 	using the rules of the formatting context in which it participates.

 	As a block-level box in a <a>block formatting context</a>,

 	it is sized like a block box that establishes a formatting context,

 	with an ''auto'' inline size calculated as for in-flow block boxes.

 	As an inline-level box in an inline formatting context,

 	it is sized as an atomic inline-level box (such as an inline-block).

 	In both inline and block formatting contexts,

 	the <a>grid container</a>’s ''auto'' block size is its max-content size.

 	<span class="issue">The block layout spec should define this?</span>

 	The <a>max-content size</a> of a <a>grid container</a> is

 	the sum of the <a>grid container’s</a> track sizes in the appropriate axis,

 	when the grid is sized under a <a>max-content constraint</a>.

 	The <a>min-content size</a> of a <a>grid container</a> is

 	the sum of the <a>grid container’s</a> track sizes in the appropriate axis,

 	when the grid is sized under a <a>min-content constraint</a>.

 	See [[!CSS3-SIZING]] for a definition of the terms in this section.

 <!--

  ██████   ████████  ████ ████████        ████ ████████ ████████ ██     ██  ██████

 ██    ██  ██     ██  ██  ██     ██        ██     ██    ██       ███   ███ ██    ██

 ██        ██     ██  ██  ██     ██        ██     ██    ██       ████ ████ ██

 ██   ████ ████████   ██  ██     ██        ██     ██    ██████   ██ ███ ██  ██████

 ██    ██  ██   ██    ██  ██     ██        ██     ██    ██       ██     ██       ██

 ██    ██  ██    ██   ██  ██     ██        ██     ██    ██       ██     ██ ██    ██

  ██████   ██     ██ ████ ████████        ████    ██    ████████ ██     ██  ██████

 -->

 <h2 id="grid-items">

 Grid Items</h2>

 	The content of a <a>grid container</a> consists of zero or more <dfn export id="grid-item" lt="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/css-text/#white-space-processing">white space</a>

 	is not rendered, as if it were ''display:none''.

 	<div class="example">

 		<p>Examples of grid items:

 		<pre class="lang-markup">

 		<div style="display:grid">

 		    <!-- grid item: block child -->

 		    <div id="item1">block</div>

 		    <!-- grid item: floated element; floating is ignored -->

 		    <div id="item2" style="float: left;">float</div>

 		    <!-- grid item: anonymous block box around inline content -->

 		    anonymous item 3

 		    <!-- grid item: inline child -->

 		    <span>

 		        item 4

 		        &lt;!-- grid items do not <a href="http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">split</a> around blocks -->

 		        <q style="display: block" id=not-an-item>item 4</q>

 		        item 4

 		    </span>

 		</div>

 		</pre>

 		<figure>

 			<figcaption>grid items determined from above code block</figcaption>

 			<a href="examples/grid-item-determination.html">

 				<object type="image/png" data="images/grid-item-determination.png">

 					<ol>

 						<li>grid item containing <samp>block</samp>.

 						<li>grid item containing <samp>float</samp>.

 						<li>(Anonymous, unstyleable) grid item containing <samp>anonymous item 3</samp>.

 						<li>grid item containing three blocks in succession:

 							<ul>

 								<li>Anonymous block containing <samp>item 4</samp>.

 								<li><code>&lt;q></code> element block containing <samp>item 4</samp>.

 								<li>Anonymous block containing <samp>item 4</samp>.

 							</ul>

 					</ol>

 				</object>

 			</a>

 		</figure>

 		Note that the inter-element white space disappears:

 		it does not become its own grid item,

 		even though the inter-element text <em>does</em> get wrapped in an anonymous grid item.

 		Note also that the anonymous item's box is unstyleable,

 		since there is no element to assign style rules to.

 		Its contents will however inherit styles (such as font settings) from the grid container.

 	</div>

 	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.

 	However, grid items are <dfn>grid-level</dfn> boxes, not block-level boxes:

 	they participate in their container's <a>grid formatting context</a>,

 	not in a block formatting context.

 	A <a>grid item</a> is sized within the containing block defined by its <a>grid area</a>

 	similarly to an equivalent block-level box in an equivalently-sized containing block,

 	except that ''margin/auto'' margins and the <a>box alignment properties</a>

 	have special effects. (See [[#alignment]].)

 	The ''min-width/auto'' value of 'min-width' and 'min-height'

 	behaves on <a>grid items</a> in the relevant axis

 	analogously to its behavior on <a>flex items</a> in the <a>main axis</a>.

 	See [[#min-size-auto]].

 	ISSUE: Review implications of intrinsic ratio and Grid's 2D nature.

 	The 'display' value of a <a>grid item</a> is <a>blockified</a>:

 	if the specified 'display' of an in-flow child of an element generating a <a>flex container</a>

 	is an inline-level value, it computes to its block-level equivalent.

 	(See <a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS2.1&sect;9.7</a> [[!CSS21]]

 	and <a href="http://www.w3.org/TR/css-display/#transformations">CSS Display</a> [[!CSS3-DISPLAY]]

 	for details on this type of 'display' value conversion.)

 	Note: Some values of 'display' normally trigger the creation of anonymous boxes around the original box.

 	If such a box is a <a>grid item</a>,

 	it is blockified first,

 	and so anonymous box creation will not happen.

 	For example, two contiguous <a>grid items</a> with ''display: table-cell''

 	will become two separate ''display: block'' <a>grid items</a>,

 	instead of being wrapped into a single anonymous table.

 <!--

 <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.

 		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="visibility-collapse">

 	Collapsed Grid Items: the 'visibility' property</h3>

 	<p class='issue'>

 		We want the ability to collapse grid tracks

 		(similar to <a href="http://www.w3.org/TR/css3-flexbox/#visibility-collapse">collapsing flex items</a>

 		 or <a href="http://www.w3.org/TR/CSS21/tables.html#dynamic-effects">table rows/columns</a>),

 		but we're not sure exactly how to do it.

 		Ideas welcome, please <a href="mailto:[email protected]?Subject=%5Bcss-grid%5D%20Collapsing%20Grid%20Tracks">post them to [email protected]</a>.

 <h3 id='order-property'>

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

 	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>.

 	Advisement: As with reordering flex items,

 	the 'order' property must only be used

 	when the visual order needs to be <em>out-of-sync</em>

 	with the speech and navigation order;

 	otherwise the underlying document source should be reordered instead.

 	See <a href="https://drafts.csswg.org/css-flexbox-1/#order-accessibility">Reordering and Accessibility</a>

 	in [[CSS-FLEXBOX-1]].

 <h3 id='z-order'>

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

 	<a>Grid items</a> can overlap when they are positioned into intersecting <a>grid areas</a>,

 	or even when positioned in non-intersecting areas because of negative margins or positioning.

 	The painting order of <a>grid items</a> is exactly the same as inline blocks [[CSS21]],

 	except that <a>order-modified document order</a> is used in place of raw document order,

 	and 'z-index' values other than <a value for=z-index>auto</a> create a stacking context even if 'position' is ''static''.

 	Thus the 'z-index' property can easily be used to control the z-axis order of grid items.

 	<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">

 		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.

 		<figure>

 			<img src="images/drawing-order.png" />

 			<figcaption>Drawing order controlled by z-index and source order.</figcaption>

 		</figure>

 		<pre>

 			<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: end; }

 			#B { grid-column: 1; grid-row: 1; z-index: 10; }

 			#C { grid-column: 2; grid-row: 1; align-self: start; margin-left: -20px; }

 			#D { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }

 			#E { grid-column: 1 / span 2; grid-row: 1 / span 2;

 			     z-index: 5; justify-self: center; align-self: center; }

 			</style>

 			<div id="grid">

 				<div id="A">A</div>

 				<div id="B">B</div>

 				<div id="C">C</div>

 				<div id="D">D</div>

 				<div id="E">E</div>

 			</div>

 		</pre>

 	</div>

 <!--

 ██     ██ ████ ██    ██

 ███   ███  ██  ███   ██          ██   ██

 ████ ████  ██  ████  ██           ██ ██

 ██ ███ ██  ██  ██ ██ ██ ███████ █████████

 ██     ██  ██  ██  ████           ██ ██

 ██     ██  ██  ██   ███          ██   ██

 ██     ██ ████ ██    ██

 -->

 <h3 id="min-size-auto">

 Implied Minimum Size of Grid Items</h3>

 	To provide a more reasonable default minimum size for <a>grid items</a>,

 	this specification defines the effects of the 'min-width'/'min-height' ''min-width/auto'' value

 	for <a>grid items</a>.

 	On a <a>grid item</a> whose 'overflow' is ''overflow/visible'',

 	when ''min-width/auto'' is specified on the <a>grid item</a>,

 	the following table gives the minimum size in that dimension:

 	<table class=data>

 		<colgroup span=2></colgroup>

 		<colgroup span=1></colgroup>

 		<thead>

 			<tr>

 				<th>Specified Size

 				<th>Transferred Size

 				<th>Minimum Size

 		<tbody>

 			<tr>

 				<td>

 				<td>

 				<td><var>content size</var>

 			<tr>

 				<td>✓

 				<td>

 				<td>min(<var>specified size</var>, <var>content size</var>)

 			<tr>

 				<td>

 				<td>✓

 				<td>min(<var>transferred size</var>, <var>content size</var>)

 			<tr>

 				<td>✓

 				<td>✓

 				<td>min(<var>specified size</var>, <var>content size</var>)

 	</table>

 	Where:

 	<dl>

 		<dt><var>specified size</var>

 		<dd>

 			If the item’s computed width/height is <a>definite</a>,

 			then the <var>specified size</var> is that size

 			(clamped by its <a>max size property</a> in that dimension if it's <a>definite</a>).

 			It is otherwise undefined.

 		<dt><var>transferred size</var>

 		<dd>

 			If the item has an intrinsic aspect ratio

 			and its computed height/width is <a>definite</a>,

 			then the <var>transferred size</var> is that size

 			(clamped by its <a lt="min size property">min and max size properties</a> in that dimension if they are <a>definite</a>),

 			converted through the aspect ratio.

 			It is otherwise undefined.

 		<dt><var>content size</var>

 		<dd>

 			The <var>content size</var> is the <a>min-content size</a> in that dimension,

 			clamped, if it has an aspect ratio, by any <a>definite</a> <a lt="min size property">min and max size properties</a>

 			in the perpendicular dimension

 			converted through the aspect ratio,

 			and then further clamped by the <a>max size property</a> in the relevant dimension if that is <a>definite</a>.

 	</dl>

 	<div class="note" id="min-size-opt">

 		Note that while a content-based minimum size is often appropriate,

 		and helps prevent content from overlapping or spilling outside its container,

 		in some cases it is not:

 		In particular, if flex sizing is being used for a major content area of a document,

 		it is better to set an explicit font-relative minimum width such as ''min-width: 12em''.

 		A content-based minimum width could result in a large table or large image

 		stretching the size of the entire content area into an overflow zone,

 		and thereby making lines of text gratuitously long and hard to read.

 		Note also, when content-based sizing is used on an item with large amounts of content,

 		the layout engine must traverse all of this content before finding its minimum size,

 		whereas if the author sets an explicit minimum, this is not necessary.

 		(For items with small amounts of content, however,

 		this traversal is trivial and therefore not a performance concern.)

 	</div>

 <!--

 ████████ ██     ██ ████████  ██       ████  ██████  ████ ████████

 ██        ██   ██  ██     ██ ██        ██  ██    ██  ██     ██

 ██         ██ ██   ██     ██ ██        ██  ██        ██     ██

 ██████      ███    ████████  ██        ██  ██        ██     ██

 ██         ██ ██   ██        ██        ██  ██        ██     ██

 ██        ██   ██  ██        ██        ██  ██    ██  ██     ██

 ████████ ██     ██ ██        ████████ ████  ██████  ████    ██

 -->

 <h2 id='grid-definition'>

 The Explicit Grid</h2>

 	The three properties 'grid-template-rows', 'grid-template-columns', and 'grid-template-areas'

 	together define the <dfn export local-lt="explicit">explicit grid</dfn> of a <a>grid container</a>.

 	The 'grid-template' property is a <a>shorthand</a> 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.

 	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.

 	If these properties don't define <em>any</em> <a>explicit</a> tracks,

 	the <a>explicit grid</a> still contains one <a>grid line</a> in each axis.

 	Numeric indexes in the <a>grid-placement properties</a>

 	count from the edges of the <a>explicit grid</a>.

 	Positive indexes count from the <a>start</a> side

 	(starting from 1 for the <a>start</a>-most <a>explicit</a> line),

 	while negative indexes count from the <a>end</a> side

 	(starting from -1 for the <a>end</a>-most <a>explicit</a> line).

 <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>> | <<auto-track-list>> | subgrid <<line-name-list>>?

 	Initial: none

 	Applies to: <a>grid containers</a>

 	Inherited: no

 	Percentages: refer to corresponding dimension of the content area

 	Media: visual

 	Computed value: As specified, with lengths made absolute

 	Animatable: as a <a href="http://www.w3.org/TR/css3-transitions/#animtype-simple-list">simple list</a> of <a href="http://www.w3.org/TR/css3-transitions/#animtype-lpcalc">length, percentage, or calc</a>, provided the only differences are the values of the <a href="http://www.w3.org/TR/css3-transitions/#animtype-lpcalc">length, percentage, or calc</a> components in the list

 	</pre>

 	These properties specify,

 	as a space-separated <dfn export>track list</dfn>,

 	the line names and <a>track sizing functions</a> of the <a>grid</a>.

 	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.

 	Values have the following meanings:

 	<dl dfn-type="value" dfn-for="grid-template-rows, grid-template-columns">

 		<dt><dfn>none</dfn>

 		<dd>

 			This value indicates that there is no <a>explicit grid</a>;

 			any rows/columns will be <a href="#implicit-grids">implicitly generated</a>,

 			and their size will be determined by the 'grid-auto-rows' and 'grid-auto-columns' properties.

 		<dt><dfn id="track-listing"><<track-list>> | <<auto-track-list>></dfn>

 		<dd>

 			Specifies the <a>track list</a> as a series of <a>track sizing functions</a>

 			and line names.

 			Each <dfn dfn lt="track sizing function|sizing function">track 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 specify separate <a lt="min track sizing function">min</a>

 			and <a>max track sizing functions</a> for the column or row.

 		<dt><dfn id="subgrid-listing">subgrid <<line-name-list>></dfn>

 		<dd>

 			The <dfn value for="grid-template-rows, grid-template-columns">subgrid</dfn> value

 			indicates that the grid will adopt the spanned portion of its parent grid in that axis.

 			Rather than being specified explicitly, the sizes of the grid rows/columns

 			will be taken from the parent grid's definition.

 			See [[#subgrids]].

 			The <<line-name-list>> argument allows local naming of the grid lines propagated from the parent grid.

 	</dl>

 	The syntax of a <a>track list</a> is:

 	<pre>

 		<dfn>&lt;track-list></dfn>       = [ <<line-names>>? [ <<track-size>> | <<track-repeat>> ] ]+ <<line-names>>?

 		<dfn>&lt;auto-track-list></dfn>  = [ <<line-names>>? [ <<fixed-size>> | <<fixed-repeat>> ] ]+ <<auto-repeat>>

 		                     [ <<line-names>>? [ <<fixed-size>> | <<fixed-repeat>> ] ]+ <<line-names>>?

 		<dfn>&lt;line-name-list></dfn>   = [ <<line-names>> | <<name-repeat>> ]+

 		<dfn>&lt;track-size></dfn>       = <<track-breadth>> | minmax( <<track-breadth>> , <<track-breadth>> )

 		<dfn>&lt;fixed-size></dfn>       = <<fixed-breadth>> | minmax( <<fixed-breadth>> , <<track-breadth>> )

 		<dfn>&lt;track-breadth></dfn>    = <<length>> | <<percentage>> | <<flex>> | min-content | max-content | auto

 		<dfn>&lt;fixed-breadth></dfn>    = <<length>> | <<percentage>>

 		<dfn>&lt;line-names></dfn>       = '[' <<custom-ident>>* ']'

 	</pre>

 	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 <a>inline size</a> of the <a>grid container</a> in column <a>grid tracks</a>,

 			and the <a>block size</a> of the <a>grid container</a> in row <a>grid tracks</a>.

 			If the <a lt="inline size">inline</a> or <a>block size</a> of the <a>grid container</a>

 			is <a>indefinite</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'' specifying the track's <dfn dfn noexport>flex factor</dfn>.

 			Each <<flex>>-sized track takes a share of the remaining space in proportion to its <a>flex factor</a>.

 			See <a href="#fr-unit">Flexible Lengths</a> for more details.

 			When appearing outside a ''minmax()'' notation,

 			implies an automatic minimum (i.e. ''minmax(auto, <<flex>>)'').

 		<dt><dfn>max-content</dfn>

 		<dd>

 			Represents the largest <a>max-content contribution</a>

 			of the <a>grid items</a> occupying the <a>grid track</a>.

 		<dt><dfn>min-content</dfn>

 		<dd>

 			Represents the largest <a>min-content contribution</a>

 			of the  <a>grid items</a> occupying the <a>grid track</a>.

 		<dt><dfn lt="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>.

 			As a maximum, a <<flex>> value sets the track's <a>flex factor</a>.

 			As a minimum, it is treated as zero

 			(or ''min-content'', if the <a>grid container</a> is sized under a <a>min-content constraint</a>).

 		<dt><dfn>auto</dfn>

 		<dd>

 			As a maximum, identical to ''max-content''.

 			As a minimum, represents the largest minimum size (as specified by 'min-width'/'min-height')

 			of the <a>grid items</a> occupying the <a>grid track</a>.

 			Note: ''grid-template-rows/auto'' track sizes (and only ''grid-template-rows/auto'' track sizes)

 			can be streched by the 'align-content' and 'justify-content' properties.

 	</dl>

 	<div class='example'>

 		Given the following 'grid-template-columns' declaration:

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

 		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>

 		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'>

 		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>

 	Note: The size of the grid is not purely the sum of the track sizes,

 	as 'grid-row-gap', 'grid-column-gap' and  'justify-content', 'align-content'

 	can add additional space between tracks.

 <!--

 ██    ██    ███    ██     ██ ████████ ████████        ██       ████ ██    ██ ████████  ██████

 ███   ██   ██ ██   ███   ███ ██       ██     ██       ██        ██  ███   ██ ██       ██    ██

 ████  ██  ██   ██  ████ ████ ██       ██     ██       ██        ██  ████  ██ ██       ██

 ██ ██ ██ ██     ██ ██ ███ ██ ██████   ██     ██       ██        ██  ██ ██ ██ ██████    ██████

 ██  ████ █████████ ██     ██ ██       ██     ██       ██        ██  ██  ████ ██             ██

 ██   ███ ██     ██ ██     ██ ██       ██     ██       ██        ██  ██   ███ ██       ██    ██

 ██    ██ ██     ██ ██     ██ ████████ ████████        ████████ ████ ██    ██ ████████  ██████

 -->

 <h4 id='named-lines'>

 Named Grid Lines: the <css>[<<custom-ident>>*]</css> syntax</h4>

 	While <a>grid lines</a> can always be referred to by their numerical index,

 	<dfn export lt="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'>

 		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>

 			#grid {

 				display: grid;

 				grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];

 				grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];

 			}

 		</pre>

 		<figure class="figure">

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

 			<figcaption>Named Grid Lines.</figcaption>

 		</figure>

 	</div>

 <!--

 ████████  ████████ ████████  ████████    ███    ████████   ███ ███

 ██     ██ ██       ██     ██ ██         ██ ██      ██     ██     ██

 ██     ██ ██       ██     ██ ██        ██   ██     ██    ██       ██

 ████████  ██████   ████████  ██████   ██     ██    ██    ██       ██

 ██   ██   ██       ██        ██       █████████    ██    ██       ██

 ██    ██  ██       ██        ██       ██     ██    ██     ██     ██

 ██     ██ ████████ ██        ████████ ██     ██    ██      ███ ███

 -->

 <h4 id='repeat-notation'>

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

 	The <dfn>repeat()</dfn> notation represents a repeated fragment of the <a>track list</a>,

 	allowing a large number of columns or rows that exhibit a recurring pattern

 	to be written in a more compact form.

 	The syntax of the ''repeat()'' notation

 	has several forms:

 	<pre class='prod'>

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

 		<dfn><<auto-repeat>></dfn>  = repeat( [ auto-fill | auto-fit ],   <<line-names>>? <<fixed-size>>    <<line-names>>? )

 		<dfn><<fixed-repeat>></dfn> = repeat( [ <<positive-integer>> ]  , [ <<line-names>>? <<fixed-size>> ]+ <<line-names>>? )

 		<dfn><<name-repeat>></dfn>  = repeat( [ <<positive-integer>> | auto-fill ], <<line-names>>+)

 	</pre>

 	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 <<track-repeat>> variant can represent the repetition of any <<track-size>>,

 		but is limited to a fixed number of repetitions.

 	* The <<auto-repeat>> variant can repeat automatically to fill a space,

 		but requires <a>definite</a> minimum track sizes so that the number of repetitions can be calculated.

 		It can only appear once in the <a>track list</a>,

 		but the same <a>track list</a> can also contain <<fixed-repeat>>s.

 	* The <<name-repeat>> variant is for adding line names to <a href="#subgrids">subgrids</a>

 		and can only be used with the ''grid-template-rows/subgrid'' keyword:

 		it only repeats names.

 		The ''auto-fill'' keyword is only valid once per <<line-name-list>>,

 		and repeats enough times for the name list to match the subgrid’s specified <a>grid span</a>

 		(defaulting to 0 if that is ''auto'' or if the span is already fulfilled).

 	<div class='example'>

 		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>

 			#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;

 			}

 		</pre>

 	</div>

 	If the ''repeat()'' function ends up placing two <<line-names>> adjacent to each other,

 	the name lists are merged.

 	For example, ''repeat(2, [a] 1fr [b])'' is equivalent to ''[a] 1fr [b a] 1fr [b]''.

 	When <dfn value for="repeat()">auto-fill</dfn> is given as the repetition number,

 	if the <a>grid container</a> has a <a>definite</a> size or max size in the relevant axis,

 	then the number of repetitions is the largest possible positive integer

 	that does not cause the <a>grid</a> to overflow its <a>grid container</a>

 	(treating each track as its <a>max track sizing function</a> if that is <a>definite</a>

 	or as its minimum track sizing function otherwise,

 	and taking 'grid-gap' into account);

 	if any number of repetitions would overflow,

 	then 1 repetition.

 	Otherwise, if the <a>grid container</a> has a <a>definite</a> min size in the relevant axis,

 	the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement.

 	Otherwise, the specified <a>track list</a> repeats only once.

 	For the purpose of finding the number of auto-repeated tracks,

 	the UA must floor the track size to a UA-specified value

 	to avoid division by zero.

 	It is suggested that this floor be ''1px''.

 	The <dfn value for="repeat()">auto-fit</dfn> keyword behaves the same as ''auto-fill'',

 	except that after <a href="#auto-placement-algo">grid item placement</a>

 	any empty repetitions are dropped.

 	(An empty track is one with no in-flow grid items placed into or spanning across it.)

 	(This can result in <em>all</em> tracks being dropped,

 	if they're all empty.)

 	Issue: In order to simplify implementation and testing requirements for Level 1,

 	the <<auto-repeat>> syntax only accepts a single <<fixed-size>>.

 	Now that we have gutters, most use cases for auto-repetition will need only one track size.

 	However, if there are important use cases for having a full track listing,

 	the CSSWG is not opposed to expanding the syntax;

 	please send such use cases to [email protected]

 	for consideration.

 <!--

 ████████ ████████        ██     ██ ██    ██ ████ ████████

 ██       ██     ██       ██     ██ ███   ██  ██     ██

 ██       ██     ██       ██     ██ ████  ██  ██     ██

 ██████   ████████        ██     ██ ██ ██ ██  ██     ██

 ██       ██   ██         ██     ██ ██  ████  ██     ██

 ██       ██    ██        ██     ██ ██   ███  ██     ██

 ██       ██     ██        ███████  ██    ██ ████    ██

 -->

 <h4 id='fr-unit'>

 Flexible Lengths: the ''fr'' unit</h4>

 	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>.

 	The distribution of <a>free space</a> occurs after all non-flexible <a>track sizing functions</a> have reached their maximum.

 	The total size of such rows or columns is subtracted from the available space, yielding the <a>free space</a>,

 	which is then divided among the flex-sized rows and columns in proportion to their <a>flex factor</a>.

 	Note: Flexible lengths in a <a>track list</a> work similarly to flexible lengths with a zero base size in [[CSS3-FLEXBOX]].

 	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 <a>flex factors</a>&gt;</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).

 	Note: If the sum of the <a>flex factors</a> is less than 1,

 	they'll take up only a corresponding fraction of the <a>free space</a>,

 	rather than expanding to fill the entire thing.

 	This is similar to how Flexbox [[CSS-FLEXBOX-1]] acts when the sum of the 'flex' values is less than 1.

 	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 <a>flex factor</a>

 	to determine a “hypothetical ''1fr'' size”.

 	The maximum of those is used as the resolved ''1fr'' length (the <dfn>flex fraction</dfn>),

 	which is then multiplied by each <a>grid track</a>’s <a>flex factor</a> to determine its final size.

 <!--

  ██████  ██     ██ ████████   ██████   ████████  ████ ████████

 ██    ██ ██     ██ ██     ██ ██    ██  ██     ██  ██  ██     ██

 ██       ██     ██ ██     ██ ██        ██     ██  ██  ██     ██

  ██████  ██     ██ ████████  ██   ████ ████████   ██  ██     ██

       ██ ██     ██ ██     ██ ██    ██  ██   ██    ██  ██     ██

 ██    ██ ██     ██ ██     ██ ██    ██  ██    ██   ██  ██     ██

  ██████   ███████  ████████   ██████   ██     ██ ████ ████████

 -->

 <h4 id="subgrids">

 Subgrids: the ''grid-template-rows/subgrid'' keyword</h4>

 	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.

 	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 ''grid-template-rows/subgrid'' 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.

 	If a <a>grid container</a> that is <em>not</em> a <a>grid item</a> uses the ''grid-template-rows/subgrid'' keyword,

 	its 'grid-template-rows'/'grid-template-columns' value is treated identically to ''grid-template-rows/none''

 	(i.e. it doesn't have an <a>explicit grid</a> in that dimension).

 	<div class="example">

 			For example, suppose we have a form consisting of a list of inputs with labels:

 		<pre>

 			<ul>

 				<li><label>Name:</label> <input name=fn>

 				<li><label>Address:</label> <input name=address>

 				<li><label>Phone:</label> <input name=phone>

 			</ul>

 		</pre>

 		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: row;

 				grid-template-columns: auto 1fr;

 			}

 			li {

 				display: grid;

 				grid: subgrid;

 				margin: 0.5em;

 				border: solid;

 				padding: 0.5em;

 			}

 			label {

 				grid-column: 1;

 			}

 			input {

 				grid-column: 2;

 			}

 		</pre>

 	</div>

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

 	<ul style="list-style-type: lower-alpha">

 		<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 <a>subgrid</a>'s margin, padding, and borders are applied as an extra layer of margin to the items at those edges.

 			<div class="example">

 				For example, if we have a 3×3 grid with the following tracks:

 				<pre>#parent-grid { grid-template-columns: 300px auto 300px; }</pre>

 				If a subgrid covers the last two tracks, its first two columns correspond to the parent grid's last two columns,

 				and any items positioned into those tracks participate in sizing the parent grid.

 				Specifically, an item positioned in the first track of the subgrid

 				influences the auto-sizing of the parent grid's middle track.

 				<pre>

 					#subgrid { grid-column: 2 / span 2; } /* cover parent's 2nd and 3rd tracks */

 					#subgrid :first-child { grid-column: 1; } /* subgrid's 1st track, parent grid's 2nd track */

 				</pre>

 				If the subgrid has margins/borders/padding,

 				the the size of those margins/borders/padding also influence sizing.

 				For example, if the subgrid has 100px padding:

 				<pre>#subgrid { padding: 100px; }</pre>

 				Then when the parent grid auto-sizes its second track,

 				it will be at least 100px wider than any items in the subgrid's first track,

 				and any items in the subgrid's second track will be sized to fit a slot 200px wide (instead of 300px wide).

 			</div>

 			However, any overflow tracks

 			(i.e. those outside the <a>explicit grid</a> when the <a>subgrid</a> has a <a>definite grid span</a>)

 			do not correspond to any tracks in the parent grid;

 			they effectively extend in a third dimension.

 			<div class="example">

 				For example, if a parent grid has adjacent tracks <var>A</var>, <var>B</var>, and <var>C</var>,

 				and a ''span 1'' subgrid with an extra <a>implicit grid track</a> is placed in track <var>B</var>,

 				the items in that <a>implicit grid track</a> are not considered part of track <var>B</var>.

 			</div>

 		<li>

 			The <a>subgrid</a> is always stretched in its subgridded dimension:

 			the 'align-self'/'justify-self' properties on it are ignored in that dimension,

 			and any specified width/height constraints are also ignored in that dimension.

 		<li>

 			Layoutwise, 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.

 			However, 'overflow' does apply,

 			so the contents of the subgrid can be scrolled aside.

 			(Note: the act of scrolling does not affect layout.)

 		<li>

 			Explicit named lines can also be specified together with the ''grid-template-rows/subgrid'' keyword;

 			these names apply (within the <a>subgrid</a>) to the corresponding lines of the parent <a>grid</a>.

 			If the <a>subgrid</a> has an explicit <a>grid span</a>,

 			any names specified for lines beyond the span are ignored.

 			<div class="example">

 				For example, if the subgrid above were specified with 5 names:

 				<pre>#subgrid { grid-template-columns: subgrid [first] [second] [third] [fourth] [fifth]; }</pre>

 				Items within the subgrid could be positioned using the first four line names;

 				the last name would be ignored (as if it didn't exist),

 				since the subgrid only covers four lines.

 			</div>

 			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 line names specified for its parent <a>grid</a>.

 			(In such cases the author can rely on the names specified in the parent grid,

 			and does not need to duplicate those names in each subgrid declaration.)

 			Issue: People should review how subgrid line names are assigned, to ensure it is sane and useful.

 	</ul>

 <!--

 ████████  ████████  ██████   ███████  ██       ██     ██ ████████ ████████

 ██     ██ ██       ██    ██ ██     ██ ██       ██     ██ ██       ██     ██

 ██     ██ ██       ██       ██     ██ ██       ██     ██ ██       ██     ██

 ████████  ██████    ██████  ██     ██ ██       ██     ██ ██████   ██     ██

 ██   ██   ██             ██ ██     ██ ██        ██   ██  ██       ██     ██

 ██    ██  ██       ██    ██ ██     ██ ██         ██ ██   ██       ██     ██

 ██     ██ ████████  ██████   ███████  ████████    ███    ████████ ████████

 -->

 <h4 id='resolved-track-list'>

 Resolved Values</h4>

 	When an element's 'display' is ''grid'' or ''inline-grid'' and it generates a box,

 	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>

 	Otherwise, (e.g. when the element has ''display: none'' or is not a grid)

 	the resolved value is simply the computed value.

 	<div class="example">

 		<pre>

 			#grid {

 				width: 500px;

 				grid-template-columns:

 				  [a]     auto

 				  [b]     minmax(min-content, 1fr)

 				  [b c d] repeat(2, [e] 40px)

 				          repeat(5, auto);

 			}

 			</style>

 			<div id="grid">

 			  <div style="grid-column-start:1; width:50px"></div>

 			  <div style="grid-column-start:9; width:50px"></div>

 			</div>

 			<script>

 			  var gridElement = document.getElementById("grid");

 			  getComputedStyle(gridElement).gridTemplateColumns;

 			  // [a] 50px [b] 320px [b c d] repeat(2, [e] 40px) repeat(4, 0px) 50px

 		</pre>

 	</div>

 	Note: In general, resolved values are the computed values,

 	except for a small list of legacy 2.1 properties.

 	However, compatibility with early implementations of this module

 	requires us to define 'grid-template-rows' and 'grid-template-columns' as returning used values.

 	Authors are recommended to use the

 	<a href="https://drafts.csswg.org/cssom/#the-getstyleutils-interface"><code>.rawComputedStyle</code> and <code>.usedStyle</code> attributes</a>

 	instead of <code>getComputedStyle()</code>.

 <!--

  ██████   ████████  ████ ████████           ███    ████████  ████████    ███     ██████

 ██    ██  ██     ██  ██  ██     ██         ██ ██   ██     ██ ██         ██ ██   ██    ██

 ██        ██     ██  ██  ██     ██        ██   ██  ██     ██ ██        ██   ██  ██

 ██   ████ ████████   ██  ██     ██       ██     ██ ████████  ██████   ██     ██  ██████

 ██    ██  ██   ██    ██  ██     ██       █████████ ██   ██   ██       █████████       ██

 ██    ██  ██    ██   ██  ██     ██       ██     ██ ██    ██  ██       ██     ██ ██    ██

  ██████   ██     ██ ████ ████████        ██     ██ ██     ██ ████████ ██     ██  ██████

 -->

 <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>

 	This property specifies <dfn export lt="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.

 	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 cell in the string,

 			when parsed as follows:

 			Tokenize the string into a list of the following tokens,

 			using longest-match semantics:

 			<ul dfn-type="dfn">

 				<li>

 					A sequence of <a>name code points</a>,

 					representing a <dfn>named cell token</dfn>

 					with a name consisting of its code points.

 				<li>

 					A sequence of one or more "." (U+002E FULL STOP),

 					representing a <dfn>null cell token</dfn>.

 				<li>

 					A sequence of <a>whitespace</a>,

 					representing nothing

 					(do not produce a token).

 				<li>

 					A sequence of any other characters,

 					representing a <dfn>trash token</dfn>.

 			</ul>

 			Note: These rules can produce cell names that do not match the <<ident>> syntax,

 			such as "1st 2nd 3rd",

 			which requires escaping when referencing those areas by name in other properties,

 			like ''grid-row: \31st;'' to reference the area named ''1st''.

 			<ul>

 				<li>

 					A <a>null cell token</a> represents an unnamed area in the <a>grid container</a>.

 				<li>

 					A <a>named cell token</a> creates a <a>named grid area</a> with the same name.

 					Multiple <a>named cell tokens</a> within and between rows

 					create a single <a>named grid area</a> that spans the corresponding <a>grid cells</a>.

 				<li>

 					A <a>trash token</a> is a syntax error,

 					and makes the declaration invalid.

 			</ul>

 			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.

 			Note: Non-rectangular or disconnected regions may be permitted in a future version of this module.

 	</dl>

 	<div class='example'>

 		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>

 			#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; }

 		</pre>

 	</div>

 <h4 id="implicit-named-lines">

 Implicit Named Lines</h4>

 	The 'grid-template-areas' property creates <dfn export lt="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 <css><var>foo</var>-start</css>, naming the row-start and column-start lines of the <a>named grid area</a>,

 	and two named <css><var>foo</var>-end</css>, naming the row-end and column-end lines of the <a>named grid area</a>.

 	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.

 <h4 id="implicit-named-areas">

 Implicit Named Areas</h4>

 	Since a <a>named grid area</a> is referenced by the <a>implicit named lines</a> it produces,

 	explicitly adding named lines of the same form (''foo-start''/''foo-end'')

 	effectively creates a <a>named grid area</a>.

 	Such <dfn export lt="implicit named area">implicit named areas</dfn> do not appear in the value of 'grid-template-areas',

 	but can still be referenced by the <a>grid-placement properties</a>.

 <!--

  ██████   ████████  ████ ████████          ████████ ████████ ██     ██ ████████  ██          ███    ████████ ████████

 ██    ██  ██     ██  ██  ██     ██            ██    ██       ███   ███ ██     ██ ██         ██ ██      ██    ██

 ██        ██     ██  ██  ██     ██            ██    ██       ████ ████ ██     ██ ██        ██   ██     ██    ██

 ██   ████ ████████   ██  ██     ██ ███████    ██    ██████   ██ ███ ██ ████████  ██       ██     ██    ██    ██████

 ██    ██  ██   ██    ██  ██     ██            ██    ██       ██     ██ ██        ██       █████████    ██    ██

 ██    ██  ██    ██   ██  ██     ██            ██    ██       ██     ██ ██        ██       ██     ██    ██    ██

  ██████   ██     ██ ████ ████████             ██    ████████ ██     ██ ██        ████████ ██     ██    ██    ████████

 -->

 <h3 id='explicit-grid-shorthand'>

 Explicit Grid Shorthand: the 'grid-template' property</h3>

 	<pre class='propdef'>

 	Name: grid-template

 	Value: none | subgrid | <nobr>[ <<'grid-template-rows'>> / <<'grid-template-columns'>> ]</nobr> | <nobr>[ <<line-names>>? <<string>> <<track-size>>? <<line-names>>? ]+ [ / <<track-list>> ]?</nobr>

 	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>

 	The 'grid-template' property is a <a>shorthand</a> for setting

 	'grid-template-columns', 'grid-template-rows', and 'grid-template-areas' in a single declaration.

 	It has several 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>subgrid</dfn>

 		<dd>

 			Sets 'grid-template-rows' and 'grid-template-columns' to ''grid-template-rows/subgrid'',

 			and 'grid-template-areas' to its initial value.

 		<dt><dfn id='grid-template-rowcol'><<'grid-template-rows'>> / <<'grid-template-columns'>></dfn>

 		<dd>

 			Sets 'grid-template-rows' and 'grid-template-columns' to the specified values, respectively,

 			and sets 'grid-template-areas' to ''grid-template-areas/none''.

 			<div class='example'>

 				<pre>grid-template: auto 1fr / auto 1fr auto;</pre>

 					is equivalent to

 				<pre>

 					grid-template-rows: auto 1fr;

 					grid-template-columns: auto 1fr auto;

 					grid-template-areas: none;

 				</pre>

 			</div>

 		<dt><dfn id='grid-template-ascii'>[ <<line-names>>? <<string>> <<track-size>>? <<line-names>>? ]+ [ / <<track-list>> ]?</dfn>

 		<dd>

 			* Sets 'grid-template-areas' to the strings listed.

 			* Sets 'grid-template-rows' to the <<track-size>>s following each string

 				(filling in ''grid-template-rows/auto'' for any missing sizes),

 				and splicing in the named lines defined before/after each size.

 			* Sets 'grid-template-columns' to the track listing specified after the slash

 				(or ''grid-template-columns/none'', if not specified).

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

 			<div class='example'>

 				<pre>

 					grid-template: [header-top] "a   a   a"     [header-bottom]

 					                 [main-top] "b   b   b" 1fr [main-bottom]

 					                          / auto 1fr auto;

 				</pre>

 					is equivalent to

 				<pre>

 					grid-template-areas: "a a a"

 					                     "b b b";

 					grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];

 					grid-template-columns: auto 1fr auto;

 				</pre>

 			</div>

 	</dl>

 	Note: The 'grid' shorthand accepts the same syntax,

 	but also resets the implicit grid properties to their initial values.

 	Unless authors want those to cascade in separately,

 	it is therefore recommended to use 'grid' instead of 'grid-template'.

 <!--

 ████ ██     ██ ████████  ██       ████  ██████  ████ ████████

  ██  ███   ███ ██     ██ ██        ██  ██    ██  ██     ██

  ██  ████ ████ ██     ██ ██        ██  ██        ██     ██

  ██  ██ ███ ██ ████████  ██        ██  ██        ██     ██

  ██  ██     ██ ██        ██        ██  ██        ██     ██

  ██  ██     ██ ██        ██        ██  ██    ██  ██     ██

 ████ ██     ██ ██        ████████ ████  ██████  ████    ██

 -->

 <h2 id='implicit-grids'>

 The Implicit Grid</h2>

 	The 'grid-template' property and its longhands define a fixed number of tracks that form the <a>explicit grid</a>.

 	When <a>grid items</a> are positioned outside of these bounds,

 	the <a>grid container</a> generates

 	<dfn export lt="implicit grid track|implicit grid row|implicit grid column">implicit grid tracks</dfn>

 	by adding <dfn>implicit grid lines</dfn> to the <a>grid</a>.

 	These lines together with the <a>explicit grid</a> form the <dfn export local-lt="implicit">implicit grid</dfn>.

 	The 'grid-auto-rows' and 'grid-auto-columns' properties size these <a>implicit grid tracks</a>.

 	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>.

 	<div class='example'>

 		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.

 		<figure class="figure">

 			<img alt="" src="images/implicit-columns-and-rows.svg">

 			<figcaption>

 				A Grid with an implicit row and four implicit columns, two of which are zero-sized.

 				The black grid lines are from the <a>explicit grid</a>,

 				the gray grid lines are from the <a>implicit grid</a>.

 				The numbers indicate the line indexes.

 			</figcaption>

 		</figure>

 		<pre>

 			<style>

 				#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; }

 			</style>

 			<div id="grid">

 				<div id="A">A</div>

 				<div id="B">B</div>

 				<div id="C">C</div>

 			</div>

 		</pre>

 	</div>

 <!--

    ███    ██     ██ ████████  ███████        ████████ ████████     ███     ██████  ██    ██  ██████

   ██ ██   ██     ██    ██    ██     ██          ██    ██     ██   ██ ██   ██    ██ ██   ██  ██    ██

  ██   ██  ██     ██    ██    ██     ██          ██    ██     ██  ██   ██  ██       ██  ██   ██

 ██     ██ ██     ██    ██    ██     ██          ██    ████████  ██     ██ ██       █████     ██████

 █████████ ██     ██    ██    ██     ██          ██    ██   ██   █████████ ██       ██  ██         ██

 ██     ██ ██     ██    ██    ██     ██          ██    ██    ██  ██     ██ ██    ██ ██   ██  ██    ██

 ██     ██  ███████     ██     ███████           ██    ██     ██ ██     ██  ██████  ██    ██  ██████

 -->

 <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>

 	If a grid item is positioned into a row or column that is not explicitly sized

 	by 'grid-template-rows' or 'grid-template-columns',

 	<a>implicit grid tracks</a> 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.

 	Issue: Provide example.

 <!--

  ██████   ████████  ████ ████████             ███    ██     ██ ████████  ███████          ████████ ██        ███████  ██      ██

 ██    ██  ██     ██  ██  ██     ██           ██ ██   ██     ██    ██    ██     ██         ██       ██       ██     ██ ██  ██  ██

 ██        ██     ██  ██  ██     ██          ██   ██  ██     ██    ██    ██     ██         ██       ██       ██     ██ ██  ██  ██

 ██   ████ ████████   ██  ██     ██ ███████ ██     ██ ██     ██    ██    ██     ██ ███████ ██████   ██       ██     ██ ██  ██  ██

 ██    ██  ██   ██    ██  ██     ██         █████████ ██     ██    ██    ██     ██         ██       ██       ██     ██ ██  ██  ██

 ██    ██  ██    ██   ██  ██     ██         ██     ██ ██     ██    ██    ██     ██         ██       ██       ██     ██ ██  ██  ██

  ██████   ██     ██ ████ ████████          ██     ██  ███████     ██     ███████          ██       ████████  ███████   ███  ███

 -->

 <h3 id="grid-auto-flow-property">

 <dfn lt="auto-placement|automatic placement">Automatic Placement</dfn>: the 'grid-auto-flow' property</h3>

 	<pre class='propdef'>

 	Name: grid-auto-flow

 	Value: [ row | column ] || dense

 	Initial: row

 	Applies to: <a>grid containers</a>

 	Inherited: no

 	Percentages: n/a

 	Media: visual

 	Computed value: specified value

 	</pre>

 	<a>Grid items</a> that aren't explicitly placed are automatically placed

 	into an unoccupied space in the <a>grid container</a>

 	by the <a>auto-placement algorithm</a>.

 	'grid-auto-flow' controls how the <a>auto-placement algorithm</a> works,

 	specifying exactly how auto-placed items get flowed into the grid.

 	See [[#auto-placement-algo]] for details on precisely how the auto-placement algorithm works.

 	<dl dfn-for="grid-auto-flow" dfn-type=value>

 		<dt><dfn>row</dfn>

 		<dd>

 			The <a>auto-placement algorithm</a> places items

 			by filling each row in turn,

 			adding new rows as necessary.

 			If neither ''row'' nor ''column'' is provided,

 			''row'' is assumed.

 		<dt><dfn>column</dfn>

 		<dd>

 			The <a>auto-placement algorithm</a> places items

 			by filling each column in turn,

 			adding new columns as necessary.

 		<dt><dfn>dense</dfn>

 		<dd>

 			If specified, the <a>auto-placement algorithm</a> uses a “dense” packing algorithm,

 			which attempts to fill in holes earlier in the grid if smaller items come up later.

 			This may cause items to appear out-of-order,

 			when doing so would fill in holes left by larger items.

 			If omitted, a “sparse” algorithm is used,

 			where the placement algorithm only ever moves “forward” in the grid when placing items,

 			never backtracking to fill holes.

 			This ensures that all of the auto-placed items appear “in order”,

 			even if this leaves holes that could have been filled by later items.

 	</dl>

 	Note: A future level of this module is expected to add a value that flows auto-positioned items together into a single “default” cell.

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

 	<div class='example'>

 		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 ''grid-auto-flow/row''

 		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">

 				<img 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>

 			<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: row dense;

 			}

 			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-block {

 				/* 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;

 			}

 			</style>

 			<form>

 				<label for="firstname">First name:</label>

 				<input type="text" id="firstname" name="firstname" />

 				<label for="lastname">Last name:</label>

 				<input type="text" id="lastname" name="lastname" />

 				<label for="address">Address:</label>

 				<input type="text" id="address" name="address" />

 				<label for="address2">Address 2:</label>

 				<input type="text" id="address2" name="address2" />

 				<label for="city">City:</label>

 				<input type="text" id="city" name="city" />

 				<label for="state">State:</label>

 				<select type="text" id="state" name="state">

 					<option value="WA">Washington</option>

 				</select>

 				<label for="zip">Zip:</label>

 				<input type="text" id="zip" name="zip" />

 				<div id="department-block">

 					<label for="department">Department:</label>

 					<select id="department" name="department" multiple>

 						<option value="finance">Finance</option>

 						<option value="humanresources">Human Resources</option>

 						<option value="marketing">Marketing</option>

 					</select>

 				</div>

 				<div id="buttons">

 					<button id="cancel">Cancel</button>

 					<button id="back">Back</button>

 					<button id="next">Next</button>

 				</div>

 			</form>

 		</pre>

 	</div>

 <!--

  ██████   ████████  ████ ████████

 ██    ██  ██     ██  ██  ██     ██

 ██        ██     ██  ██  ██     ██

 ██   ████ ████████   ██  ██     ██

 ██    ██  ██   ██    ██  ██     ██

 ██    ██  ██    ██   ██  ██     ██

  ██████   ██     ██ ████ ████████

 -->

 <h2 id='grid-shorthand'>

 Grid Definition Shorthand: the 'grid' property</h2>

 	<pre class='propdef'>

 	Name: grid

 	Value: <<'grid-template'>> | [ <<'grid-auto-flow'>> [ <<'grid-auto-rows'>> [ / <<'grid-auto-columns'>> ]? ]? ]

 	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>

 	The 'grid' property is a <a>shorthand</a> that sets

 	all of the explicit grid properties

 	('grid-template-rows', 'grid-template-columns', and 'grid-template-areas'),

 	all the implicit grid properties

 	('grid-auto-rows', 'grid-auto-columns', and 'grid-auto-flow'),

 	and the gutter properties

 	('grid-column-gap' and 'grid-row-gap')

 	in a single declaration.

 	If <<'grid-auto-columns'>> value is omitted,

 	it is set to the value specified for <<'grid-auto-rows'>>.

 	Other omitted values are set to their initial values.

 	Note: Note that you can only specify the explicit <em>or</em> the implicit grid properties in a single 'grid' declaration.

 	The sub-properties you don't specify are set to their initial value,

 	as normal for <a>shorthands</a>.

 	Also, the gutter properties are <a lt="reset-only sub-property">reset</a> by this shorthand,

 	even though they can't be set by it.

 	<div class='example'>

 		In addition to accepting the 'grid-template' shorthand syntax for setting up the <a>explicit grid</a>,

 		the 'grid' shorthand can also easily set up parameters for an auto-formatted grid.

 		For example, ''grid: row 1fr;'' is equivalent to

 		<pre>

 			grid-template: none;

 			grid-auto-flow: row;

 			grid-auto-rows: 1fr;

 			grid-auto-columns: 1fr;

 		</pre>

 		Similarly, ''grid: column 1fr / auto'' is equivalent to

 		<pre>

 			grid-template: none;

 			grid-auto-flow: column;

 			grid-auto-rows: 1fr;

 			grid-auto-columns: auto;

 		</pre>

 	</div>

 <!--

  ██████  ██          ███    ██     ██ ████████  ████ ██    ██  ██████

 ██    ██ ██         ██ ██   ███   ███ ██     ██  ██  ███   ██ ██    ██

 ██       ██        ██   ██  ████ ████ ██     ██  ██  ████  ██ ██

 ██       ██       ██     ██ ██ ███ ██ ████████   ██  ██ ██ ██ ██   ████

 ██       ██       █████████ ██     ██ ██         ██  ██  ████ ██    ██

 ██    ██ ██       ██     ██ ██     ██ ██         ██  ██   ███ ██    ██

  ██████  ████████ ██     ██ ██     ██ ██        ████ ██    ██  ██████

 -->

 <h2 id="overlarge-grids">

 Clamping Overlarge Grids</h2>

 	Since memory is not infinite,

 	UAs may clamp the possible size of the <a>grid</a>

 	to within a UA-defined limit,

 	dropping all lines outside that limit.

 	If a grid item is placed outside this limit,

 	its grid area must be <a>clamped</a> to within this limited grid.

 	To <dfn local-lt=clamp>clamp a grid area</dfn>:

 	* If the <a>grid area</a> would span outside the limited grid,

 		its span is clamped to the last line of the limited <a>grid</a>.

 	* If the <a>grid area</a> would be placed completely outside the limited grid

 		its span must be truncated to 1

 		and the area repositioned into the last <a>grid track</a> on that side of the grid.

 	<div class='example'>

 		For example, if a UA only supported grids with at most 1000 tracks in each dimension,

 		the following placement properties:

 		<pre class="lang-css">

 		.grid-item {

 			grid-row: 500 / 1500;

 			grid-column: 2000 / 3000;

 		}

 		</pre>

 		Would end up being equivalent to:

 		<pre class="lang-css">

 		.grid-item {

 			grid-row: 500 / 1001;

 			grid-column: 1000 / 1001;

 		}

 		</pre>

 	</div>

 <!--

 ████████  ██          ███     ██████  ████ ██    ██  ██████

 ██     ██ ██         ██ ██   ██    ██  ██  ███   ██ ██    ██

 ██     ██ ██        ██   ██  ██        ██  ████  ██ ██

 ████████  ██       ██     ██ ██        ██  ██ ██ ██ ██   ████

 ██        ██       █████████ ██        ██  ██  ████ ██    ██

 ██        ██       ██     ██ ██    ██  ██  ██   ███ ██    ██

 ██        ████████ ██     ██  ██████  ████ ██    ██  ██████

 -->

 <h2 id="placement">

 Placing Grid Items</h2>

 	Every <a>grid item</a> has a <a>grid area</a>,

 	a rectangular set of <a>grid cells</a> that the <a>grid item</a> occupies.

 	This <a>grid area</a> defines the <a>containing block</a> for the <a>grid item</a>

 	within which the alignment properties ('justify-self' and 'align-self') determine their actual position.

 	The cells that a <a>grid item</a> occupies also influence the sizing of the grid's rows and columns,

 	defined in [[#layout-algorithm]].

 	The location of a <a>grid item’s</a> <a>grid area</a> within the <a>grid</a>

 	is defined by its <dfn export lt="grid placement" local-lt="placement">placement</dfn>,

 	which consists of a <a>grid position</a> and a <a>grid span</a>:

 	<dl export>

 		<dt><dfn export local-lt="position|row position|column position">grid position</dfn>

 		<dd>

 			The <a>grid item</a>’s location in the <a>grid</a>.

 			A <a>grid position</a> can be either

 			<dfn export lt="definite grid position|definite row position|definite column position|definite position">definite</dfn> (explicitly specified)

 			or <dfn export lt="automatic grid position|automatic row position|automatic column position|automatic position">automatic</dfn> (determined by <a>auto-placement</a>).

 		<dt><dfn export local-lt="span|row span|column span">grid span</dfn>

 		<dd>

 			How many <a>grid tracks</a> the <a>grid item</a> occupies.

 			A <a>subgrid</a>’s <a>grid span</a> can be <dfn lt="automatic grid span|automatic row span|automatic column span|automatic span">automatic</dfn>

 			(determined by its <a>implicit grid</a>) if not specified or implied;

 			a <a>grid item</a>’s <a>grid span</a> is otherwise always <dfn export lt="definite grid span|definite row span|definite column span|definite span">definite</dfn> (defaulting to 1).

 	</dl>

 	The <dfn export lt="grid-placement property">grid-placement properties</dfn>--

 	the longhands 'grid-row-start', 'grid-row-end', 'grid-column-start', 'grid-column-end', and their shorthands 'grid-row', 'grid-column', and 'grid-area'--

 	allow the author to specify a <a>grid item</a>’s <a>placement</a>

 	by providing any (or none) of the following six pieces of information:

 	<table class=data style="width: auto">

 		<thead>

 			<tr>

 				<td>

 				<th>Row

 				<th>Column

 		<tbody>

 			<tr>

 				<th>|Start|

 				<td>row-start line

 				<td>column-start line

 			<tr>

 				<th>|End|

 				<td>row-end line

 				<td>column-end line

 			<tr>

 				<th>|Span|

 				<td>row span

 				<td>column span

 	</table>

 	A definite value for any two of <var>Start</var>, <var>End</var>, and <var>Span</var> in a given dimension implies a definite value for the third.

 	The following table summarizes the conditions under which a grid position or span is <i lt>definite</i> or <i lt>automatic</i>:

 	<table class='data'>

 		<thead>

 			<tr>

 				<td>

 				<th>Position

 				<th>Span

 		<tbody>

 			<tr>

 				<th>Definite

 				<td>At least one specified line

 				<td>Explicit, implicit, or defaulted span. <br> <span class="note">Note: Non-<a>subgrids</a> default to 1.</span>

 			<tr>

 				<th>Automatic

 				<td>No lines explicitly specified

 				<td><a>Subgrid</a> without an explicit or implied span

 	</table>

 <h3 id='common-uses'>

 Common Patterns for Grid Placement</h3>

 	<em>This section is informative.</em>

 	The <a>grid-placement property</a> longhands are organized into three shorthands:

 	<table class=data id="grid-property-breakdown">

 		<tr>

 			<td colspan=4>'grid-area'

 		<tr>

 			<td colspan=2>'grid-column'

 			<td colspan=2>'grid-row'

 		<tr>

 			<td>'grid-column-start'

 			<td>'grid-column-end'

 			<td>'grid-row-start'

 			<td>'grid-row-end'

 	</table>

 <h4 id='common-uses-named-areas'>

 Named Areas</h4>

 	An item can be placed into a <a>named grid area</a>

 	(such as those produced by the template in 'grid-template-areas')

 	by specifying the area’s name in 'grid-area':

 	<div class='example'>

 		<pre>

 			article {

 				grid-area: main;

 				/* Places item into the named area "main". */

 			}

 		</pre>

 	</div>

 	An item can also be <em>partially</em> aligned with a <a>named grid area</a>,

 	with other edges aligned to some other line:

 	<div class='example'>

 		<pre>

 			.one {

 				grid-row-start: main;

 				/* Align the row-start edge to the start edge of the "main" named area. */

 			}

 		</pre>

 	</div>

 <h4 id='common-uses-numeric'>

 Numeric Indexes and Spans</h4>

 	Grid items can be positioned and sized by number,

 	which is particularly helpful for script-driven layouts:

 	<div class='example'>

 		<pre>

 			.two {

 				grid-row: 2;    /* Place item in the second row. */

 				grid-column: 3; /* Place item in the third column. */

 				/* Equivalent to grid-area: 2 / 3;

 			}

 		</pre>

 	</div>

 	By default, a grid item has a span of 1.

 	Different spans can be given explicitly:

 	<div class='example'>

 		<pre>

 			.three {

 				grid-row: 2 / span 5;

 				/* Starts in the 2nd row,

 				   spans 5 rows down (ending in the 7th row). */

 			}

 			.four {

 				grid-row: span 5 / 7;

 				/* <em>Ends</em> in the 7th row,

 				   spans 5 rows up (starting in the 2nd row). */

 			}

 		</pre>

 	</div>

 	Note: Note that grid indexes are <a>writing mode</a> relative.

 	For example, in a right-to-left language like Arabic,

 	the first column is the rightmost column.

 <h4 id='common-uses-named-lines'>

 Named Lines and Spans</h4>

 	Instead of counting lines by number,

 	<a>named lines</a> can be referenced by their name:

 	<div class='example'>

 		<pre>

 			.five {

 				grid-column: first / middle;

 				/* Span from line "first" to line "middle". */

 			}

 		</pre>

 	</div>

 	Note: Note that if a <a>named grid area</a> and a <a>named line</a> have the same name,

 	the placement algorithm will prefer to use <a>named grid area</a>’s edge instead.

 	If there are multiple lines of the same name,

 	they effectively establish a named set of grid lines,

 	which can be exclusively indexed by filtering the placement by name:

 	<div class='example'>

 		<pre>

 			.six {

 				grid-row: text 5 / text 7;

 				/* Span between the 5th and 7th lines named "text". */

 				grid-row: text 5 / span text 2;

 				/* Same as above. */

 			}

 		</pre>

 	</div>

 <h4 id='common-uses-auto-placement'>

 Auto Placement</h4>

 	A <a>grid item</a> can be automatically placed into the next available empty <a>grid cell</a>,

 	growing the <a>grid</a> if there's no space left.

 	<div class='example'>

 		<pre>

 			.eight {

 				grid-area: auto; /* Initial value */

 			}

 		</pre>

 	</div>

 	This can be used, for example, to list a number of sale items on a catalog site

 	in a grid pattern.

 	Auto-placement can be combined with an explicit span,

 	if the item should take up more than one cell:

 	<div class='example'>

 		<pre>

 			.nine {

 				grid-area: span 2 / span 3;

 				/* Auto-placed item, covering two rows and three columns. */

 			}

 		</pre>

 	</div>

 	Whether the <a>auto-placement algorithm</a> searchs across and adds rows,

 	or searches across and adds columns,

 	is controlled by the 'grid-auto-flow' property.

 	Note: By default, the <a>auto-placement algorithm</a> looks linearly through the grid without backtracking;

 	if it has to skip some empty spaces to place a larger item,

 	it will not return to fill those spaces.

 	To change this behavior,

 	specify the ''dense'' keyword in 'grid-auto-flow'.

 <h4 id='common-uses-auto-sizing'>

 Auto Sizing Subgrids</h4>

 	A subgrid without a <a>definite grid span</a> is sized to its <a>implicit grid</a>,

 	i.e. all of its items within it are first placed into its own grid,

 	and its span is the resulting size of its grid.

 	<div class='example'>

 		For example, a subgrid spanning two columns can be given an auto-spanning <a>block size</a>:

 		<pre>

 			.adverts {

 				grid: subgrid;

 				grid-column: span 2;

 			}

 		</pre>

 		If it contains 10 auto-placed items, it will span 5 rows in its parent grid.

 	</div>

 	Note: Since auto-spanning <a>subgrids</a> determine their span before being positioned,

 	they can also be auto-positioned.

 	The above example would auto-place the <code>.adverts</code> block,

 	if no further rules specified its position.

 <h3 id="placement-a11y">

 Grid Item Placement vs. Source Order</h3>

 	<blockquote>

 		<p>“With great power comes great responsibility.”

 	</blockquote>

 	The abilities of the <a>grid-placement properties</a>

 	allow content to be freely arranged and reordered within the <a>grid</a>,

 	such that the visual presentation can be largely disjoint

 	from the underlying document source order.

 	These abilities allow the author great freedom

 	in tailoring the rendering to different devices

 	and modes of presentation

 	e.g. using <a>media queries</a>.

 	However <strong>they are not a substitute for correct source ordering</strong>.

 	Correct source order is important for speech,

 	for sequential navigation (such as keyboard navigation),

 	and non-CSS UAs such as search engines, tactile browsers, etc.

 	Grid placement <em>only</em> affects the visual presentation!

 	This allows authors to optimize the document source for

 	non-CSS/non-visual interaction modes,

 	and use grid placement techniques to further manipulate the visual presentation

 	so as to leave that source order intact.

 <!--

  ██████   ████████  ████ ████████          ████████   ███████  ██      ██          ██████  ████████    ███    ████████  ████████

 ██    ██  ██     ██  ██  ██     ██         ██     ██ ██     ██ ██  ██  ██         ██    ██    ██      ██ ██   ██     ██    ██

 ██        ██     ██  ██  ██     ██         ██     ██ ██     ██ ██  ██  ██         ██          ██     ██   ██  ██     ██    ██

 ██   ████ ████████   ██  ██     ██ ███████ ████████  ██     ██ ██  ██  ██ ███████  ██████     ██    ██     ██ ████████     ██

 ██    ██  ██   ██    ██  ██     ██         ██   ██   ██     ██ ██  ██  ██               ██    ██    █████████ ██   ██      ██

 ██    ██  ██    ██   ██  ██     ██         ██    ██  ██     ██ ██  ██  ██         ██    ██    ██    ██     ██ ██    ██     ██

  ██████   ██     ██ ████ ████████          ██     ██  ███████   ███  ███           ██████     ██    ██     ██ ██     ██    ██

 -->

 <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> and absolutely-positioned boxes whose containing block is a <a>grid container</a>

 	Inherited: no

 	Percentages: n/a

 	Media: visual

 	Computed value: specified value

 	</pre>

 	<pre>

 		<dfn for="grid-row-start, grid-column-start, grid-row-end, grid-column-end"><<grid-line>></dfn> =

 		  auto |

 		  <<custom-ident>> |

 		  [ <<integer>> && <<custom-ident>>? ] |

 		  [ span &amp;&amp; [ <<integer>> || <<custom-ident>> ] ]

 	</pre>

 	The 'grid-row-start', 'grid-column-start', 'grid-row-end', and 'grid-column-end' properties

 	determine a <a>grid item</a>’s size and location within the <a>grid</a>

 	by contributing a line, a span, or nothing (automatic)

 	to its <a>grid placement</a>,

 	thereby specifying the <a>inline-start</a>, <a>block-start</a>, <a>inline-end</a>, and <a>block-end</a> edges of its <a>grid area</a>.

 	Values have the following meanings:

 	<dl dfn-for="<grid-line>" dfn-type=value>

 		<dt><dfn id='grid-placement-slot'><<custom-ident>></dfn>

 		<dd>

 			First attempt to match the <a>grid area</a>’s edge to a <a>named grid area</a>:

 			if there is a <a>named line</a> with the name ''<<custom-ident>>-start'' (for 'grid-*-start') / ''<<custom-ident>>-end'' (for 'grid-*-end'),

 			contributes the first such line to the <a>grid item</a>’s <a>placement</a>.

 			Note: <a>Named grid areas</a> automatically generate <a>implicit named lines</a> of this form,

 			so specifying ''grid-row-start: foo'' will choose the start edge of that <a>named grid area</a>

 			(unless another line named ''foo-start'' was explicitly specified before it).

 			Otherwise,

 			treat this as if the integer ''1'' had been specified along with the <<custom-ident>>.

 		<dt><dfn id='grid-placement-int'><<integer>> && <<custom-ident>>?</dfn>

 		<dd>

 			Contributes the <var>N</var>th <a>grid line</a> to the <a>grid item</a>’s <a>placement</a>.

 			If a negative integer is given,

 			it instead counts in reverse,

 			starting from the end edge of the <a>explicit grid</a>.

 			If a name is given as a <<custom-ident>>,

 			only lines with that name are counted.

 			If not enough lines with that name exist,

 			all <a>implicit grid lines</a>

 			are assumed to have that name for the purpose of finding this position.

 			An <<integer>> value of zero makes the declaration invalid.

 		<dt><dfn id='grid-placement-span-int'>span && [ <<integer>> || <<custom-ident>> ]</dfn>

 		<dd>

 			Contributes a <a>grid span</a> to the <a>grid item</a>’s <a>placement</a>

 			such that the corresponding edge of the <a>grid item</a>’s <a>grid area</a> is <var>N</var> lines from its opposite edge

 			in the corresponding direction.

 			For example, ''grid-column-end: span 2'' indicates the second grid line in the endward direction

 			from the 'grid-column-start' line.

 			If a name is given as a <<custom-ident>>,

 			only lines with that name are counted.

 			If not enough lines with that name exist,

 			all <a>implicit grid lines</a>

 			on the side of the <a>explicit grid</a> corresponding to the search direction

 			are assumed to have that name for the purpose of counting this span.

 			<div class="example">

 				For example, given the following declarations:

 				<pre class="lang-css">

 				.grid { grid-template-columns: 100px; }

 				.griditem { grid-column: span foo / 4; }

 				</pre>

 				The <a>grid container</a> has an <a>explicit grid</a> with two grid lines,

 				numbered 1 and 2.

 				The <a>grid item's</a> column-end edge is specified to be at line 4,

 				so two lines are generated in the endward side of the <a>implicit grid</a>.

 				Its column-start edge must be the first "foo" line it can find startward of that.

 				There is no "foo" line in the grid, though,

 				so the only possibility is a line in the <a>implicit grid</a>.

 				Line 3 is not a candidate, because it's on the endward side of the <a>explicit grid</a>,

 				while the 'grid-column-start' span forces it to search startward.

 				So, the only option is for the <a>implicit grid</a> to generate a line on the startward side of the <a>explicit grid</a>.

 				<figure>

 					<img src="images/implicit-lines-search.svg" width=600>

 					<figcaption>An illustration of the result.

 				</figure>

 			</div>

 			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>,

 			indicating <a>auto-placement</a>, an <a>automatic span</a>, or a default span of one.

 			(See [[#placement]], above.)

 	</dl>

 	<div class='example'>

 			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>

 			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 -1;

 			/* 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 -1;

 			/* Line 6 to line 9 */

 			grid-column-start: span C; grid-column-end: span C;

 			/* Error: The end span is ignored, and an auto-placed

 			   item can't span to a named line.

 			   Equivalent to ''grid-column: span 1;''. */

 			grid-column-start: 5; grid-column-end: C -1;

 			/* 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>

 <h4 id='grid-placement-errors'>

 Grid Placement Conflict Handling</h4>

 	If the <a>placement</a> for a <a>grid item</a> contains two lines,

 	and the <a>start</a> line is further end-ward than the <a>end</a> line,

 	swap the two lines.

 	If the <a>start</a> line is <em>equal</em> to the <a>end</a> line,

 	remove the <a>end</a> line.

 	If the <a>placement</a> contains two spans,

 	remove the one contributed by the <a>end</a> <a>grid-placement property</a>.

 	If the <a>placement</a> contains only a span for a named line,

 	replace it with a span of 1.