css-grid/Overview.html

<!doctype html>
<html lang="en">
  <head>
  
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    
  
    <title>CSS Grid Layout Module Level 1</title>
    
  
    <link href="../default.css" rel="stylesheet" type="text/css">
    
  
    <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
    
  
    <style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white;
    background-attachment: fixed;
    color: black;
    font-family: sans-serif;
    margin: 0 auto;
    max-width: 50em;
    padding: 2em 1em 2em 70px;
  }
  :link { color: #00C; background: transparent }
  :visited { color: #609; background: transparent }
  a[href]:active { color: #C00; background: transparent }
  a[href]:hover { background: #ffa }

  a[href] img { border-style: none }

  h1, h2, h3, h4, h5, h6 { text-align: left }
  h1, h2, h3 { color: #005A9C; }
  h1 { font: 170% sans-serif }
  h2 { font: 140% sans-serif }
  h3 { font: 120% sans-serif }
  h4 { font: bold 100% sans-serif }
  h5 { font: italic 100% sans-serif }
  h6 { font: small-caps 100% sans-serif }

  .hide { display: none }

  div.head { margin-bottom: 1em }
  div.head h1 { margin-top: 2em; clear: both }
  div.head table { margin-left: 2em; margin-top: 2em }

  p.copyright { font-size: small }
  p.copyright small { font-size: small }

  pre { margin-left: 2em }
  dt { font-weight: bold }

  ul.toc, ol.toc {
    list-style: none;
  }
  </style>
    

    <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;
}
</style>
    

    <script>self = (typeof window !== 'undefined')
	? window   // if in browser
	: (
		(typeof WorkerGlobalScope !== 'undefined' &amp;&amp; self instanceof WorkerGlobalScope)
		? self // if in worker
		: {}   // if in node js
	);

/**
 * Prism: Lightweight, robust, elegant syntax highlighting
 * MIT license http://www.opensource.org/licenses/mit-license.php/
 * @author Lea Verou http://lea.verou.me
 */

var Prism = (function(){

// Private helper vars
var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;

var _ = self.Prism = {
	util: {
		encode: function (tokens) {
			if (tokens instanceof Token) {
				return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias);
			} else if (_.util.type(tokens) === 'Array') {
				return tokens.map(_.util.encode);
			} else {
				return tokens.replace(/&amp;/g, '&amp;amp;').replace(/&lt;/g, '&amp;lt;').replace(/\u00a0/g, ' ');
			}
		},

		type: function (o) {
			return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1];
		},

		// Deep clone a language definition (e.g. to extend it)
		clone: function (o) {
			var type = _.util.type(o);

			switch (type) {
				case 'Object':
					var clone = {};

					for (var key in o) {
						if (o.hasOwnProperty(key)) {
							clone[key] = _.util.clone(o[key]);
						}
					}

					return clone;

				case 'Array':
					return o.slice();
			}

			return o;
		}
	},

	languages: {
		extend: function (id, redef) {
			var lang = _.util.clone(_.languages[id]);

			for (var key in redef) {
				lang[key] = redef[key];
			}

			return lang;
		},

		// Insert a token before another token in a language literal
		insertBefore: function (inside, before, insert, root) {
			root = root || _.languages;
			var grammar = root[inside];
			var ret = {};

			for (var token in grammar) {

				if (grammar.hasOwnProperty(token)) {

					if (token == before) {

						for (var newToken in insert) {

							if (insert.hasOwnProperty(newToken)) {
								ret[newToken] = insert[newToken];
							}
						}
					}

					ret[token] = grammar[token];
				}
			}

			return root[inside] = ret;
		},

		// Traverse a language definition with Depth First Search
		DFS: function(o, callback, type) {
			for (var i in o) {
				if (o.hasOwnProperty(i)) {
					callback.call(o, i, o[i], type || i);

					if (_.util.type(o[i]) === 'Object') {
						_.languages.DFS(o[i], callback);
					} else if (_.util.type(o[i]) === 'Array') {
						_.languages.DFS(o[i], callback, i);
					}
				}
			}
		}
	},

	highlightAll: function(async, callback) {
		var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');
		for (var i=0, element; element = elements[i++];) {
			if (element.classList.contains("idl")) {
				// Bikeshed handles IDL blocks already.
				continue;
			}
			_.highlightElement(element, async === true, callback);
		}

		var elements = document.querySelectorAll('pre[class*="language-"], [class*="language-"] pre, pre[class*="lang-"], [class*="lang-"] pre');
		for (var i=0, element; element = elements[i++];) {
			if (element.firstElementChild &amp;&amp; element.firstElementChild.tagName.toLowerCase() == "code") {
				// Already handled by the previous loop
				continue;
			}
			if (element.classList.contains("idl")) {
				// Bikeshed handles IDL blocks already.
				continue;
			}
			_.highlightElement(element, async === true, callback);
		}
	},

	highlightElement: function(element, async, callback) {
		// Find language
		var language, grammar, parent = element;

		while (parent &amp;&amp; !lang.test(parent.className)) {
			parent = parent.parentNode;
		}

		if (parent) {
			language = (parent.className.match(lang) || [,''])[1];
			grammar = _.languages[language];
		}

		if (!grammar) {
			return;
		}

		// Set language on the element, if not present
		element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;

		// Set language on the parent, for styling
		parent = element.parentNode;

		if (/pre/i.test(parent.nodeName)) {
			parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
		}

		var code = element.textContent;

		if(!code) {
			return;
		}

		var env = {
			element: element,
			language: language,
			grammar: grammar,
			code: code
		};

		_.hooks.run('before-highlight', env);

		if (async &amp;&amp; self.Worker) {
			var worker = new Worker(_.filename);

			worker.onmessage = function(evt) {
				env.highlightedCode = Token.stringify(JSON.parse(evt.data), language);

				_.hooks.run('before-insert', env);

				env.element.innerHTML = env.highlightedCode;

				callback &amp;&amp; callback.call(env.element);
				_.hooks.run('after-highlight', env);
			};

			worker.postMessage(JSON.stringify({
				language: env.language,
				code: env.code
			}));
		}
		else {
			env.highlightedCode = _.highlight(env.code, env.grammar, env.language)

			_.hooks.run('before-insert', env);

			env.element.innerHTML = env.highlightedCode;

			callback &amp;&amp; callback.call(element);

			_.hooks.run('after-highlight', env);
		}
	},

	highlight: function (text, grammar, language) {
		var tokens = _.tokenize(text, grammar);
		return Token.stringify(_.util.encode(tokens), language);
	},

	tokenize: function(text, grammar, language) {
		var Token = _.Token;

		var strarr = [text];

		var rest = grammar.rest;

		if (rest) {
			for (var token in rest) {
				grammar[token] = rest[token];
			}

			delete grammar.rest;
		}

		tokenloop: for (var token in grammar) {
			if(!grammar.hasOwnProperty(token) || !grammar[token]) {
				continue;
			}

			var patterns = grammar[token];
			patterns = (_.util.type(patterns) === "Array") ? patterns : [patterns];

			for (var j = 0; j &lt; patterns.length; ++j) {
				var pattern = patterns[j],
					inside = pattern.inside,
					lookbehind = !!pattern.lookbehind,
					lookbehindLength = 0,
					alias = pattern.alias;

				pattern = pattern.pattern || pattern;

				for (var i=0; i&lt;strarr.length; i++) { // Don’t cache length as it changes during the loop

					var str = strarr[i];

					if (strarr.length > text.length) {
						// Something went terribly wrong, ABORT, ABORT!
						break tokenloop;
					}

					if (str instanceof Token) {
						continue;
					}

					pattern.lastIndex = 0;

					var match = pattern.exec(str);

					if (match) {
						if(lookbehind) {
							lookbehindLength = match[1].length;
						}

						var from = match.index - 1 + lookbehindLength,
							match = match[0].slice(lookbehindLength),
							len = match.length,
							to = from + len,
							before = str.slice(0, from + 1),
							after = str.slice(to + 1);

						var args = [i, 1];

						if (before) {
							args.push(before);
						}

						var wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias);

						args.push(wrapped);

						if (after) {
							args.push(after);
						}

						Array.prototype.splice.apply(strarr, args);
					}
				}
			}
		}

		return strarr;
	},

	hooks: {
		all: {},

		add: function (name, callback) {
			var hooks = _.hooks.all;

			hooks[name] = hooks[name] || [];

			hooks[name].push(callback);
		},

		run: function (name, env) {
			var callbacks = _.hooks.all[name];

			if (!callbacks || !callbacks.length) {
				return;
			}

			for (var i=0, callback; callback = callbacks[i++];) {
				callback(env);
			}
		}
	}
};

var Token = _.Token = function(type, content, alias) {
	this.type = type;
	this.content = content;
	this.alias = alias;
};

Token.stringify = function(o, language, parent) {
	if (typeof o == 'string') {
		return o;
	}

	if (Object.prototype.toString.call(o) == '[object Array]') {
		return o.map(function(element) {
			return Token.stringify(element, language, o);
		}).join('');
	}

	var env = {
		type: o.type,
		content: Token.stringify(o.content, language, parent),
		tag: 'span',
		classes: ['token', o.type],
		attributes: {},
		language: language,
		parent: parent
	};

	if (env.type == 'comment') {
		env.attributes['spellcheck'] = 'true';
	}

	if (o.alias) {
		var aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias];
		Array.prototype.push.apply(env.classes, aliases);
	}

	_.hooks.run('wrap', env);

	var attributes = '';

	for (var name in env.attributes) {
		attributes += name + '="' + (env.attributes[name] || '') + '"';
	}

	return '&lt;' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '&lt;/' + env.tag + '>';

};

if (!self.document) {
	if (!self.addEventListener) {
		// in Node.js
		return self.Prism;
	}
 	// In worker
	self.addEventListener('message', function(evt) {
		var message = JSON.parse(evt.data),
		    lang = message.language,
		    code = message.code;

		self.postMessage(JSON.stringify(_.util.encode(_.tokenize(code, _.languages[lang]))));
		self.close();
	}, false);

	return self.Prism;
}

// Get current script and highlight
var script = document.getElementsByTagName('script');

script = script[script.length - 1];

if (script) {
	_.filename = script.src;

	if (document.addEventListener &amp;&amp; !script.hasAttribute('data-manual')) {
		document.addEventListener('DOMContentLoaded', _.highlightAll);
	}
}

return self.Prism;

})();

if (typeof module !== 'undefined' &amp;&amp; module.exports) {
	module.exports = Prism;
}
;
Prism.languages.markup = {
	'comment': /&lt;!--[\w\W]*?-->/g,
	'prolog': /&lt;\?.+?\?>/,
	'doctype': /&lt;!DOCTYPE.+?>/,
	'cdata': /&lt;!\[CDATA\[[\w\W]*?]]>/i,
	'tag': {
		pattern: /&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,
		inside: {
			'tag': {
				pattern: /^&lt;\/?[\w:-]+/i,
				inside: {
					'punctuation': /^&lt;\/?/,
					'namespace': /^[\w-]+?:/
				}
			},
			'attr-value': {
				pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,
				inside: {
					'punctuation': /=|>|"/g
				}
			},
			'punctuation': /\/?>/g,
			'attr-name': {
				pattern: /[\w:-]+/g,
				inside: {
					'namespace': /^[\w-]+?:/
				}
			}

		}
	},
	'entity': /\&amp;#?[\da-z]{1,8};/gi
};

// Plugin to make entity title show the real entity, idea by Roman Komarov
Prism.hooks.add('wrap', function(env) {

	if (env.type === 'entity') {
		env.attributes['title'] = env.content.replace(/&amp;amp;/, '&amp;');
	}
});
;
Prism.languages.css = {
	'comment': /\/\*[\w\W]*?\*\//g,
	'atrule': {
		pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi,
		inside: {
			'punctuation': /[;:]/g
		}
	},
	'url': /url\((["']?).*?\1\)/gi,
	'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g,
	'property': /(\b|\B)[\w-]+(?=\s*:)/ig,
	'string': /("|')(\\?.)*?\1/g,
	'important': /\B!important\b/gi,
	'punctuation': /[\{\};:]/g,
	'function': /[-a-z0-9]+(?=\()/ig
};

if (Prism.languages.markup) {
	Prism.languages.insertBefore('markup', 'tag', {
		'style': {
			pattern: /&lt;style[\w\W]*?>[\w\W]*?&lt;\/style>/ig,
			inside: {
				'tag': {
					pattern: /&lt;style[\w\W]*?>|&lt;\/style>/ig,
					inside: Prism.languages.markup.tag.inside
				},
				rest: Prism.languages.css
			}
		}
	});
};
Prism.languages.css.selector = {
	pattern: /[^\{\}\s][^\{\}]*(?=\s*\{)/g,
	inside: {
		'pseudo-element': /:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,
		'pseudo-class': /:[-\w]+(?:\(.*\))?/g,
		'class': /\.[-:\.\w]+/g,
		'id': /#[-:\.\w]+/g
	}
};

Prism.languages.insertBefore('css', 'ignore', {
	'hexcode': /#[\da-f]{3,6}/gi,
	'entity': /\\[\da-f]{1,8}/gi,
	'number': /[\d%\.]+/g
});;
</script>
    <style>/* http://prismjs.com/download.html?themes=prism&amp;languages=clike */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #a67f59;
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important {
	font-weight: bold;
}

.token.entity {
	cursor: help;
}
</style>
  </head>
  

  <body class="h-entry">

    <div class="head">
  
      <p data-fill-with="logo"><a class="logo" href="http://www.w3.org/">
    <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72">
</a>
</p>
  
      <h1 class="p-name no-ref" id="title">CSS Grid Layout Module Level 1</h1>
  
      <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft,
    <time class="dt-updated" datetime="2015-01-12">12 January 2015</time></span></h2>
  
      <div data-fill-with="spec-metadata">
        <dl>
          <dt>This version:</dt>
          <dd><a class="u-url" href="http://dev.w3.org/csswg/css-grid/">http://dev.w3.org/csswg/css-grid/</a></dd>
          <dt>Latest version:</dt>
          <dd><a href="http://www.w3.org/TR/css-grid-1/">http://www.w3.org/TR/css-grid-1/</a></dd>
          <dt>Previous Versions:</dt>
          <dd><a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140513/" rel="previous">http://www.w3.org/TR/2014/WD-css-grid-1-20140513/</a></dd>
          <dd><a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140123/" rel="previous">http://www.w3.org/TR/2014/WD-css-grid-1-20140123/</a></dd>
          <dd><a href="http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/" rel="previous">http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/</a></dd>
          <dd><a href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/" rel="previous">http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/</a></dd>
          <dt>Feedback:</dt>
          <dd><span><a href="mailto:www-style@w3.org?subject=%5Bcss-grid%5D%20feedback">www-style@w3.org</a> with subject line “<kbd>[css-grid] <var>… message topic …</var></kbd>” (<a href="http://lists.w3.org/Archives/Public/www-style/" rel="discussion">archives</a>)</span></dd>
          <dt>Issue Tracking:</dt>
          <dd><a href="#issues-index">Inline In Spec</a></dd>
          <dt class="editor">Editors:</dt>
          <dd class="editor">
            <div class="p-author h-card vcard"><a class="p-name fn u-url url" href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)</div>
          </dd>
          <dd class="editor">
            <div class="p-author h-card vcard"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">fantasai</a> (<span class="p-org org">Mozilla</span>)</div>
          </dd>
          <dd class="editor">
            <div class="p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:ratan@microsoft.com">Rossen Atanassov</a> (<span class="p-org org">Microsoft</span>)</div>
          </dd>
          <dt>Former Editors:</dt>
          <dd>
            <div class="p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:alexmog@microsoft.com">Alex Mogilevsky</a> (<span class="p-org org">Microsoft Corporation</span>)</div>
          </dd>
          <dd>
            <div class="p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:pcupp@microsoft.com">Phil Cupp</a> (<span class="p-org org">Microsoft Corporation</span>)</div>
          </dd>
          <dt>Issues list:</dt>
          <dd><span><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Grid+Layout&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED">In Bugzilla</a></span></dd>
        </dl>
      </div>
  
      <div data-fill-with="warning"></div>
  
      <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2014 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.
</p>
  
      <hr title="Separator for header">
</div>


    <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>

    <div class="p-summary" data-fill-with="abstract">
      <p>This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.</p>

<a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents 
(such as HTML and XML) 
on screen, on paper, in speech, etc.</div>


    <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>

    <div data-fill-with="status">
      <p>
	This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress.

</p>
      <p>
	The (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list
	<a href="mailto:www-style@w3.org?Subject=%5Bcss-grid%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>
	(see <a href="http://www.w3.org/Mail/Request">instructions</a>)
	is preferred for discussion of this specification.
	When sending e-mail,
	please put the text “css-grid” in the subject,
	preferably like this:
	“[css-grid] <em>…summary of comment…</em>”

</p>
      <p>
	This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>
	(part of the <a href="http://www.w3.org/Style/">Style Activity</a>).

</p>
      <p>
	This document was produced by a group operating under
	the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
	W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a>
	made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a>
	must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.

</p>
      <p>
	This document is governed by the <a href="http://www.w3.org/2014/Process-20140801/">1 August 2014 W3C Process Document</a>.
</p></div>

    <div data-fill-with="at-risk">
      <p>The following features are at-risk, and may be dropped during the CR period:
</p>
      <ul>
        <li>the <a class="css" data-link-for="grid-template-rows" data-link-type="maybe" href="#valdef-grid-template-rows-grid-template-columns-subgrid">subgrid</a> value of <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a>, and its component parts individually</li>
      </ul></div>


    <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="content">Table of Contents</span></h2>

    <div data-fill-with="table-of-contents" role="navigation">
      <ul class="toc" role="directory">
        <li><a href="#intro"><span class="secno">1</span> <span class="content">
Introduction and Overview</span></a>
          <ul class="toc">
            <li><a href="#background"><span class="secno">1.1</span> <span class="content">
Background and Motivation</span></a></li>
            <li><a href="#adapting-to-available-space"><span class="secno">1.2</span> <span class="content">
Adapting Layouts to Available Space</span></a></li>
            <li><a href="#source-independence"><span class="secno">1.3</span> <span class="content">
Source-Order Independence</span></a></li>
            <li><a href="#grid-layering"><span class="secno">1.4</span> <span class="content">
Grid Layering of Elements</span></a></li>
          </ul>
        </li>
        <li><a href="#grid-concepts"><span class="secno">2</span> <span class="content">
Grid Layout Concepts and Terminology</span></a>
          <ul class="toc">
            <li><a href="#grid-track-concept"><span class="secno">2.1</span> <span class="content">
Grid Tracks and Cells</span></a></li>
            <li><a href="#grid-line-concept"><span class="secno">2.2</span> <span class="content">
Grid Lines</span></a></li>
            <li><a href="#grid-area-concept"><span class="secno">2.3</span> <span class="content">
Grid Areas</span></a></li>
          </ul>
        </li>
        <li><a href="#grid-model"><span class="secno">3</span> <span class="content">
Grid Containers</span></a>
          <ul class="toc">
            <li><a href="#grid-containers"><span class="secno">3.1</span> <span class="content">
Establishing Grid Containers: the <span class="css" data-link-for="display" data-link-type="maybe" title="grid">grid</span> and <span class="css" data-link-type="maybe" title="inline-grid">inline-grid</span> <span class="property" data-link-type="propdesc" title="display">display</span> values</span></a></li>
            <li><a href="#intrinsic-sizes"><span class="secno">3.2</span> <span class="content">
Sizing Grid Containers</span></a></li>
          </ul>
        </li>
        <li><a href="#grid-items"><span class="secno">4</span> <span class="content">
Grid Items</span></a>
          <ul class="toc">
            <li><a href="#visibility-collapse"><span class="secno">4.1</span> <span class="content">
	Collapsed Grid Items: the <span class="property" data-link-type="propdesc" title="visibility">visibility</span> property</span></a></li>
            <li><a href="#order-property"><span class="secno">4.2</span> <span class="content">
Reordered Grid Items: the <span class="property" data-link-type="propdesc" title="order">order</span> property</span></a></li>
            <li><a href="#static-position"><span class="secno">4.3</span> <span class="content">
Static Position of Grid Container Children</span></a></li>
            <li><a href="#z-order"><span class="secno">4.4</span> <span class="content">
Z-axis Ordering: the <span class="property" data-link-type="propdesc" title="z-index">z-index</span> property</span></a></li>
          </ul>
        </li>
        <li><a href="#grid-definition"><span class="secno">5</span> <span class="content">
The Explicit Grid</span></a>
          <ul class="toc">
            <li><a href="#track-sizing"><span class="secno">5.1</span> <span class="content">
Track Sizing: the <span class="property" data-link-type="propdesc" title="grid-template-rows">grid-template-rows</span> and <span class="property" data-link-type="propdesc" title="grid-template-columns">grid-template-columns</span> properties</span></a>
              <ul class="toc">
                <li><a href="#named-lines"><span class="secno">5.1.1</span> <span class="content">
Named Grid Lines: the <span class="css">(<span class="production" data-link-type="type" title="<custom-ident>">&lt;custom-ident></span>*)</span> syntax</span></a></li>
                <li><a href="#repeat-notation"><span class="secno">5.1.2</span> <span class="content">
Repeating Rows and Columns: the <span class="css" data-link-type="maybe" title="repeat()">repeat()</span> notation</span></a></li>
                <li><a href="#fr-unit"><span class="secno">5.1.3</span> <span class="content">
Flexible Lengths: the <span class="css">fr</span> unit</span></a></li>
                <li><a href="#subgrids"><span class="secno">5.1.4</span> <span class="content">
Subgrids: the <span class="css" data-link-for="grid-template-rows" data-link-type="maybe" title="subgrid">subgrid</span> keyword</span></a></li>
                <li><a href="#resolved-track-list"><span class="secno">5.1.5</span> <span class="content">
Resolved Values</span></a></li>
              </ul>
            </li>
            <li><a href="#grid-template-areas-property"><span class="secno">5.2</span> <span class="content">
Named Areas: the <span class="property" data-link-type="propdesc" title="grid-template-areas">grid-template-areas</span> property</span></a>
              <ul class="toc">
                <li><a href="#implicit-named-lines"><span class="secno">5.2.1</span> <span class="content">
Implicit Named Lines</span></a></li>
                <li><a href="#implicit-named-areas"><span class="secno">5.2.2</span> <span class="content">
Implicit Named Areas</span></a></li>
              </ul>
            </li>
            <li><a href="#explicit-grid-shorthand"><span class="secno">5.3</span> <span class="content">
Explicit Grid Shorthand: the <span class="property" data-link-type="propdesc" title="grid-template">grid-template</span> property</span></a></li>
          </ul>
        </li>
        <li><a href="#implicit-grids"><span class="secno">6</span> <span class="content">
The Implicit Grid</span></a>
          <ul class="toc">
            <li><a href="#auto-tracks"><span class="secno">6.1</span> <span class="content">
Sizing Auto-generated Rows and Columns: the <span class="property" data-link-type="propdesc" title="grid-auto-rows">grid-auto-rows</span> and <span class="property" data-link-type="propdesc" title="grid-auto-columns">grid-auto-columns</span> properties</span></a></li>
            <li><a href="#grid-auto-flow-property"><span class="secno">6.2</span> <span class="content">
<span data-dfn-type="dfn" data-noexport="" title="auto-placement|automatic placement">Automatic Placement</span>: the <span class="property" data-link-type="propdesc" title="grid-auto-flow">grid-auto-flow</span> property</span></a></li>
          </ul>
        </li>
        <li><a href="#grid-shorthand"><span class="secno">7</span> <span class="content">
Grid Definition Shorthand: the <span class="property" data-link-type="propdesc" title="grid">grid</span> property</span></a></li>
        <li><a href="#overlarge-grids"><span class="secno">8</span> <span class="content">
Clamping Overlarge Grids</span></a></li>
        <li><a href="#placement"><span class="secno">9</span> <span class="content">
Placing Grid Items</span></a>
          <ul class="toc">
            <li><a href="#common-uses"><span class="secno">9.1</span> <span class="content">
Common Patterns for Grid Placement</span></a>
              <ul class="toc">
                <li><a href="#common-uses-named-areas"><span class="secno">9.1.1</span> <span class="content">
Named Areas</span></a></li>
                <li><a href="#common-uses-numeric"><span class="secno">9.1.2</span> <span class="content">
Numeric Indexes and Spans</span></a></li>
                <li><a href="#common-uses-named-lines"><span class="secno">9.1.3</span> <span class="content">
Named Lines and Spans</span></a></li>
                <li><a href="#common-uses-auto-placement"><span class="secno">9.1.4</span> <span class="content">
Auto Placement</span></a></li>
                <li><a href="#common-uses-auto-sizing"><span class="secno">9.1.5</span> <span class="content">
Auto Sizing Subgrids</span></a></li>
              </ul>
            </li>
            <li><a href="#line-placement"><span class="secno">9.2</span> <span class="content">
Line-based Placement: the <span class="property" data-link-type="propdesc" title="grid-row-start">grid-row-start</span>, <span class="property" data-link-type="propdesc" title="grid-column-start">grid-column-start</span>, <span class="property" data-link-type="propdesc" title="grid-row-end">grid-row-end</span>, and <span class="property" data-link-type="propdesc" title="grid-column-end">grid-column-end</span> properties</span></a>
              <ul class="toc">
                <li><a href="#grid-placement-errors"><span class="secno">9.2.1</span> <span class="content">
Grid Placement Conflict Handling</span></a></li>
              </ul>
            </li>
            <li><a href="#placement-shorthands"><span class="secno">9.3</span> <span class="content">
Placement Shorthands: the <span class="property" data-link-type="propdesc" title="grid-column">grid-column</span>, <span class="property" data-link-type="propdesc" title="grid-row">grid-row</span>, and <span class="property" data-link-type="propdesc" title="grid-area">grid-area</span> properties</span></a></li>
            <li><a href="#abspos-items"><span class="secno">9.4</span> <span class="content">
Absolutely-positioned Grid Items</span></a></li>
            <li><a href="#auto-placement-algo"><span class="secno">9.5</span> <span class="content">
Grid Item Placement Algorithm</span></a></li>
          </ul>
        </li>
        <li><a href="#alignment"><span class="secno">10</span> <span class="content">
Alignment</span></a>
          <ul class="toc">
            <li><a href="#auto-margins"><span class="secno">10.1</span> <span class="content">
Aligning with <span data-link-for="margin" data-link-type="value" title="auto">auto</span> margins</span></a></li>
            <li><a href="#row-align"><span class="secno">10.2</span> <span class="content">
Row-axis Alignment: the <span class="property" data-link-type="propdesc" title="justify-self">justify-self</span> and <span class="property" data-link-type="propdesc" title="justify-items">justify-items</span> properties</span></a></li>
            <li><a href="#column-align"><span class="secno">10.3</span> <span class="content">
Column-axis Alignment: the <span class="property" data-link-type="propdesc" title="align-self">align-self</span> and <span class="property" data-link-type="propdesc" title="align-items">align-items</span> properties</span></a></li>
            <li><a href="#grid-align"><span class="secno">10.4</span> <span class="content">
Aligning the Grid: the <span class="property" data-link-type="propdesc" title="justify-content">justify-content</span> and <span class="property" data-link-type="propdesc" title="align-content">align-content</span> properties</span></a></li>
            <li><a href="#grid-baselines"><span class="secno">10.5</span> <span class="content">
Grid Baselines</span></a></li>
          </ul>
        </li>
        <li><a href="#layout-algorithm"><span class="secno">11</span> <span class="content">
Grid Sizing</span></a>
          <ul class="toc">
            <li><a href="#algo-overview"><span class="secno">11.1</span> <span class="content">
Grid Sizing Algorithm</span></a></li>
            <li><a href="#algo-terms"><span class="secno">11.2</span> <span class="content">
Track Sizing Terminology</span></a></li>
            <li><a href="#algo-track-sizing"><span class="secno">11.3</span> <span class="content">
Track Sizing Algorithm</span></a></li>
            <li><a href="#algo-init"><span class="secno">11.4</span> <span class="content">
Initialize Track Sizes</span></a></li>
            <li><a href="#algo-content"><span class="secno">11.5</span> <span class="content">
Resolve Intrinsic Track Sizes</span></a></li>
            <li><a href="#algo-grow-tracks"><span class="secno">11.6</span> <span class="content">
Maximize Tracks</span></a></li>
            <li><a href="#algo-flex-tracks"><span class="secno">11.7</span> <span class="content">
Stretch Flexible Tracks</span></a>
              <ul class="toc">
                <li><a href="#algo-find-fr-size"><span class="secno">11.7.1</span> <span class="content">
Find the Size of an <span class="css">fr</span></span></a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#pagination"><span class="secno">12</span> <span class="content">
Fragmenting Grid Layout</span></a>
          <ul class="toc">
            <li><a href="#fragmentation-alg"><span class="secno">12.1</span> <span class="content">
Sample Fragmentation Algorithm</span></a></li>
          </ul>
        </li>
        <li><a href="#acks"><span class="secno"></span> <span class="content">
Acknowledgements</span></a></li>
        <li><a href="#changes"><span class="secno"></span> <span class="content">
Changes</span></a></li>
        <li><a href="#translated-algo"><span class="secno"></span> <span class="content">
Appendix A: Translated Layout Algorithm</span></a></li>
        <li><a href="#conformance"><span class="secno"></span> <span class="content">
Conformance</span></a>
          <ul class="toc">
            <li><a href="#conventions"><span class="secno"></span> <span class="content">
Document conventions</span></a></li>
            <li><a href="#conformance-classes"><span class="secno"></span> <span class="content">
Conformance classes</span></a></li>
            <li><a href="#partial"><span class="secno"></span> <span class="content">
Partial implementations</span></a></li>
            <li><a href="#experimental"><span class="secno"></span> <span class="content">
Experimental implementations</span></a></li>
            <li><a href="#testing"><span class="secno"></span> <span class="content">
Non-experimental implementations</span></a></li>
          </ul>
        </li>
        <li><a href="#references"><span class="secno"></span> <span class="content">References</span></a>
          <ul class="toc">
            <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a></li>
          </ul>
        </li>
        <li><a href="#index"><span class="secno"></span> <span class="content">Index</span></a></li>
        <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a></li>
        <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a></li>
      </ul></div>

    <main>


      <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">
Introduction and Overview</span><a class="self-link" href="#intro"></a></h2>


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


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


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


      <h3 class="heading settled" data-level="1.1" id="background"><span class="secno">1.1. </span><span class="content">
Background and Motivation</span><a class="self-link" href="#background"></a></h3>

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


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


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


      <h3 class="heading settled" data-level="1.2" id="adapting-to-available-space"><span class="secno">1.2. </span><span class="content">
Adapting Layouts to Available Space</span><a class="self-link" href="#adapting-to-available-space"></a></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>


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

	
      <ul>
		
        <li>
			The stats area always appears immediately under the game title.
		</li>
        <li>
			The game board appears to the right of the stats and title.
		</li>
        <li>
			The top of the game title and the game board should always align.
		</li>
        <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>
        <li>
			The score area should align into the column created by the game and stats area,
			while the controls are centered under the board.
	</li>
      </ul>


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


      <p>Note that there are multiple ways to specify the structure of the grid
	and to position and size <a data-link-type="dfn" href="#grid-item">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 data-link-type="dfn" href="#grid-item">grid item</a>
	using the <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a> properties on the <a data-link-type="dfn" href="#grid-container">grid container</a>,
	and the <a class="property" data-link-type="propdesc" href="#propdef-grid-row">grid-row</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-column">grid-column</a> properties on each <a data-link-type="dfn" href="#grid-item">grid item</a>.</p>

	
      <div class="example">
		
        <pre class="lang-css">#grid {
  display: grid;

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

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

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

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


      <h3 class="heading settled" data-level="1.3" id="source-independence"><span class="secno">1.3. </span><span class="content">
Source-Order Independence</span><a class="self-link" href="#source-independence"></a></h3>

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

		
        <figcaption>An arrangement suitable for <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-page-3/#valdef-page-size-portrait">portrait</a> 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 <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-page-3/#valdef-page-size-landscape">landscape</a> orientation.</figcaption>
        
	
      </figure>


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


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

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

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

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

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

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

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

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

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


      <h3 class="heading settled" data-level="1.4" id="grid-layering"><span class="secno">1.4. </span><span class="content">
Grid Layering of Elements</span><a class="self-link" href="#grid-layering"></a></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>


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


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

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

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

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

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

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

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


      <h2 class="heading settled" data-level="2" id="grid-concepts"><span class="secno">2. </span><span class="content">
Grid Layout Concepts and Terminology</span><a class="self-link" href="#grid-concepts"></a></h2>


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


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


      <h3 class="heading settled" data-level="2.1" id="grid-track-concept"><span class="secno">2.1. </span><span class="content">
Grid Tracks and Cells</span><a class="self-link" href="#grid-track-concept"></a></h3>


      <p><dfn data-dfn-type="dfn" data-export="" id="grid-track">Grid track<a class="self-link" href="#grid-track"></a></dfn> is a generic term for a <a data-link-type="dfn" href="#grid-column">grid column</a> or <a data-link-type="dfn" href="#grid-row">grid row</a>—in
	other words, it is the space between two adjacent <a data-link-type="dfn" href="#grid-line">grid lines</a>.
	Each <a data-link-type="dfn" href="#grid-track">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 data-link-type="dfn" href="#grid-line">grid lines</a> are.</p>


      <p>A <dfn data-dfn-type="dfn" data-export="" id="grid-cell">grid cell<a class="self-link" href="#grid-cell"></a></dfn> is the similar term for the full grid—it
	is the space between two adjacent row and two adjacent column <a data-link-type="dfn" href="#grid-line">grid lines</a>.
	It is the smallest unit of the grid that can be referenced when positioning <a data-link-type="dfn" href="#grid-item">grid items</a>.</p>

	
      <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 data-link-type="dfn" href="#grid-container">grid container</a> changes.
		If the used width of the <a data-link-type="dfn" href="#grid-container">grid container</a> is 200px, then the second column 50px wide.
		If the used width of the <a data-link-type="dfn" href="#grid-container">grid container</a> is 100px, then the second column is 0px
		and any content positioned in the column will overflow the <a data-link-type="dfn" href="#grid-container">grid container</a>.

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


      <h3 class="heading settled" data-level="2.2" id="grid-line-concept"><span class="secno">2.2. </span><span class="content">
Grid Lines</span><a class="self-link" href="#grid-line-concept"></a></h3>


      <p><dfn data-dfn-type="dfn" data-export="" id="grid-line" title="grid line|grid row line|grid column line">Grid lines<a class="self-link" href="#grid-line"></a></dfn> are the horizontal and vertical dividing lines of the <a data-link-type="dfn" href="#grid">grid</a>.
	A <a data-link-type="dfn" href="#grid-line">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 data-link-type="dfn" href="#grid-item">grid item</a> references the <a data-link-type="dfn" href="#grid-line">grid lines</a> to determine its position within the <a data-link-type="dfn" href="#grid">grid</a>
	using the <a href="#placement">grid-placement properties</a>.</p>

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

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

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

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

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


      <h3 class="heading settled" data-level="2.3" id="grid-area-concept"><span class="secno">2.3. </span><span class="content">
Grid Areas</span><a class="self-link" href="#grid-area-concept"></a></h3>


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

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

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

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


      <p>A <a data-link-type="dfn" href="#grid-item">grid item</a>’s <a data-link-type="dfn" href="#grid-area">grid area</a> forms the containing block into which it is laid out.
	Percentage lengths specified on a <a data-link-type="dfn" href="#grid-item">grid item</a> resolve against this containing block.
	Percentages specified for <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-margin-top">margin-top</a>, <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-padding-top">padding-top</a>, <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-margin-bottom">margin-bottom</a>, and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-padding-bottom">padding-bottom</a> on a <a data-link-type="dfn" href="#grid-item">grid item</a>
	resolve against the height of its containing block,
	rather than the width (as for blocks).</p>


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


      <h2 class="heading settled" data-level="3" id="grid-model"><span class="secno">3. </span><span class="content">
Grid Containers</span><a class="self-link" href="#grid-model"></a></h2>


      <h3 class="heading settled" data-level="3.1" id="grid-containers"><span class="secno">3.1. </span><span class="content">
Establishing Grid Containers: the <a class="css" data-link-for="display" data-link-type="maybe" href="#valdef-display-grid">grid</a> and <a class="css" data-link-type="maybe" href="#valdef-display-inline-grid">inline-grid</a> <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> values</span><a class="self-link" href="#grid-containers"></a></h3>


      <table class="definition propdef partial">
        <tbody>
          <tr>
            <th>Name:</th>
            <td><a class="css" data-link-type="property" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a></td>
          </tr>
          <tr>
            <th>New values:</th>
            <td class="prod">grid <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> inline-grid</td>
          </tr>
        </tbody></table>

	
      <dl data-dfn-for="display" data-dfn-type="value">
		
        <dt><dfn class="css" data-dfn-for="display" data-dfn-type="value" data-export="" id="valdef-display-grid">grid<a class="self-link" href="#valdef-display-grid"></a></dfn>
		</dt>
        <dd>
			This value causes an element to generate a block-level <a data-link-type="dfn" href="#grid-container">grid container</a> box.

		</dd>
        <dt><dfn class="css" data-dfn-for="display" data-dfn-type="value" data-export="" id="valdef-display-inline-grid">inline-grid<a class="self-link" href="#valdef-display-inline-grid"></a></dfn>
		</dt>
        <dd>
			This value causes an element to generate an inline-level <a data-link-type="dfn" href="#grid-container">grid container</a> box.
	</dd>
      </dl>


      <p>A <dfn data-dfn-type="dfn" data-export="" id="grid-container">grid container<a class="self-link" href="#grid-container"></a></dfn> establishes a new <dfn data-dfn-type="dfn" data-export="" id="grid-formatting-context">grid formatting context<a class="self-link" href="#grid-formatting-context"></a></dfn> for its contents.
	This is the same as establishing a block formatting context,
	except that grid layout is used instead of block layout:
	floats do not intrude into the grid container,
	and the grid container’s margins do not collapse with the margins of its contents.
	<a data-link-type="dfn" href="#grid-container">Grid containers</a> form a containing block for their contents
	<a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">exactly like block containers do</a>. <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>
	The <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-overflow-3/#overflow0">overflow</a> property applies to <a data-link-type="dfn" href="#grid-container">grid containers</a>.</p>


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

	
      <ul>
		
        <li>
			all of the <a class="property" data-link-type="propdesc">column-*</a> properties in the Multicol module have no effect on a grid container.

		</li>
        <li>
			<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-float">float</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-clear">clear</a> have no effect on a <a data-link-type="dfn" href="#grid-item">grid item</a>.
			(However, the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-float">float</a> property still affects the computed value of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> on children of a grid container,
			as this occurs <em title="">before</em> <a data-link-type="dfn" href="#grid-item">grid items</a> are determined.)

		</li>
        <li>
			<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-vertical-align">vertical-align</a> has no effect on a grid item.

		</li>
        <li>
			the <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-line">::first-line</a> and <span class="css">::first-letter</span> pseudo-elements do not apply to <a data-link-type="dfn" href="#grid-container">grid containers</a>,
			and <a data-link-type="dfn" href="#grid-container">grid containers</a> do not contribute a first formatted line or first letter to their ancestors.
	</li>
      </ul>


      <p>If an element’s specified <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> is <a class="css" data-link-type="maybe" href="#valdef-display-inline-grid">inline-grid</a>
	and the element is floated or absolutely positioned,
	the computed value of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> is <a class="css" data-link-type="value" href="#valdef-display-grid">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 <a class="css" data-link-type="maybe" href="#valdef-display-inline-grid">inline-grid</a> in the "Specified Value" column
	and <a data-link-type="dfn" href="#grid">grid</a> in the "Computed Value" column.</p>


      <h3 class="heading settled" data-level="3.2" id="intrinsic-sizes"><span class="secno">3.2. </span><span class="content">
Sizing Grid Containers</span><a class="self-link" href="#intrinsic-sizes"></a></h3>


      <p>A <a data-link-type="dfn" href="#grid-container">grid container</a> is sized
	using the rules of the formatting context in which it participates.
	As a block-level box in a <a data-link-type="dfn">block formatting context</a>,
	it is sized like any other block-level box that establishes a formatting context,
	with an <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a> 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 data-link-type="dfn" href="#grid-container">grid container</a>’s <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a> block size is its max-content size.
	<span class="issue" id="issue-839d056f"><a class="self-link" href="#issue-839d056f"></a>The block layout spec should define this?</span></p>


      <p>The <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#max-content-inline-size">max-content size</a> of a <a data-link-type="dfn" href="#grid-container">grid container</a> is
	the sum of the <a data-link-type="dfn" href="#grid-container">grid container’s</a> track sizes in the appropriate axis,
	when the grid is sized under a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#max-content-constraint">max-content constraint</a>.</p>


      <p>The <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-inline-size">min-content size</a> of a <a data-link-type="dfn" href="#grid-container">grid container</a> is
	the sum of the <a data-link-type="dfn" href="#grid-container">grid container’s</a> track sizes in the appropriate axis,
	when the grid is sized under a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-constraint">min-content constraint</a>.</p>


      <p>See <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3-sizing" title="CSS3-SIZING">[CSS3-SIZING]</a> for a definition of the terms in this section.</p>


      <h2 class="heading settled" data-level="4" id="grid-items"><span class="secno">4. </span><span class="content">
Grid Items</span><a class="self-link" href="#grid-items"></a></h2>


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

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

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

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

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

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


      <p>Some values of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> trigger the generation of anonymous boxes.
	For example, a misparented <a class="css" data-link-for="display" data-link-type="maybe" href="http://dev.w3.org/csswg/css-display-3/#valdef-display-table-cell">table-cell</a> child is fixed up
	by <a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">generating anonymous <span class="css">table</span> and <span class="css">table-row</span> elements</a> around it. <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>
	This fixup must occur <em>before</em> a <a data-link-type="dfn" href="#grid-container">grid container</a>’s children are promoted to <a data-link-type="dfn" href="#grid-item">grid items</a>.
	For example, given two contiguous child elements with <span class="css">display:table-cell</span>,
	an anonymous table wrapper box around them becomes the <a data-link-type="dfn" href="#grid-item">grid item</a>.</p>

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

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


      <p>A <a data-link-type="dfn" href="#grid-item">grid item</a> is sized within the containing block defined by its <a data-link-type="dfn" href="#grid-area">grid area</a>
	similarly to an equivalent block-level box in an equivalently-sized containing block,
	except that <span class="css" data-link-for="margin">auto</span> margins and the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-align-3/#box-alignment-properties">box alignment properties</a>
	have special effects. (See <a data-section="" href="#alignment">§10 
Alignment</a>.)</p>


      <p>The <a class="css" data-link-for="min-width" data-link-type="maybe" href="http://dev.w3.org/csswg/css-flexbox-1/#valdef-min-width-min-height-auto">auto</a> value of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width">min-width</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height">min-height</a>
	behaves on <a data-link-type="dfn" href="#grid-item">grid items</a> in the relevant axis
	analogously to its behavior on <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-flexbox-1/#flex-item">flex items</a> in the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-flexbox-1/#main-axis">main axis</a>.
	See <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3-flexbox" title="CSS3-FLEXBOX">[CSS3-FLEXBOX]</a>.</p>


      <p class="issue" id="issue-1779cb08"><a class="self-link" href="#issue-1779cb08"></a>Review implications of intrinsic ratio and Grid’s 2D nature.</p>


      <h3 class="heading settled" data-level="4.1" id="visibility-collapse"><span class="secno">4.1. </span><span class="content">
	Collapsed Grid Items: the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visufx.html#propdef-visibility">visibility</a> property</span><a class="self-link" href="#visibility-collapse"></a></h3>

	
      <p class="issue" id="issue-8f83c1bc"><a class="self-link" href="#issue-8f83c1bc"></a>
		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:www-style@w3.org?Subject=%5Bcss-grid%5D%20Collapsing%20Grid%20Tracks">post them to www-style@w3.org</a>.

</p>
      <h3 class="heading settled" data-level="4.2" id="order-property"><span class="secno">4.2. </span><span class="content">
Reordered Grid Items: the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-flexbox-1/#propdef-order">order</a> property</span><a class="self-link" href="#order-property"></a></h3>


      <p>The <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-flexbox-1/#propdef-order">order</a> property also applies to <a data-link-type="dfn" href="#grid-item">grid items</a>.
	It affects their <a href="#grid-auto-flow-property">auto-placement</a> and <a href="#z-order">painting order</a>.</p>


      <h3 class="heading settled" data-level="4.3" id="static-position"><span class="secno">4.3. </span><span class="content">
Static Position of Grid Container Children</span><a class="self-link" href="#static-position"></a></h3>


      <p>The <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">static position</a> <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>
	of an absolutely-positioned child of a <a data-link-type="dfn" href="#grid-container">grid container</a>
	is determined as if it were the sole grid item
	in a <a data-link-type="dfn" href="#grid-area">grid area</a>
	whose edges coincide with the padding edges of the <a data-link-type="dfn" href="#grid-container">grid container</a>.</p>


      <p class="note" role="note">Note: Note that this position is affected by the values of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-self">justify-self</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-self">align-self</a> on the child,
	and that, as in most other layout models,
	the absolutely-positioned child has no effect on the size of the containing block
	or layout of its contents.</p>


      <h3 class="heading settled" data-level="4.4" id="z-order"><span class="secno">4.4. </span><span class="content">
Z-axis Ordering: the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-z-index">z-index</a> property</span><a class="self-link" href="#z-order"></a></h3>


      <p><a data-link-type="dfn" href="#grid-item">Grid items</a> can overlap when they are positioned into intersecting <a data-link-type="dfn" href="#grid-area">grid areas</a>,
	or even when positioned in non-intersecting areas because of negative margins or positioning.
	The painting order of <a data-link-type="dfn" href="#grid-item">grid items</a> is exactly the same as inline blocks [CSS21],
	except that <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order">order-modified document order</a> is used in place of raw document order,
	and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-z-index">z-index</a> values other than <a class="css" data-link-for="z-index" data-link-type="value">auto</a> create a stacking context even if <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-position">position</a> is <span class="css">static</span>.
	Thus the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-z-index">z-index</a> property can easily be used to control the z-axis order of grid items.</p>

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

	</p>
      <div class="example">
		The following diagram shows several overlapping grid items,
		with a combination of implicit source order
		and explicit <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-z-index">z-index</a>
		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>&lt;style type="text/css">
  #grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
  }
  #A { grid-column: 1 / span 2; grid-row: 2; align-self: 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; }
&lt;/style>

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


      <h2 class="heading settled" data-level="5" id="grid-definition"><span class="secno">5. </span><span class="content">
The Explicit Grid</span><a class="self-link" href="#grid-definition"></a></h2>


      <p>The three properties <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a>, and <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a>
	together define the <dfn data-dfn-type="dfn" data-export="" id="explicit-grid">explicit grid<a class="self-link" href="#explicit-grid"></a></dfn> of a <a data-link-type="dfn" href="#grid-container">grid container</a>.
	The <a class="property" data-link-type="propdesc" href="#propdef-grid-template">grid-template</a> property is a shorthand that sets all three at the same time.
	The final grid may end up larger due to <a data-link-type="dfn" href="#grid-item">grid items</a> placed outside the <a data-link-type="dfn" href="#explicit-grid">explicit grid</a>;
	in this case, any implicit tracks are sized by the <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-rows">grid-auto-rows</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-columns">grid-auto-columns</a> properties.</p>


      <p>The size of the <a data-link-type="dfn" href="#explicit-grid">explicit grid</a> is determined by the larger of
	the number of rows/columns defined by <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a>
	and the number of rows/columns sized by <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a>.
	Any rows/columns defined by <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a> but not sized by <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a>
	take their size from the <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-rows">grid-auto-rows</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-auto-columns">grid-auto-columns</a> properties.</p>


      <p>Numeric indexes in the <a data-link-type="dfn" href="#grid-placement-property">grid-placement properties</a>
	count from the edges of the <a data-link-type="dfn" href="#explicit-grid">explicit grid</a>,
	starting from 1.
	Positive indexes count from the before/start side,
	while negative indexes count from the after/end side.</p>


      <h3 class="heading settled" data-level="5.1" id="track-sizing"><span class="secno">5.1. </span><span class="content">
Track Sizing: the <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a> properties</span><a class="self-link" href="#track-sizing"></a></h3>


      <table class="definition propdef">
        <tbody>
          <tr>
            <th>Name:</th>
            <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-template-columns">grid-template-columns<a class="self-link" href="#propdef-grid-template-columns"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-template-rows">grid-template-rows<a class="self-link" href="#propdef-grid-template-rows"></a></dfn></td>
          </tr>
          <tr>
            <th>Value:</th>
            <td class="prod">none <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="#typedef-track-list">&lt;track-list></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> subgrid <a class="production css" data-link-type="type" href="#typedef-line-name-list">&lt;line-name-list></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a></td>
          </tr>
          <tr>
            <th>Initial:</th>
            <td>none</td>
          </tr>
          <tr>
            <th>Applies to:</th>
            <td><a data-link-type="dfn" href="#grid-container">grid containers</a></td>
          </tr>
          <tr>
            <th>Inherited:</th>
            <td>no</td>
          </tr>
          <tr>
            <th>Percentages:</th>
            <td>refer to corresponding dimension of the content area</td>
          </tr>
          <tr>
            <th>Media:</th>
            <td>visual</td>
          </tr>
          <tr>
            <th>Computed value:</th>
            <td>As specified, except for <a class="css" data-link-for="grid-template-columns" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a> (see prose), with lengths made absolute</td>
          </tr>
          <tr>
            <th>Animatable:</th>
            <td>no</td>
          </tr>
        </tbody></table>


      <p>These properties specify,
	as a space-separated <dfn data-dfn-type="dfn" data-export="" id="track-list">track list<a class="self-link" href="#track-list"></a></dfn>,
	the line names and <a data-link-type="dfn" href="#track-sizing-function">track sizing functions</a> of the <a data-link-type="dfn" href="#grid">grid</a>.
	Each <dfn data-dfn-type="dfn" data-noexport="" id="track-sizing-function" title="track sizing function|sizing function">track sizing function<a class="self-link" href="#track-sizing-function"></a></dfn> can be specified as a length,
	a percentage of the <a data-link-type="dfn" href="#grid-container">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 <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-minmax">minmax()</a> notation,
	which can combine any of the previously mentioned mechanisms
	to specify separate <a data-link-type="dfn" href="#min-track-sizing-function" title="min track sizing function">min</a>
	and <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing functions</a> for the column or row.</p>


      <p>The <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a> property specifies the <a data-link-type="dfn" href="#track-list">track list</a> for the grid’s columns,
	while <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a> specifies the <a data-link-type="dfn" href="#track-list">track list</a> for the grid’s rows.</p>


      <p>The <dfn class="css" data-dfn-for="grid-template-rows grid-template-columns" data-dfn-type="value" data-export="" id="valdef-grid-template-rows-grid-template-columns-none">none<a class="self-link" href="#valdef-grid-template-rows-grid-template-columns-none"></a></dfn> value indicates that there is no <a data-link-type="dfn" href="#explicit-grid">explicit grid</a>;
	any rows/columns will be implicitly generated,
	and their size will be determined by the <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-rows">grid-auto-rows</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-columns">grid-auto-columns</a> properties.</p>


      <p>The <dfn class="css" data-dfn-for="grid-template-rows grid-template-columns" data-dfn-type="value" data-export="" id="valdef-grid-template-rows-grid-template-columns-subgrid">subgrid<a class="self-link" href="#valdef-grid-template-rows-grid-template-columns-subgrid"></a></dfn> value indicates that the grid will align to its parent grid in that axis.
	Rather than specifying the sizes of rows/columns explicitly,
	they’ll be taken from the parent grid’s definition.</p>


      <p>The syntax of a <a data-link-type="dfn" href="#track-list">track list</a> is:</p>

	
      <pre><dfn data-dfn-type="type" data-export="" id="typedef-track-list">&lt;track-list><a class="self-link" href="#typedef-track-list"></a></dfn>     = [ <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a>? [ <a class="production" data-link-type="type" href="#typedef-track-size">&lt;track-size></a> | <a class="production" data-link-type="function" href="#funcdef-repeat" title="repeat()">&lt;repeat()></a> ] ]+ <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a>?
<dfn data-dfn-type="type" data-export="" id="typedef-track-size">&lt;track-size><a class="self-link" href="#typedef-track-size"></a></dfn>     = minmax( <a class="production" data-link-type="type" href="#typedef-track-breadth">&lt;track-breadth></a> , <a class="production" data-link-type="type" href="#typedef-track-breadth">&lt;track-breadth></a> ) | <a class="production" data-link-type="type" href="#typedef-track-breadth">&lt;track-breadth></a>
<dfn data-dfn-type="type" data-export="" id="typedef-track-breadth">&lt;track-breadth><a class="self-link" href="#typedef-track-breadth"></a></dfn>  = <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#length-value">&lt;length></a> | <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#percentage-value">&lt;percentage></a> | <a class="production" data-link-type="type" href="#typedef-flex">&lt;flex></a> | min-content | max-content | auto
<dfn data-dfn-type="type" data-export="" id="typedef-line-names">&lt;line-names><a class="self-link" href="#typedef-line-names"></a></dfn>     = ( <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>* )
<dfn data-dfn-type="type" data-export="" id="typedef-line-name-list">&lt;line-name-list><a class="self-link" href="#typedef-line-name-list"></a></dfn> = [ <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a> | repeat([ <a class="production" data-link-type="type">&lt;positive-integer></a> | auto ], <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a>+) ]+
</pre>


      <p>Where:</p>

	
      <dl data-dfn-for="grid-template-columns grid-template-rows" data-dfn-type="value">
		
        <dt><dfn class="css" data-dfn-for="grid-template-columns grid-template-rows" data-dfn-type="value" data-export="" id="valdef-grid-template-columns-grid-template-rows-length"><a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#length-value">&lt;length></a><a class="self-link" href="#valdef-grid-template-columns-grid-template-rows-length"></a></dfn>
		</dt>
        <dd>
			A non-negative length, as defined by CSS3 Values. <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3val" title="CSS3VAL">[CSS3VAL]</a>

		</dd>
        <dt><dfn class="css" data-dfn-for="grid-template-columns grid-template-rows" data-dfn-type="value" data-export="" id="valdef-grid-template-columns-grid-template-rows-percentage"><a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#percentage-value">&lt;percentage></a><a class="self-link" href="#valdef-grid-template-columns-grid-template-rows-percentage"></a></dfn>
		</dt>
        <dd>
			A non-negative percentage, as defined by CSS3 Values. <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3val" title="CSS3VAL">[CSS3VAL]</a>
			<a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#percentage-value">&lt;percentage></a> values are relative to the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#inline-size">inline size</a> of the <a data-link-type="dfn" href="#grid-container">grid container</a> in column <a data-link-type="dfn" href="#grid-track">grid tracks</a>,
			and the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#block-size">block size</a> of the <a data-link-type="dfn" href="#grid-container">grid container</a> in row <a data-link-type="dfn" href="#grid-track">grid tracks</a>.
			If the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#inline-size" title="inline size">inline</a> or <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#block-size">block size</a> of the <a data-link-type="dfn" href="#grid-container">grid container</a>
			is <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#indefinite">indefinite</a>,
			<a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#percentage-value">&lt;percentage></a> values relative to that size are treated as <a class="css" data-link-for="width" data-link-type="value">auto</a>.

		</dd>
        <dt><dfn class="css" data-dfn-for="grid-template-columns grid-template-rows" data-dfn-type="value" data-export="" id="valdef-grid-template-columns-grid-template-rows-flex"><a class="production css" data-link-type="type" href="#typedef-flex">&lt;flex></a><a class="self-link" href="#valdef-grid-template-columns-grid-template-rows-flex"></a></dfn>
		</dt>
        <dd>
			A non-negative dimension with the unit <span class="css">fr</span> specifying the track’s <dfn class="css" data-dfn-for="grid-template-columns grid-template-rows" data-dfn-type="value" data-noexport="" id="valdef-grid-template-columns-grid-template-rows-flex-factor">flex factor<a class="self-link" href="#valdef-grid-template-columns-grid-template-rows-flex-factor"></a></dfn>.
			Each <a class="production css" data-link-type="type" href="#typedef-flex">&lt;flex></a>-sized track takes a share of the remaining space in proportion to its <a data-link-type="dfn">flex factor</a>.
			See <a href="#fr-unit">Flexible Lengths</a> for more details.


          <p>When appearing outside a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-minmax">minmax()</a> notation,
			implies an automatic minimum (i.e. ''minmax(auto, <a class="production css" data-link-type="type" href="#typedef-flex">&lt;flex></a>)'').</p>
          

        </dd>
        <dt><dfn class="css" data-dfn-for="grid-template-columns grid-template-rows" data-dfn-type="value" data-export="" id="valdef-grid-template-columns-grid-template-rows-max-content">max-content<a class="self-link" href="#valdef-grid-template-columns-grid-template-rows-max-content"></a></dfn>
		</dt>
        <dd>
			Represents the largest <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#max-content-contribution">max-content contribution</a>
			of the <a data-link-type="dfn" href="#grid-item">grid items</a> occupying the <a data-link-type="dfn" href="#grid-track">grid track</a>.

		</dd>
        <dt><dfn class="css" data-dfn-for="grid-template-columns grid-template-rows" data-dfn-type="value" data-export="" id="valdef-grid-template-columns-grid-template-rows-min-content">min-content<a class="self-link" href="#valdef-grid-template-columns-grid-template-rows-min-content"></a></dfn>
		</dt>
        <dd>
			Represents the largest <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-contribution">min-content contribution</a>
			of the  <a data-link-type="dfn" href="#grid-item">grid items</a> occupying the <a data-link-type="dfn" href="#grid-track">grid track</a>.

		</dd>
        <dt><dfn class="css" data-dfn-for="grid-template-columns grid-template-rows" data-dfn-type="value" data-export="" id="valdef-grid-template-columns-grid-template-rows-minmax" title="minmax()">minmax(min, max)<a class="self-link" href="#valdef-grid-template-columns-grid-template-rows-minmax"></a></dfn>
		</dt>
        <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 <span class="css">minmax(min,max)</span> is treated as <var>min</var>.
			As a maximum, a <a class="production css" data-link-type="type" href="#typedef-flex">&lt;flex></a> value sets the track’s <a data-link-type="dfn">flex factor</a>.
			As a minimum, it is treated as zero
			(or <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a>, if the <a data-link-type="dfn" href="#grid-container">grid container</a> is sized under a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-constraint">min-content constraint</a>).

		</dd>
        <dt><dfn class="css" data-dfn-for="grid-template-columns grid-template-rows" data-dfn-type="value" data-export="" id="valdef-grid-template-columns-grid-template-rows-auto">auto<a class="self-link" href="#valdef-grid-template-columns-grid-template-rows-auto"></a></dfn>
		</dt>
        <dd>
			As a maximum, identical to <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a>.
			As a minimum, represents the largest minimum size (as specified by <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width">min-width</a>/<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height">min-height</a>)
			of the <a data-link-type="dfn" href="#grid-item">grid items</a> occupying the <a data-link-type="dfn" href="#grid-track">grid track</a>.
	</dd>
      </dl>

	
      <div class="example">
		Given the following <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a> declaration:


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

        <p>Five grid lines are created:</p>
        

        <ol>
			
          <li>
				At the start edge of the <a data-link-type="dfn" href="#grid-container">grid container</a>.

			</li>
          <li>
				100px from the start edge of the <a data-link-type="dfn" href="#grid-container">grid container</a>.

			</li>
          <li>
				A distance from the previous line equal to half the <a data-link-type="dfn" href="#free-space">free space</a>
				(the width of the <a data-link-type="dfn" href="#grid-container">grid container</a>, minus the width of the non-flexible <a data-link-type="dfn" href="#grid-track">grid tracks</a>).

			</li>
          <li>
				A distance from the previous line equal to the maximum size of any <a data-link-type="dfn" href="#grid-item">grid items</a>
				belonging to the column between these two lines.

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

        <p>If the non-flexible sizes
		(<span class="css">100px</span>, <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a>, and <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a>)
		sum to larger than the <a data-link-type="dfn" href="#grid-container">grid container</a>’s width,
		the final <a data-link-type="dfn" href="#grid-line">grid line</a> will be a distance equal to their sum away from the start edge of the <a data-link-type="dfn" href="#grid-container">grid container</a>
		(the <span class="css">1fr</span> sizes both resolve to <span class="css">0</span>).
		If the sum is less than the <a data-link-type="dfn" href="#grid-container">grid container</a>’s width,
		the final <a data-link-type="dfn" href="#grid-line">grid line</a> will be exactly at the end edge of the <a data-link-type="dfn" href="#grid-container">grid container</a>.
		This is true in general whenever there’s at least one <a class="production css" data-link-type="type" href="#typedef-flex">&lt;flex></a> value among the <a data-link-type="dfn" href="#grid-track">grid track</a> sizes.</p>
        
	
      </div>

	
      <div class="example">
		Additional examples of valid <a data-link-type="dfn" href="#grid-track">grid track</a> definitions:

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


      <h4 class="heading settled" data-level="5.1.1" id="named-lines"><span class="secno">5.1.1. </span><span class="content">
Named Grid Lines: the <span class="css">(<a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>*)</span> syntax</span><a class="self-link" href="#named-lines"></a></h4>


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

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

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


      <h4 class="heading settled" data-level="5.1.2" id="repeat-notation"><span class="secno">5.1.2. </span><span class="content">
Repeating Rows and Columns: the <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> notation</span><a class="self-link" href="#repeat-notation"></a></h4>


      <p>The <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> notation represents a repeated fragment of the <a data-link-type="dfn" href="#track-list">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 <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> notation is:</p>

	
      <pre class="prod"><dfn data-dfn-type="function" data-export="" id="funcdef-repeat">repeat()<a class="self-link" href="#funcdef-repeat"></a></dfn> = repeat( <a class="production" data-link-type="type">&lt;positive-integer></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-comma">,</a> [ <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> <a class="production" data-link-type="type" href="#typedef-track-size">&lt;track-size></a> ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-one-plus">+</a> <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> ) <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a>
           repeat( auto<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-comma">,</a> [ <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> [ <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#length-value">&lt;length></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#percentage-value">&lt;percentage></a> ] ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-one-plus">+</a> <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> )
</pre>


      <p>The first argument specifies the number of repetitions.
	The second argument is a <a data-link-type="dfn" href="#track-list">track list</a>,
	which is repeated that number of times.
	The <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> notation cannot be nested;
	doing so makes the declaration invalid.</p>


      <p>If the number of repetitions is <dfn class="css" data-dfn-for="repeat()" data-dfn-type="value" data-export="" id="valdef-repeat-auto">auto<a class="self-link" href="#valdef-repeat-auto"></a></dfn>
	and the <a data-link-type="dfn" href="#grid-container">grid container</a> has a definite size in the relevant axis,
	then the number of repetitions is the largest possible integer 
	that does not cause the <a data-link-type="dfn" href="#grid">grid</a> to overflow its <a data-link-type="dfn" href="#grid-container">grid container</a>
	(treating all tracks as their <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a> if that is <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#definite">definite</a> or as zero otherwise).
	Otherwise, the <a data-link-type="dfn" href="#track-list">track list</a> repeats only once.
	A <a class="production css" data-link-type="type" href="#typedef-track-list">&lt;track-list></a> with more than one <a class="css" data-link-for="repeat()" data-link-type="maybe" href="#valdef-repeat-auto">auto</a> <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> function is invalid.</p>

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

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


      <p>If the <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> function ends up placing two <a class="production css" data-link-type="type" href="#typedef-line-names">&lt;line-names></a> adjacent to each other,
	the name lists are merged.
	For example, <span class="css">repeat(2, (a) 1fr (b))</span> is equivalent to <span class="css">(a) 1fr (b a) 1fr (b)</span>.</p>


      <p class="note" role="note">Note: It is expected that a future level of this specification will define a value to be inserted between the repetitions,
	similar to the argument of the <code>Array#join</code> method in JavaScript.</p>


      <h4 class="heading settled" data-level="5.1.3" id="fr-unit"><span class="secno">5.1.3. </span><span class="content">
Flexible Lengths: the <span class="css">fr</span> unit</span><a class="self-link" href="#fr-unit"></a></h4>


      <p>A <dfn data-dfn-type="dfn" data-export="" id="flexible-length">flexible length<a class="self-link" href="#flexible-length"></a></dfn> or <dfn class="css" data-dfn-type="type" data-export="" id="typedef-flex"><a class="production css" data-link-type="type" href="#typedef-flex">&lt;flex></a><a class="self-link" href="#typedef-flex"></a></dfn> is a dimension with the <span class="css">fr</span> unit,
	which represents a fraction of the <a data-link-type="dfn" href="#free-space">free space</a> in the <a data-link-type="dfn" href="#grid-container">grid container</a>.</p>


      <p>The distribution of <a data-link-type="dfn" href="#free-space">free space</a> occurs after all non-flexible <a data-link-type="dfn" href="#track-sizing-function">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 data-link-type="dfn" href="#free-space">free space</a>,
	which is then divided among the flex-sized rows and columns in proportion to their <a data-link-type="dfn">flex factor</a>.</p>


      <p class="note" role="note">Note: Flexible lengths in a <a data-link-type="dfn" href="#track-list">track list</a> work similarly to flexible lengths with a zero base size in <a data-biblio-type="informative" data-link-type="biblio" href="#biblio-css3-flexbox" title="CSS3-FLEXBOX">[CSS3-FLEXBOX]</a>.</p>


      <p>Each column or row’s share of the <a data-link-type="dfn" href="#free-space">free space</a> can be computed as the column or row’s
	<code>&lt;flex> * &lt;free space> / &lt;sum of all <a data-link-type="dfn">flex factors</a></code>.
	For the purpose of this calculation,
	a flexible length in the <var>min</var> position of a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-minmax">minmax()</a> function is treated as <span class="css">0</span> (an inflexible length).</p>


      <p>When the available space is infinite
	(which happens when the <a data-link-type="dfn" href="#grid-container">grid container</a>’s width or height is <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#indefinite">indefinite</a>),
	flex-sized <a data-link-type="dfn" href="#grid-track">grid tracks</a> are sized to their contents while retaining their respective proportions.
	The used size of each flex-sized <a data-link-type="dfn" href="#grid-track">grid track</a> is computed by
	determining the <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> size of each flex-sized <a data-link-type="dfn" href="#grid-track">grid track</a>
	and dividing that size by the respective <a data-link-type="dfn">flex factor</a>
	to determine a “hypothetical <span class="css">1fr</span> size”.
	The maximum of those is used as the resolved <span class="css">1fr</span> length (the <dfn data-dfn-type="dfn" data-noexport="" id="flex-fraction">flex fraction<a class="self-link" href="#flex-fraction"></a></dfn>),
	which is then multiplied by each <a data-link-type="dfn" href="#grid-track">grid track</a>’s <a data-link-type="dfn">flex factor</a> to determine its final size.</p>


      <h4 class="heading settled" data-level="5.1.4" id="subgrids"><span class="secno">5.1.4. </span><span class="content">
Subgrids: the <a class="css" data-link-for="grid-template-rows" data-link-type="maybe" href="#valdef-grid-template-rows-grid-template-columns-subgrid">subgrid</a> keyword</span><a class="self-link" href="#subgrids"></a></h4>


      <p>A <a data-link-type="dfn" href="#grid-item">grid item</a> can itself be a <a data-link-type="dfn" href="#grid-container">grid container</a> by giving it <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display" title="display">display: grid</a>;
	in this case the layout of its contents will be independent of the layout of the grid it participates in.</p>


      <p>In some cases it might be necessary for the contents of multiple <a data-link-type="dfn" href="#grid-item">grid items</a> to align to each other.
	A <a data-link-type="dfn" href="#grid-container">grid container</a> that is itself a <a data-link-type="dfn" href="#grid-item">grid item</a>
	can defer the definition of its rows or columns to its parent <a data-link-type="dfn" href="#grid-container">grid container</a>
	by using the <a class="css" data-link-for="grid-template-rows" data-link-type="maybe" href="#valdef-grid-template-rows-grid-template-columns-subgrid">subgrid</a> keyword in <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a> and/or <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a>,
	making it a <dfn data-dfn-type="dfn" data-export="" id="subgrid">subgrid<a class="self-link" href="#subgrid"></a></dfn> in that dimension.
	In this case, the <a data-link-type="dfn" href="#grid-item">grid items</a> of the <a data-link-type="dfn" href="#subgrid">subgrid</a>
	participate in sizing the <a data-link-type="dfn" href="#grid">grid</a> of the parent <a data-link-type="dfn" href="#grid-container">grid container</a>,
	allowing the contents of both grids to align.</p>


      <p>If a <a data-link-type="dfn" href="#grid-container">grid container</a> that is <em>not</em> a <a data-link-type="dfn" href="#grid-item">grid item</a> uses the <a class="css" data-link-for="grid-template-rows" data-link-type="maybe" href="#valdef-grid-template-rows-grid-template-columns-subgrid">subgrid</a> keyword,
	it <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a> value is treated identically to <a class="css" data-link-for="grid-template-rows" data-link-type="maybe" href="#valdef-grid-template-rows-grid-template-columns-none">none</a>
	(i.e. it doesn’t have an <a data-link-type="dfn" href="#explicit-grid">explicit grid</a> in that dimension).</p>

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

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

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


      <p>A <a data-link-type="dfn" href="#subgrid">subgrid</a> behaves just like a normal <a data-link-type="dfn" href="#grid-container">grid container</a> except that:</p>

	
      <ul style="list-style-type: lower-alpha">
		
        <li>
			The number of explicit tracks is given by its <a data-link-type="dfn" href="#grid-span">grid span</a>,
			rather than by <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a>.
			If the grid has an <a data-link-type="dfn" href="#automatic-grid-span">automatic grid span</a>,
			the number of tracks is determined by the size of the <a data-link-type="dfn" href="#subgrid">subgrid</a>’s <a data-link-type="dfn" href="#implicit-grid">implicit grid</a>.

		</li>
        <li>
			The <a data-link-type="dfn" href="#grid-placement-property">grid-placement properties</a> of the <a data-link-type="dfn" href="#subgrid">subgrid</a>’s <a data-link-type="dfn" href="#grid-item">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>
        <li>
			The <a data-link-type="dfn" href="#subgrid">subgrid</a>’s own grid items participate in the sizing of its parent grid and are aligned to it.
			In this process, the sum of the item’s margin, padding, and borders are applied as an extra layer of margin to the items at those edges.

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

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

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

            <p>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:</p>
            

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

            <p>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).</p>
            
			
          </div>
          

          <p>However, any overflow tracks
			(i.e. those outside the <a data-link-type="dfn" href="#explicit-grid">explicit grid</a> when the <a data-link-type="dfn" href="#subgrid">subgrid</a> has a <a data-link-type="dfn" href="#definite-grid-span">definite grid span</a>)
			do not correspond to any tracks in the parent grid;
			they effectively extend in a third dimension.</p>
          

          <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 class="css">span 1</span> subgrid with an extra <a data-link-type="dfn" href="#implicit-grid-track">implicit grid track</a> is placed in track <var>B</var>,
				the items in that <a data-link-type="dfn" href="#implicit-grid-track">implicit grid track</a> are not considered part of track <var>B</var>.
			</div>
          

        </li>
        <li>
			The <a data-link-type="dfn" href="#subgrid">subgrid</a> is always stretched;
			the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-self">align-self</a>/<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-self">justify-self</a> properties on it are ignored.
			Any specified width/height constraints are also ignored.

		</li>
        <li>
			Layoutwise, the <a data-link-type="dfn" href="#subgrid">subgrid</a>’s <a data-link-type="dfn" href="#explicit-grid">explicit grid</a> is always aligned with the corresponding section of the parent <a data-link-type="dfn" href="#grid">grid</a>;
			the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-content">align-content</a>/<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-content">justify-content</a> properties on it are ignored.
			However, <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-overflow-3/#overflow0">overflow</a> does apply,
			so the contents of the subgrid can be scrolled aside.
			(Note: the act of scrolling does not affect layout.)

		</li>
        <li>
			Explicit named lines can also be specified together with the <a class="css" data-link-for="grid-template-rows" data-link-type="maybe" href="#valdef-grid-template-rows-grid-template-columns-subgrid">subgrid</a> keyword;
			these names apply (within the <a data-link-type="dfn" href="#subgrid">subgrid</a>) to the corresponding lines of the parent <a data-link-type="dfn" href="#grid">grid</a>.
			If the <a data-link-type="dfn" href="#subgrid">subgrid</a> has an explicit <a data-link-type="dfn" href="#grid-span">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>
            

            <p>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.</p>
            
			
          </div>
          

          <p>If the <a data-link-type="dfn" href="#subgrid">subgrid</a> has an explicit <a data-link-type="dfn" href="#grid-position">grid position</a> as well as an explicit <a data-link-type="dfn" href="#grid-span">grid span</a>,
			it also automatically receives the line names specified for its parent <a data-link-type="dfn" href="#grid">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.)</p>
          
	
        </li>
      </ul>


      <h4 class="heading settled" data-level="5.1.5" id="resolved-track-list"><span class="secno">5.1.5. </span><span class="content">
Resolved Values</span><a class="self-link" href="#resolved-track-list"></a></h4>


      <p>When an element’s <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> is <a class="css" data-link-type="maybe" href="#valdef-display-grid">grid</a> or <a class="css" data-link-type="maybe" href="#valdef-display-inline-grid">inline-grid</a> and it generates a box,
	the <a href="http://www.w3.org/TR/cssom/#resolved-values">resolved value</a>
	of the <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a> properties is the used value,
	serialized as follows:</p>

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

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

		</li>
        <li>
			A contiguous run of two or more tracks that have the same size and associated line names
			may be serialized with the <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> notation.
	</li>
      </ul>


      <p>Otherwise, (e.g. when the element has <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display" title="display">display: none</a> or is not a grid)
	the resolved value is simply the computed value.</p>

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


      <p class="note" role="note">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 <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a> as returning used values.
	Authors are recommended to use the
	<a href="http://dev.w3.org/csswg/cssom/#the-getstyleutils-interface"><code>.rawComputedStyle</code> and <code>.usedStyle</code> attributes</a>
	instead of <code>getComputedStyle()</code>.</p>


      <h3 class="heading settled" data-level="5.2" id="grid-template-areas-property"><span class="secno">5.2. </span><span class="content">
Named Areas: the <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a> property</span><a class="self-link" href="#grid-template-areas-property"></a></h3>


      <table class="definition propdef">
        <tbody>
          <tr>
            <th>Name:</th>
            <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-template-areas">grid-template-areas<a class="self-link" href="#propdef-grid-template-areas"></a></dfn></td>
          </tr>
          <tr>
            <th>Value:</th>
            <td class="prod">none <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#string-value">&lt;string></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-one-plus">+</a></td>
          </tr>
          <tr>
            <th>Initial:</th>
            <td>none</td>
          </tr>
          <tr>
            <th>Applies to:</th>
            <td><a data-link-type="dfn" href="#grid-container">grid containers</a></td>
          </tr>
          <tr>
            <th>Inherited:</th>
            <td>no</td>
          </tr>
          <tr>
            <th>Percentages:</th>
            <td>n/a</td>
          </tr>
          <tr>
            <th>Media:</th>
            <td>visual</td>
          </tr>
          <tr>
            <th>Computed value:</th>
            <td>specified value</td>
          </tr>
          <tr>
            <th>Animatable:</th>
            <td>no</td>
          </tr>
        </tbody></table>


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


      <p>Values have the following meanings:</p>

	
      <dl data-dfn-for="grid-template-areas" data-dfn-type="value">
		
        <dt><dfn class="css" data-dfn-for="grid-template-areas" data-dfn-type="value" data-export="" id="valdef-grid-template-areas-none">none<a class="self-link" href="#valdef-grid-template-areas-none"></a></dfn>
		</dt>
        <dd>
			The <a data-link-type="dfn" href="#grid-container">grid container</a> doesn’t define any <a data-link-type="dfn" href="#named-grid-area">named grid areas</a>.

		</dd>
        <dt><dfn class="css" data-dfn-for="grid-template-areas" data-dfn-type="value" data-export="" id="valdef-grid-template-areas-string"><a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#string-value">&lt;string></a>+<a class="self-link" href="#valdef-grid-template-areas-string"></a></dfn>
		</dt>
        <dd>
			A row is created for every separate string listed for the <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a> property,
			and a column is created for each cell in the string,
			when parsed as follows:


          <p>Tokenize the string into a list of the following tokens,
			using longest-match semantics:</p>
          

          <ul data-dfn-type="dfn">
				
            <li>
					A sequence of <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-syntax-3/#name-code-point">name code points</a>,
					representing a <dfn data-dfn-type="dfn" data-noexport="" id="named-cell-token">named cell token<a class="self-link" href="#named-cell-token"></a></dfn>
					with a name consisting of its code points.
				</li>
            <li>
					A "." (U+002E FULL STOP),
					representing a <dfn data-dfn-type="dfn" data-noexport="" id="null-cell-token">null cell token<a class="self-link" href="#null-cell-token"></a></dfn>.

				</li>
            <li>
					A sequence of <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-syntax-3/#whitespace">whitespace</a>,
					representing nothing
					(do not produce a token).

				</li>
            <li>
					A sequence of any other characters,
					representing a <dfn data-dfn-type="dfn" data-noexport="" id="trash-token">trash token<a class="self-link" href="#trash-token"></a></dfn>.
			</li>
          </ul>
          

          <p class="note" role="note">Note: These rules can produce cell names that do not match the <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/mediaqueries-4/#typedef-ident">&lt;ident></a> syntax,
			such as "1st 2nd 3rd",
			which requires escaping when referencing those areas by name in other properties,
			like <a class="css" data-link-type="propdesc" href="#propdef-grid-row" title="grid-row">grid-row: \31st;</a> to reference the area named <span class="css">1st</span>.</p>
          

          <ul>
				
            <li>
					A <a data-link-type="dfn" href="#null-cell-token">null cell token</a> represents an unnamed area in the <a data-link-type="dfn" href="#grid-container">grid container</a>.

				</li>
            <li>
					A <a data-link-type="dfn" href="#named-cell-token">named cell token</a> creates a <a data-link-type="dfn" href="#named-grid-area">named grid area</a> with the same name.
					Multiple <a data-link-type="dfn" href="#named-cell-token">named cell tokens</a> within and between rows
					create a single <a data-link-type="dfn" href="#named-grid-area">named grid area</a> that spans the corresponding <a data-link-type="dfn" href="#grid-cell">grid cells</a>.

				</li>
            <li>
					A <a data-link-type="dfn" href="#trash-token">trash token</a> is a syntax error,
					and makes the declaration invalid.
			</li>
          </ul>
          

          <p>All strings must have the same number of columns,
			or else the declaration is invalid.
			If a <a data-link-type="dfn" href="#named-grid-area">named grid area</a> spans multiple <a data-link-type="dfn" href="#grid-cell">grid cells</a>,
			but those cells do not form a single filled-in rectangle,
			the declaration is invalid.</p>
          

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


      <div class="example">
		In this example, the <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a> 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 data-link-type="dfn" href="#named-grid-area">named grid areas</a>.
		The <code>head</code> area spans both columns and the first row of the grid.

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


      <h4 class="heading settled" data-level="5.2.1" id="implicit-named-lines"><span class="secno">5.2.1. </span><span class="content">
Implicit Named Lines</span><a class="self-link" href="#implicit-named-lines"></a></h4>


      <p>The <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a> property creates <dfn data-dfn-type="dfn" data-export="" id="implicit-named-line" title="implicit named line">implicit named lines<a class="self-link" href="#implicit-named-line"></a></dfn> from the <a data-link-type="dfn" href="#named-grid-area">named grid areas</a> in the template.
	For each <a data-link-type="dfn" href="#named-grid-area">named grid area</a> <var>foo</var>, four <a data-link-type="dfn" href="#implicit-named-line">implicit named lines</a> are created:
	two named <span class="css">foo-start</span>, naming the row-start and column-start lines of the <a data-link-type="dfn" href="#named-grid-area">named grid area</a>,
	and two named <span class="css">foo-end</span>, naming the row-end and column-end lines of the <a data-link-type="dfn" href="#named-grid-area">named grid area</a>.</p>


      <p>These named lines behave just like any other named line,
	except that they do not appear in the value of <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a>.
	Even if an explicit line of the same name is defined,
	the implicit named lines are just more lines with the same name.</p>


      <h4 class="heading settled" data-level="5.2.2" id="implicit-named-areas"><span class="secno">5.2.2. </span><span class="content">
Implicit Named Areas</span><a class="self-link" href="#implicit-named-areas"></a></h4>


      <p>Since a <a data-link-type="dfn" href="#named-grid-area">named grid area</a> is referenced by the <a data-link-type="dfn" href="#implicit-named-line">implicit named lines</a> it produces,
	explicitly adding named lines of the same form (<span class="css">foo-start</span>/<span class="css">foo-end</span>)
	effectively creates a <a data-link-type="dfn" href="#named-grid-area">named grid area</a>.
	Such <dfn data-dfn-type="dfn" data-export="" id="implicit-named-area" title="implicit named area">implicit named areas<a class="self-link" href="#implicit-named-area"></a></dfn> do not appear in the value of <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a>,
	but can still be referenced by the <a data-link-type="dfn" href="#grid-placement-property">grid-placement properties</a>.</p>


      <h3 class="heading settled" data-level="5.3" id="explicit-grid-shorthand"><span class="secno">5.3. </span><span class="content">
Explicit Grid Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-grid-template">grid-template</a> property</span><a class="self-link" href="#explicit-grid-shorthand"></a></h3>


      <table class="definition propdef">
        <tbody>
          <tr>
            <th>Name:</th>
            <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-template">grid-template<a class="self-link" href="#propdef-grid-template"></a></dfn></td>
          </tr>
          <tr>
            <th>Value:</th>
            <td class="prod">none <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> subgrid <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production" data-link-type="propdesc" href="#propdef-grid-template-columns" title="grid-template-columns">&lt;‘grid-template-columns’></a> / <a class="production" data-link-type="propdesc" href="#propdef-grid-template-rows" title="grid-template-rows">&lt;‘grid-template-rows’></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a><br> [ <a class="production css" data-link-type="type" href="#typedef-track-list">&lt;track-list></a> / ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> [ <a class="production css" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#string-value">&lt;string></a> <a class="production css" data-link-type="type" href="#typedef-track-size">&lt;track-size></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> <a class="production css" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-one-plus">+</a></td>
          </tr>
          <tr>
            <th>Initial:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Applies to:</th>
            <td><a data-link-type="dfn" href="#grid-container">grid containers</a></td>
          </tr>
          <tr>
            <th>Inherited:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Percentages:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Media:</th>
            <td>visual</td>
          </tr>
          <tr>
            <th>Computed value:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Animatable:</th>
            <td>no</td>
          </tr>
        </tbody></table>


      <p>The <a class="property" data-link-type="propdesc" href="#propdef-grid-template">grid-template</a> property is a shorthand for setting
	<a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a>, and <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a> in a single declaration.
	It has several distinct syntax forms:</p>

	
      <dl data-dfn-for="grid-template" data-dfn-type="value">
		
        <dt><dfn class="css" data-dfn-for="grid-template" data-dfn-type="value" data-export="" id="valdef-grid-template-none">none<a class="self-link" href="#valdef-grid-template-none"></a></dfn>
		</dt>
        <dd>
			Sets all three properties to their initial values (<a class="css" data-link-for="grid-template-rows" data-link-type="value" href="#valdef-grid-template-rows-grid-template-columns-none">none</a>).

		</dd>
        <dt><dfn class="css" data-dfn-for="grid-template" data-dfn-type="value" data-export="" id="valdef-grid-template-subgrid">subgrid<a class="self-link" href="#valdef-grid-template-subgrid"></a></dfn>
		</dt>
        <dd>
			Sets <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a> to <a class="css" data-link-for="grid-template-rows" data-link-type="maybe" href="#valdef-grid-template-rows-grid-template-columns-subgrid">subgrid</a>,
			and <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a> to its initial value.

		</dd>
        <dt><dfn class="css" data-dfn-for="grid-template" data-dfn-type="value" data-export="" id="grid-template-rowcol"><a class="production" data-link-type="propdesc" href="#propdef-grid-template-columns" title="grid-template-columns">&lt;‘grid-template-columns’></a> / <a class="production" data-link-type="propdesc" href="#propdef-grid-template-rows" title="grid-template-rows">&lt;‘grid-template-rows’></a><a class="self-link" href="#grid-template-rowcol"></a></dfn>
		</dt>
        <dd>
			Sets <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a> to the specified values, respectively,
			and sets <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a> to <a class="css" data-link-for="grid-template-areas" data-link-type="value" href="#valdef-grid-template-areas-none">none</a>.

			
          <div class="example">

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

            <p>is equivalent to</p>
            

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

        </dd>
        <dt><dfn class="css" data-dfn-for="grid-template" data-dfn-type="value" data-export="" id="grid-template-ascii">[ <a class="production css" data-link-type="type" href="#typedef-track-list">&lt;track-list></a> / ]? [ <a class="production css" data-link-type="type" href="#typedef-line-names">&lt;line-names></a>? <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#string-value">&lt;string></a> <a class="production css" data-link-type="type" href="#typedef-track-size">&lt;track-size></a>? <a class="production css" data-link-type="type" href="#typedef-line-names">&lt;line-names></a>? ]+<a class="self-link" href="#grid-template-ascii"></a></dfn>
		</dt>
        <dd>
			
          <ul>
				
            <li>
					Sets <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a> to the track listing specified before the slash
					(or <a class="css" data-link-for="grid-template-columns" data-link-type="value" href="#valdef-grid-template-rows-grid-template-columns-none">none</a>, if not specified).

				</li>
            <li>
					Sets <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a> to the strings listed after the slash.

				</li>
            <li>
					Sets <a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a> to the <a class="production css" data-link-type="type" href="#typedef-track-size">&lt;track-size></a>s following each string
					(filling in <a class="css" data-link-for="grid-template-rows" data-link-type="value" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a> for any missing sizes),
					and splicing in the named lines defined before/after each size.
			</li>
          </ul>
          

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

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

            <p>is equivalent to</p>
            

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


      <p class="note" role="note">Note: The <a class="property" data-link-type="propdesc" href="#propdef-grid">grid</a> 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 <a class="property" data-link-type="propdesc" href="#propdef-grid">grid</a> instead of <a class="property" data-link-type="propdesc" href="#propdef-grid-template">grid-template</a>.</p>


      <h2 class="heading settled" data-level="6" id="implicit-grids"><span class="secno">6. </span><span class="content">
The Implicit Grid</span><a class="self-link" href="#implicit-grids"></a></h2>


      <p>While <a class="property" data-link-type="propdesc" href="#propdef-grid-template">grid-template</a> and its longhand properties define the <a data-link-type="dfn" href="#explicit-grid">explicit grid</a>,
	<a data-link-type="dfn" href="#grid-item">grid items</a> can be positioned outside of these bounds.
	This causes the <a data-link-type="dfn" href="#grid-container">grid container</a> to generate <a data-link-type="dfn" href="#implicit-grid-track">implicit grid tracks</a>,
	forming the <dfn data-dfn-type="dfn" data-export="" id="implicit-grid">implicit grid<a class="self-link" href="#implicit-grid"></a></dfn>.
	The <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-rows">grid-auto-rows</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-columns">grid-auto-columns</a> properties size these <a data-link-type="dfn" href="#implicit-grid-track">implicit grid tracks</a>.</p>


      <p>The <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-flow">grid-auto-flow</a> property controls auto-placement of <a data-link-type="dfn" href="#grid-item">grid items</a>
	without an explicit position.
	Once the <a data-link-type="dfn" href="#explicit-grid">explicit grid</a> is filled
	(or if there is no <a data-link-type="dfn" href="#explicit-grid">explicit grid</a>)
	auto-placement</p>


      <h3 class="heading settled" data-level="6.1" id="auto-tracks"><span class="secno">6.1. </span><span class="content">
Sizing Auto-generated Rows and Columns: the <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-rows">grid-auto-rows</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-columns">grid-auto-columns</a> properties</span><a class="self-link" href="#auto-tracks"></a></h3>


      <table class="definition propdef">
        <tbody>
          <tr>
            <th>Name:</th>
            <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-auto-columns">grid-auto-columns<a class="self-link" href="#propdef-grid-auto-columns"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-auto-rows">grid-auto-rows<a class="self-link" href="#propdef-grid-auto-rows"></a></dfn></td>
          </tr>
          <tr>
            <th>Value:</th>
            <td class="prod"><a class="production css" data-link-type="type" href="#typedef-track-size">&lt;track-size></a></td>
          </tr>
          <tr>
            <th>Initial:</th>
            <td>auto</td>
          </tr>
          <tr>
            <th>Applies to:</th>
            <td><a data-link-type="dfn" href="#grid-container">grid containers</a></td>
          </tr>
          <tr>
            <th>Inherited:</th>
            <td>no</td>
          </tr>
          <tr>
            <th>Percentages:</th>
            <td>see <a href="#track-sizing">Track Sizing</a></td>
          </tr>
          <tr>
            <th>Media:</th>
            <td>visual</td>
          </tr>
          <tr>
            <th>Computed value:</th>
            <td>see <a href="#track-sizing">Track Sizing</a></td>
          </tr>
          <tr>
            <th>Animatable:</th>
            <td>no</td>
          </tr>
        </tbody></table>


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

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

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

			
          <figcaption>A Grid with an implicit row and four implicit columns, two of which are zero-sized.</figcaption>
          
		
        </figure>
        

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

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


      <h3 class="heading settled" data-level="6.2" id="grid-auto-flow-property"><span class="secno">6.2. </span><span class="content">
<dfn data-dfn-type="dfn" data-noexport="" id="auto-placement" title="auto-placement|automatic placement">Automatic Placement<a class="self-link" href="#auto-placement"></a></dfn>: the <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-flow">grid-auto-flow</a> property</span><a class="self-link" href="#grid-auto-flow-property"></a></h3>


      <table class="definition propdef">
        <tbody>
          <tr>
            <th>Name:</th>
            <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-auto-flow">grid-auto-flow<a class="self-link" href="#propdef-grid-auto-flow"></a></dfn></td>
          </tr>
          <tr>
            <th>Value:</th>
            <td class="prod">[ row <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> column ] <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-any">||</a> dense</td>
          </tr>
          <tr>
            <th>Initial:</th>
            <td>row</td>
          </tr>
          <tr>
            <th>Applies to:</th>
            <td><a data-link-type="dfn" href="#grid-container">grid containers</a></td>
          </tr>
          <tr>
            <th>Inherited:</th>
            <td>no</td>
          </tr>
          <tr>
            <th>Percentages:</th>
            <td>n/a</td>
          </tr>
          <tr>
            <th>Media:</th>
            <td>visual</td>
          </tr>
          <tr>
            <th>Computed value:</th>
            <td>specified value</td>
          </tr>
          <tr>
            <th>Animatable:</th>
            <td>no</td>
          </tr>
        </tbody></table>


      <p><a data-link-type="dfn" href="#grid-item">Grid items</a> that aren’t explicitly placed are automatically placed
	into an unoccupied space in the <a data-link-type="dfn" href="#grid-container">grid container</a>
	by the <a data-link-type="dfn" href="#grid-item-placement-algorithm">auto-placement algorithm</a>.
	<a class="property" data-link-type="propdesc" href="#propdef-grid-auto-flow">grid-auto-flow</a> controls how the <a data-link-type="dfn" href="#grid-item-placement-algorithm">auto-placement algorithm</a> works,
	specifying exactly how auto-placed items get flowed into the grid.
	See <a data-section="" href="#auto-placement-algo">§9.5 
Grid Item Placement Algorithm</a> for details on precisely how the auto-placement algorithm works.</p>

	
      <dl data-dfn-for="grid-auto-flow" data-dfn-type="value">
		
        <dt><dfn class="css" data-dfn-for="grid-auto-flow" data-dfn-type="value" data-export="" id="valdef-grid-auto-flow-row">row<a class="self-link" href="#valdef-grid-auto-flow-row"></a></dfn>
		</dt>
        <dd>
			The <a data-link-type="dfn" href="#grid-item-placement-algorithm">auto-placement algorithm</a> places items
			by filling each row in turn,
			adding new rows as necessary.
			If neither <a class="css" data-link-type="maybe" href="#valdef-grid-auto-flow-row">row</a> nor <a class="css" data-link-type="maybe" href="#valdef-grid-auto-flow-column">column</a> is provided,
			<a class="css" data-link-type="maybe" href="#valdef-grid-auto-flow-row">row</a> is assumed.

		</dd>
        <dt><dfn class="css" data-dfn-for="grid-auto-flow" data-dfn-type="value" data-export="" id="valdef-grid-auto-flow-column">column<a class="self-link" href="#valdef-grid-auto-flow-column"></a></dfn>
		</dt>
        <dd>
			The <a data-link-type="dfn" href="#grid-item-placement-algorithm">auto-placement algorithm</a> places items
			by filling each column in turn,
			adding new columns as necessary.

		</dd>
        <dt><dfn class="css" data-dfn-for="grid-auto-flow" data-dfn-type="value" data-export="" id="valdef-grid-auto-flow-dense">dense<a class="self-link" href="#valdef-grid-auto-flow-dense"></a></dfn>
		</dt>
        <dd>
			If specified, the <a data-link-type="dfn" href="#grid-item-placement-algorithm">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.


          <p>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.</p>
          
	
        </dd>
      </dl>


      <p class="note" role="note">Note: A future level of this module is expected to add a value that flows auto-positioned items together into a single “default” cell.</p>


      <p>Auto-placement takes <a data-link-type="dfn" href="#grid-item">grid items</a> in <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order">order-modified document order</a>.</p>

	
      <div class="example">
		In the following example, there are three columns, each auto-sized to their contents.
		No rows are explicitly defined.
		The <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-flow">grid-auto-flow</a> property is <a class="css" data-link-for="grid-auto-flow" data-link-type="maybe" href="#valdef-grid-auto-flow-row">row</a>
		which instructs the grid to search across its three columns starting with the first row,
		then the next,
		adding rows as needed until sufficient space is located to accommodate the position of any auto-placed <a data-link-type="dfn" href="#grid-item">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.
		</p>
        </div>
        

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

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

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

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

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

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


      <h2 class="heading settled" data-level="7" id="grid-shorthand"><span class="secno">7. </span><span class="content">
Grid Definition Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-grid">grid</a> property</span><a class="self-link" href="#grid-shorthand"></a></h2>


      <table class="definition propdef">
        <tbody>
          <tr>
            <th>Name:</th>
            <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid">grid<a class="self-link" href="#propdef-grid"></a></dfn></td>
          </tr>
          <tr>
            <th>Value:</th>
            <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-grid-template" title="grid-template">&lt;‘grid-template’></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> [ <a class="production" data-link-type="propdesc" href="#propdef-grid-auto-flow" title="grid-auto-flow">&lt;‘grid-auto-flow’></a> [ <a class="production" data-link-type="propdesc" href="#propdef-grid-auto-columns" title="grid-auto-columns">&lt;‘grid-auto-columns’></a> [ / <a class="production" data-link-type="propdesc" href="#propdef-grid-auto-rows" title="grid-auto-rows">&lt;‘grid-auto-rows’></a> ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> ]</td>
          </tr>
          <tr>
            <th>Initial:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Applies to:</th>
            <td><a data-link-type="dfn" href="#grid-container">grid containers</a></td>
          </tr>
          <tr>
            <th>Inherited:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Percentages:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Media:</th>
            <td>visual</td>
          </tr>
          <tr>
            <th>Computed value:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Animatable:</th>
            <td>no</td>
          </tr>
        </tbody></table>


      <p>The <a class="property" data-link-type="propdesc" href="#propdef-grid">grid</a> property is a shorthand that sets
	all of the explicit grid properties
	(<a class="property" data-link-type="propdesc" href="#propdef-grid-template-rows">grid-template-rows</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-template-columns">grid-template-columns</a>, and <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a>)
	as well as all the implicit grid properties
	(<a class="property" data-link-type="propdesc" href="#propdef-grid-auto-rows">grid-auto-rows</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-columns">grid-auto-columns</a>, and <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-flow">grid-auto-flow</a>)
	in a single declaration.
	If <a class="production" data-link-type="propdesc" href="#propdef-grid-auto-rows" title="grid-auto-rows">&lt;‘grid-auto-rows’></a> value is omitted,
	it is set to the value specified for <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-columns">grid-auto-columns</a>.
	Other omitted values are set to their initial values.</p>


      <p class="note" role="note">Note: Note that you can only specify the explicit <em>or</em> the implicit grid properties in a single <a class="property" data-link-type="propdesc" href="#propdef-grid">grid</a> declaration.
	The sub-properties you don’t specify are set to their initial value,
	as normal for shorthands.</p>

	
      <div class="example">
		In addition to accepting the <a class="property" data-link-type="propdesc" href="#propdef-grid-template">grid-template</a> shorthand syntax for setting up the <a data-link-type="dfn" href="#explicit-grid">explicit grid</a>,
		the <a class="property" data-link-type="propdesc" href="#propdef-grid">grid</a> shorthand can also easily set up parameters for an auto-formatted grid.
		For example, <a class="css" data-link-type="propdesc" href="#propdef-grid" title="grid">grid: row 1fr;</a> is equivalent to

		
        <pre>grid-template: none;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
grid-auto-flow: row;
</pre>
        

        <p>Similarly, <a class="css" data-link-type="propdesc" href="#propdef-grid" title="grid">grid: column 1fr / auto</a> is equivalent to</p>
        
		
        <pre>grid-template: none;
grid-auto-columns: 1fr;
grid-auto-rows: auto;
grid-auto-flow: column;
</pre>
        
	
      </div>


      <h2 class="heading settled" data-level="8" id="overlarge-grids"><span class="secno">8. </span><span class="content">
Clamping Overlarge Grids</span><a class="self-link" href="#overlarge-grids"></a></h2>


      <p>Since memory is not infinite,
	UAs may clamp the the possible size of the <a data-link-type="dfn" href="#grid">grid</a>
	to within a UA-defined limit,
	dropping all lines outside that limit.
	If a <a data-link-type="dfn" href="#grid-item">grid item</a> spans outside this limit,
	its span must be clamped to the last line of the limited <a data-link-type="dfn" href="#grid">grid</a>.
	If a <a data-link-type="dfn" href="#grid-item">grid item</a> is placed outside this limit,
	its span must be truncated to 1
	and the item repositioned into the last <a data-link-type="dfn" href="#grid-track">grid track</a> on that side of the grid.</p>


      <h2 class="heading settled" data-level="9" id="placement"><span class="secno">9. </span><span class="content">
Placing Grid Items</span><a class="self-link" href="#placement"></a></h2>


      <p>Every <a data-link-type="dfn" href="#grid-item">grid item</a> has a <a data-link-type="dfn" href="#grid-area">grid area</a>,
	a rectangular set of <a data-link-type="dfn" href="#grid-cell">grid cells</a> that the <a data-link-type="dfn" href="#grid-item">grid item</a> occupies.
	This <a data-link-type="dfn" href="#grid-area">grid area</a> defines the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-display-3/#containing-block">containing block</a> for the <a data-link-type="dfn" href="#grid-item">grid item</a>
	within which the alignment properties (<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-self">justify-self</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-self">align-self</a>) determine their actual position.
	The cells that a <a data-link-type="dfn" href="#grid-item">grid item</a> occupies also influence the sizing of the grid’s rows and columns,
	defined in <a data-section="" href="#layout-algorithm">§11 
Grid Sizing</a>.</p>


      <p>The location of a <a data-link-type="dfn" href="#grid-item">grid item’s</a> <a data-link-type="dfn" href="#grid-area">grid area</a> within the <a data-link-type="dfn" href="#grid">grid</a>
	is defined by its <dfn data-dfn-type="dfn" data-export="" data-local-title="placement" id="grid-placement" title="grid placement">placement<a class="self-link" href="#grid-placement"></a></dfn>,
	which consists of a <a data-link-type="dfn" href="#grid-position">grid position</a> and a <a data-link-type="dfn" href="#grid-span">grid span</a>:</p>

	
      <dl data-export="">
		
        <dt><dfn data-dfn-type="dfn" data-export="" data-local-title="position|row position|column position" id="grid-position">grid position<a class="self-link" href="#grid-position"></a></dfn>
		</dt>
        <dd>
			The <a data-link-type="dfn" href="#grid-item">grid item</a>’s location in the <a data-link-type="dfn" href="#grid">grid</a>.
			A <a data-link-type="dfn" href="#grid-position">grid position</a> can be either
			<dfn data-dfn-type="dfn" data-export="" id="definite-grid-position" title="definite grid position|definite row position|definite column position|definite position">definite<a class="self-link" href="#definite-grid-position"></a></dfn> (explicitly specified)
			or <dfn data-dfn-type="dfn" data-export="" id="automatic-grid-position" title="automatic grid position|automatic row position|automatic column position|automatic position">automatic<a class="self-link" href="#automatic-grid-position"></a></dfn> (determined by <a data-link-type="dfn" href="#auto-placement">auto-placement</a>).

		</dd>
        <dt><dfn data-dfn-type="dfn" data-export="" data-local-title="span|row span|column span" id="grid-span">grid span<a class="self-link" href="#grid-span"></a></dfn>
		</dt>
        <dd>
			How many <a data-link-type="dfn" href="#grid-track">grid tracks</a> the <a data-link-type="dfn" href="#grid-item">grid item</a> occupies.
			A <a data-link-type="dfn" href="#subgrid">subgrid</a>’s <a data-link-type="dfn" href="#grid-span">grid span</a> can be <dfn data-dfn-type="dfn" data-export="" id="automatic-grid-span" title="automatic grid span|automatic row span|automatic column span|automatic span">automatic<a class="self-link" href="#automatic-grid-span"></a></dfn>
			(determined by its <a data-link-type="dfn" href="#implicit-grid">implicit grid</a>) if not specified or implied;
			a <a data-link-type="dfn" href="#grid-item">grid item</a>’s <a data-link-type="dfn" href="#grid-span">grid span</a> is otherwise always <dfn data-dfn-type="dfn" data-export="" id="definite-grid-span" title="definite grid span|definite row span|definite column span|definite span">definite<a class="self-link" href="#definite-grid-span"></a></dfn> (defaulting to 1).
	</dd>
      </dl>


      <p>The <dfn data-dfn-type="dfn" data-export="" id="grid-placement-property" title="grid-placement property">grid-placement properties<a class="self-link" href="#grid-placement-property"></a></dfn>—<wbr>the longhands <a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-column-start">grid-column-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a>, and their shorthands <a class="property" data-link-type="propdesc" href="#propdef-grid-row">grid-row</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-column">grid-column</a>, and <a class="property" data-link-type="propdesc" href="#propdef-grid-area">grid-area</a>—<wbr>allow the author to specify a <a data-link-type="dfn" href="#grid-item">grid item</a>’s <a data-link-type="dfn" href="#grid-placement">placement</a>
	by providing any (or none) of the following six pieces of information:</p>

	
      <table class="data" style="width: auto">
		
        <thead>
			
          <tr>
				
            <td>
				</td>
            <th>Row
				</th>
            <th>Column
		</th>
          </tr>
        </thead>
        <tbody>
			
          <tr>
				
            <th>Start
				</th>
            <td>row-start line
				</td>
            <td>column-start line
			</td>
          </tr>
          <tr>
				
            <th>End
				</th>
            <td>row-end line
				</td>
            <td>column-end line
			</td>
          </tr>
          <tr>
				
            <th>Span
				</th>
            <td>row span
				</td>
            <td>column span
	</td>
          </tr>
        </tbody>
      </table>


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


      <p>The following table summarizes the conditions under which a grid position or span is <a title="">definite</a> or <a title="">automatic</a>:</p>

	
      <table class="data">
		
        <thead>
			
          <tr>
				
            <td>
				</td>
            <th>Position
				</th>
            <th>Span
		</th>
          </tr>
        </thead>
        <tbody>
			
          <tr>
				
            <th>Definite
				</th>
            <td>At least one specified line
				</td>
            <td>Explicit, implicit, or defaulted span. <br> <span class="note" role="note">Note: Non-<a data-link-type="dfn" href="#subgrid">subgrids</a> default to 1.</span>
			</td>
          </tr>
          <tr>
				
            <th>Automatic
				</th>
            <td>No lines explicitly specified
				</td>
            <td><a data-link-type="dfn" href="#subgrid">Subgrid</a> without an explicit or implied span
	</td>
          </tr>
        </tbody>
      </table>


      <h3 class="heading settled" data-level="9.1" id="common-uses"><span class="secno">9.1. </span><span class="content">
Common Patterns for Grid Placement</span><a class="self-link" href="#common-uses"></a></h3>


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


      <p>The <a data-link-type="dfn" href="#grid-placement-property">grid-placement property</a> longhands are organized into three shorthands:</p>

	
      <table class="data" id="grid-property-breakdown">
		
        <tbody>
          <tr>
			
            <td colspan="4"><a class="property" data-link-type="propdesc" href="#propdef-grid-area">grid-area</a>
		</td>
          </tr>
          <tr>
			
            <td colspan="2"><a class="property" data-link-type="propdesc" href="#propdef-grid-column">grid-column</a>
			</td>
            <td colspan="2"><a class="property" data-link-type="propdesc" href="#propdef-grid-row">grid-row</a>
		</td>
          </tr>
          <tr>
			
            <td><a class="property" data-link-type="propdesc" href="#propdef-grid-column-start">grid-column-start</a>
			</td>
            <td><a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a>
			</td>
            <td><a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a>
			</td>
            <td><a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a>
	</td>
          </tr>
        </tbody>
      </table>

	
      <style scoped="">
	#grid-property-breakdown tr:nth-child(3) td {
		width: 25%;
		border-style: solid;
	}
	</style>


      <h4 class="heading settled" data-level="9.1.1" id="common-uses-named-areas"><span class="secno">9.1.1. </span><span class="content">
Named Areas</span><a class="self-link" href="#common-uses-named-areas"></a></h4>


      <p>An item can be placed into a <a data-link-type="dfn" href="#named-grid-area">named grid area</a>
	(such as those produced by the template in <a class="property" data-link-type="propdesc" href="#propdef-grid-template-areas">grid-template-areas</a>)
	by specifying the area’s name in <a class="property" data-link-type="propdesc" href="#propdef-grid-area">grid-area</a>:</p>

	
      <div class="example">
		
        <pre>article {
  grid-area: main;
  /* Places item into the named area "main". */
}
</pre>
        
	
      </div>


      <p>An item can also be <em>partially</em> aligned with a <a data-link-type="dfn" href="#named-grid-area">named grid area</a>,
	with other edges aligned to some other line:</p>

	
      <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 class="heading settled" data-level="9.1.2" id="common-uses-numeric"><span class="secno">9.1.2. </span><span class="content">
Numeric Indexes and Spans</span><a class="self-link" href="#common-uses-numeric"></a></h4>


      <p>Grid items can be positioned and sized by number,
	which is particularly helpful for script-driven layouts:</p>

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


      <p>By default, a grid item has a span of 1.
	Different spans can be given explicitly:</p>

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


      <p class="note" role="note">Note: Note that grid indexes are <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#writing-mode">writing mode</a> relative.
	For example, in a right-to-left language like Arabic,
	the first column is the rightmost column.</p>


      <h4 class="heading settled" data-level="9.1.3" id="common-uses-named-lines"><span class="secno">9.1.3. </span><span class="content">
Named Lines and Spans</span><a class="self-link" href="#common-uses-named-lines"></a></h4>


      <p>Instead of counting lines by number,
	<a data-link-type="dfn" href="#named-line">named lines</a> can be referenced by their name:</p>

	
      <div class="example">
		
        <pre>.five {
  grid-column: first / middle;
  /* Span from line "first" to line "middle". */
}
</pre>
        
	
      </div>


      <p class="note" role="note">Note: Note that if a <a data-link-type="dfn" href="#named-grid-area">named grid area</a> and a <a data-link-type="dfn" href="#named-line">named line</a> have the same name,
	the placement algorithm will prefer to use <a data-link-type="dfn" href="#named-grid-area">named grid area</a>’s edge instead.</p>


      <p>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:</p>

	
      <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 class="heading settled" data-level="9.1.4" id="common-uses-auto-placement"><span class="secno">9.1.4. </span><span class="content">
Auto Placement</span><a class="self-link" href="#common-uses-auto-placement"></a></h4>


      <p>A <a data-link-type="dfn" href="#grid-item">grid item</a> can be automatically placed into the next available empty <a data-link-type="dfn" href="#grid-cell">grid cell</a>,
	growing the <a data-link-type="dfn" href="#grid">grid</a> if there’s no space left.</p>

	
      <div class="example">
		
        <pre>.eight {
  grid-area: auto; /* Initial value */
}
</pre>
        
	
      </div>


      <p>This can be used, for example, to list a number of sale items on a catalog site
	in a grid pattern.</p>


      <p>Auto-placement can be combined with an explicit span,
	if the item should take up more than one cell:</p>

	
      <div class="example">
		
        <pre>.nine {
  grid-area: span 2 / span 3;
  /* Auto-placed item, covering two rows and three columns. */
}
</pre>
        
	
      </div>


      <p>Whether the <a data-link-type="dfn" href="#grid-item-placement-algorithm">auto-placement algorithm</a> searchs across and adds rows,
	or searches across and adds columns,
	is controlled by the <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-flow">grid-auto-flow</a> property.</p>


      <p class="note" role="note">Note: By default, the <a data-link-type="dfn" href="#grid-item-placement-algorithm">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 <a class="css" data-link-type="maybe" href="#valdef-grid-auto-flow-dense">dense</a> keyword in <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-flow">grid-auto-flow</a>.</p>


      <h4 class="heading settled" data-level="9.1.5" id="common-uses-auto-sizing"><span class="secno">9.1.5. </span><span class="content">
Auto Sizing Subgrids</span><a class="self-link" href="#common-uses-auto-sizing"></a></h4>


      <p>A subgrid without a <a data-link-type="dfn" href="#definite-grid-span">definite grid span</a> is sized to its <a data-link-type="dfn" href="#implicit-grid">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.</p>

	
      <div class="example">
		For example, a subgrid spanning two columns can be given an auto-spanning <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#block-size">block size</a>:
		
        <pre>.adverts {
  grid: subgrid;
  grid-column: span 2;
}
</pre>
        

        <p>If it contains 10 auto-placed items, it will span 5 rows in its parent grid.</p>
        
	
      </div>


      <p class="note" role="note">Note: Since auto-spanning <a data-link-type="dfn" href="#subgrid">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.</p>


      <h3 class="heading settled" data-level="9.2" id="line-placement"><span class="secno">9.2. </span><span class="content">
Line-based Placement: the <a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-column-start">grid-column-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a>, and <a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a> properties</span><a class="self-link" href="#line-placement"></a></h3>


      <table class="definition propdef">
        <tbody>
          <tr>
            <th>Name:</th>
            <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-row-start">grid-row-start<a class="self-link" href="#propdef-grid-row-start"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-column-start">grid-column-start<a class="self-link" href="#propdef-grid-column-start"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-row-end">grid-row-end<a class="self-link" href="#propdef-grid-row-end"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-column-end">grid-column-end<a class="self-link" href="#propdef-grid-column-end"></a></dfn></td>
          </tr>
          <tr>
            <th>Value:</th>
            <td class="prod"><a class="production css" data-link-type="type" href="#typedef-grid-line">&lt;grid-line></a></td>
          </tr>
          <tr>
            <th>Initial:</th>
            <td>auto</td>
          </tr>
          <tr>
            <th>Applies to:</th>
            <td><a data-link-type="dfn" href="#grid-item">grid items</a> and absolutely-positioned boxes whose containing block is a <a data-link-type="dfn" href="#grid-container">grid container</a></td>
          </tr>
          <tr>
            <th>Inherited:</th>
            <td>no</td>
          </tr>
          <tr>
            <th>Percentages:</th>
            <td>n/a</td>
          </tr>
          <tr>
            <th>Media:</th>
            <td>visual</td>
          </tr>
          <tr>
            <th>Computed value:</th>
            <td>specified value</td>
          </tr>
          <tr>
            <th>Animatable:</th>
            <td>no</td>
          </tr>
        </tbody></table>

	
      <pre><dfn data-dfn-for="grid-row-start grid-column-start grid-row-end grid-column-end" data-dfn-type="type" data-export="" id="typedef-grid-line"><a class="production" data-link-type="type" href="#typedef-grid-line">&lt;grid-line></a><a class="self-link" href="#typedef-grid-line"></a></dfn> =
  auto |
  <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a> |
  [ <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-syntax-3/#typedef-integer">&lt;integer></a> &amp;&amp; <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>? ] |
  [ span &amp;&amp; [ <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-syntax-3/#typedef-integer">&lt;integer></a> || <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a> ] ]
</pre>


      <p>The <a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-column-start">grid-column-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a>, and <a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a> properties
	determine a <a data-link-type="dfn" href="#grid-item">grid item</a>’s size and location within the <a data-link-type="dfn" href="#grid">grid</a>
	by contributing a line, a span, or nothing (automatic)
	to its <a data-link-type="dfn" href="#grid-placement">grid placement</a>,
	thereby specifying the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#inline-start">inline-start</a>, <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#block-start">block-start</a>, <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#inline-end">inline-end</a>, and <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#block-end">block-end</a> edges of its <a data-link-type="dfn" href="#grid-area">grid area</a>.</p>


      <p>Values have the following meanings:</p>

	
      <dl data-dfn-for="<grid-line>" data-dfn-type="value">
		
        <dt><dfn class="css" data-dfn-for="<grid-line>" data-dfn-type="value" data-export="" id="grid-placement-slot"><a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a><a class="self-link" href="#grid-placement-slot"></a></dfn>
		</dt>
        <dd>
			First attempt to match the <a data-link-type="dfn" href="#grid-area">grid area</a>’s edge to a <a data-link-type="dfn" href="#named-grid-area">named grid area</a>:
			if there is a <a data-link-type="dfn" href="#named-line">named line</a> with the name ''<a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>-start<span class="css"> (for <a class="property" data-link-type="propdesc">grid-*-start</a>) / </span><a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>-end'' (for <a class="property" data-link-type="propdesc">grid-*-end</a>),
			contributes the first such line to the <a data-link-type="dfn" href="#grid-item">grid item</a>’s <a data-link-type="dfn" href="#grid-placement">placement</a>.


          <p class="note" role="note">Note: <a data-link-type="dfn" href="#named-grid-area">Named grid areas</a> automatically generate <a data-link-type="dfn" href="#implicit-named-line">implicit named lines</a> of this form,
			so specifying <a class="css" data-link-type="propdesc" href="#propdef-grid-row-start" title="grid-row-start">grid-row-start: foo</a> will choose the start edge of that <a data-link-type="dfn" href="#named-grid-area">named grid area</a>
			(unless another line named <span class="css">foo-start</span> was explicitly specified before it).</p>
          

          <p>Otherwise,
			treat this as if the integer <span class="css">1</span> had been specified along with the <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>.</p>
          

        </dd>
        <dt><dfn class="css" data-dfn-for="<grid-line>" data-dfn-type="value" data-export="" id="grid-placement-int"><a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-syntax-3/#typedef-integer">&lt;integer></a> &amp;&amp; <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>?<a class="self-link" href="#grid-placement-int"></a></dfn>
		</dt>
        <dd>
			Contributes the <var>N</var>th <a data-link-type="dfn" href="#grid-line">grid line</a> to the <a data-link-type="dfn" href="#grid-item">grid item</a>’s <a data-link-type="dfn" href="#grid-placement">placement</a>.
			If a negative integer is given,
			it instead counts in reverse,
			starting from the end edge of the <a data-link-type="dfn" href="#explicit-grid">explicit grid</a>.


          <p>If a name is given as a <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>,
			only lines with that name are counted.
			If not enough lines with that name exist,
			all lines in the implicit grid are assumed to have that name for the purpose of finding this position.</p>
          

          <p>A <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-syntax-3/#typedef-integer">&lt;integer></a> value of zero makes the declaration invalid.</p>
          

        </dd>
        <dt><dfn class="css" data-dfn-for="<grid-line>" data-dfn-type="value" data-export="" id="grid-placement-span-int">span &amp;&amp; [ <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-syntax-3/#typedef-integer">&lt;integer></a> || <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a> ]<a class="self-link" href="#grid-placement-span-int"></a></dfn>
		</dt>
        <dd>
			Contributes a <a data-link-type="dfn" href="#grid-span">grid span</a> to the <a data-link-type="dfn" href="#grid-item">grid item</a>’s <a data-link-type="dfn" href="#grid-placement">placement</a>
			such that the corresponding edge of the <a data-link-type="dfn" href="#grid-item">grid item</a>’s <a data-link-type="dfn" href="#grid-area">grid area</a> is <var>N</var> lines from its opposite edge.


          <p>If a name is given as a <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>,
			only lines with that name are counted.
			If not enough lines with that name exist,
			all lines in the implicit grid are assumed to have that name for the purpose of counting this span.</p>
          

          <p>If the <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-syntax-3/#typedef-integer">&lt;integer></a> is omitted, it defaults to <span class="css">1</span>.
			Negative integers or zero are invalid.</p>
          

        </dd>
        <dt><dfn class="css" data-dfn-for="<grid-line>" data-dfn-type="value" data-export="" id="grid-placement-auto">auto<a class="self-link" href="#grid-placement-auto"></a></dfn>
		</dt>
        <dd>
			The property contributes nothing to the <a data-link-type="dfn" href="#grid-item">grid item</a>’s <a data-link-type="dfn" href="#grid-placement">placement</a>,
			indicating <a data-link-type="dfn" href="#auto-placement">auto-placement</a>, an <a data-link-type="dfn" href="#automatic-grid-span">automatic span</a>, or a default span of one.
			(See <a href="#placement">Placing Grid Items</a>, above.)
	</dd>
      </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>
        

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

        <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 <a data-link-type="propdesc" href="#propdef-grid-column" title="grid-column">grid-column: span 1;</a>. */

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 class="heading settled" data-level="9.2.1" id="grid-placement-errors"><span class="secno">9.2.1. </span><span class="content">
Grid Placement Conflict Handling</span><a class="self-link" href="#grid-placement-errors"></a></h4>


      <p>If <a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a> specifies a line at or before that specified by <a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-column-start">grid-column-start</a>,
	it instead contributes nothing.</p>


      <p>If both <a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a>, or <a class="property" data-link-type="propdesc" href="#propdef-grid-column-start">grid-column-start</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a>,
	specify a span,
	the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#end">end</a> span is ignored.</p>


      <p>If the <a data-link-type="dfn" href="#grid-item">grid item</a> has an automatic position
	and a <a data-link-type="dfn" href="#grid-span">grid span</a> for a named line
	in a given dimension,
	instead treat the <a data-link-type="dfn" href="#grid-span">grid span</a> as one.</p>


      <h3 class="heading settled" data-level="9.3" id="placement-shorthands"><span class="secno">9.3. </span><span class="content">
Placement Shorthands: the <a class="property" data-link-type="propdesc" href="#propdef-grid-column">grid-column</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-row">grid-row</a>, and <a class="property" data-link-type="propdesc" href="#propdef-grid-area">grid-area</a> properties</span><a class="self-link" href="#placement-shorthands"></a></h3>


      <table class="definition propdef">
        <tbody>
          <tr>
            <th>Name:</th>
            <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-row">grid-row<a class="self-link" href="#propdef-grid-row"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-column">grid-column<a class="self-link" href="#propdef-grid-column"></a></dfn></td>
          </tr>
          <tr>
            <th>Value:</th>
            <td class="prod"><a class="production css" data-link-type="type" href="#typedef-grid-line">&lt;grid-line></a> [ / <a class="production css" data-link-type="type" href="#typedef-grid-line">&lt;grid-line></a> ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a></td>
          </tr>
          <tr>
            <th>Initial:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Applies to:</th>
            <td><a data-link-type="dfn" href="#grid-item">grid items</a> and absolutely-positioned boxes whose containing block is a <a data-link-type="dfn" href="#grid-container">grid container</a></td>
          </tr>
          <tr>
            <th>Inherited:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Percentages:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Media:</th>
            <td>visual</td>
          </tr>
          <tr>
            <th>Computed value:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Animatable:</th>
            <td>no</td>
          </tr>
        </tbody></table>


      <p>The <a class="property" data-link-type="propdesc" href="#propdef-grid-row">grid-row</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-column">grid-column</a> properties are shorthands for <a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-column-start">grid-column-start</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a>, respectively.</p>


      <p>If two <a class="production css" data-link-type="type" href="#typedef-grid-line">&lt;grid-line></a> values are specified,
	the <a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-column-start">grid-column-start</a> longhand is set to the value before the slash,
	and the <a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a> longhand is set to the value after the slash.</p>


      <p>When the second value is omitted,
	if the first value is a <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>,
	the <a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a> longhand is also set to that <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>;
	otherwise, it is set to <a class="css" data-link-for="<grid-line>" data-link-type="value" href="#grid-placement-auto">auto</a>.</p>


      <table class="definition propdef">
        <tbody>
          <tr>
            <th>Name:</th>
            <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-grid-area">grid-area<a class="self-link" href="#propdef-grid-area"></a></dfn></td>
          </tr>
          <tr>
            <th>Value:</th>
            <td class="prod"><a class="production css" data-link-type="type" href="#typedef-grid-line">&lt;grid-line></a> [ / <a class="production css" data-link-type="type" href="#typedef-grid-line">&lt;grid-line></a> ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-num-range" title="{A,B}">{0,3}</a></td>
          </tr>
          <tr>
            <th>Initial:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Applies to:</th>
            <td><a data-link-type="dfn" href="#grid-item">grid items</a> and absolutely-positioned boxes whose containing block is a <a data-link-type="dfn" href="#grid-container">grid container</a></td>
          </tr>
          <tr>
            <th>Inherited:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Percentages:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Media:</th>
            <td>visual</td>
          </tr>
          <tr>
            <th>Computed value:</th>
            <td>see individual properties</td>
          </tr>
          <tr>
            <th>Animatable:</th>
            <td>no</td>
          </tr>
        </tbody></table>


      <p>If four <a class="production css" data-link-type="type" href="#typedef-grid-line">&lt;grid-line></a> values are specified,
	<a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a> is set to the first value,
	<a class="property" data-link-type="propdesc" href="#propdef-grid-column-start">grid-column-start</a> is set to the second value,
	<a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a> is set to the third value,
	and <a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a> is set to the fourth value.</p>


      <p>When <a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a> is omitted,
	if <a class="property" data-link-type="propdesc" href="#propdef-grid-column-start">grid-column-start</a> is a <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>,
	<a class="property" data-link-type="propdesc" href="#propdef-grid-column-end">grid-column-end</a> is set to that <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>;
	otherwise, it is set to <a class="css" data-link-for="<grid-line>" data-link-type="value" href="#grid-placement-auto">auto</a>.</p>


      <p>When <a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a> is omitted,
	if <a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a> is a <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>,
	<a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a> is set to that <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>;
	otherwise, it is set to <a class="css" data-link-for="<grid-line>" data-link-type="value" href="#grid-placement-auto">auto</a>.</p>


      <p>When <a class="property" data-link-type="propdesc" href="#propdef-grid-column-start">grid-column-start</a> is omitted,
	if <a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a> is a <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>,
	all four longhands are set to that value.
	Otherwise, it is set to <a class="css" data-link-for="<grid-line>" data-link-type="value" href="#grid-placement-auto">auto</a>.</p>


      <p class="note" role="note">Note: The resolution order for this shorthand is row-start/column-start/row-end/column-end,
	which goes CCW for LTR pages,
	the opposite direction of the related 4-edge properties using physical directions, like <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-margin">margin</a>.</p>


      <h3 class="heading settled" data-level="9.4" id="abspos-items"><span class="secno">9.4. </span><span class="content">
Absolutely-positioned Grid Items</span><a class="self-link" href="#abspos-items"></a></h3>


      <p>If an absolutely positioned element’s <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-display-3/#containing-block">containing block</a>
	is generated by a <a data-link-type="dfn" href="#grid-container">grid container</a>,
	its containing block edges are the edges of the element’s <a data-link-type="dfn" href="#grid-area">grid area</a>
	as given by its <a data-link-type="dfn" href="#grid-placement-property">grid-placement properties</a>.
	In this case, an <a class="css" data-link-for="<grid-line>" data-link-type="value" href="#grid-placement-auto">auto</a> value for a <a data-link-type="dfn" href="#grid-placement-property">grid-placement property</a>
	contributes the corresponding padding edge of the <a data-link-type="dfn" href="#grid-container">grid container</a> as a line.
	(Thus, by default, the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-display-3/#containing-block">containing block</a> will correspond to the padding edges of the <a data-link-type="dfn" href="#grid-container">grid container</a>.)
	The offset properties (<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-top">top</a>/<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-right">right</a>/<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-bottom">bottom</a>/<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-left">left</a>)
	then indicate offsets inwards from the corresponding edges
	of the resulting <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-display-3/#containing-block">containing block</a>, as normal.</p>


      <p class="note" role="note">Note: Note that, while absolutely-positioning an element to a <a data-link-type="dfn" href="#grid-container">grid container</a>
	does allow it to align to that container’s <a data-link-type="dfn" href="#grid-line">grid lines</a>,
	such elements
	do not take up space or otherwise participate in the layout of the grid.</p>

	
      <div class="example">
		
        <pre>.grid {
  grid: 10rem 10rem 10rem 10rem / 1fr 1fr 1fr 1fr;
  /* 4 columns of <span class="css">10rem</span> each,
     4 equal-height rows filling the <a data-link-type="dfn" href="#grid-container">grid container</a> */
  justify-content: center;
  /* center the grid horizontally within the <a data-link-type="dfn" href="#grid-container">grid container</a> */
  position: relative;
  /* Establish abspos <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-display-3/#containing-block">containing block</a> */
}

.abspos {
  grid-row-start: 1;     /* 1st grid row line = top of grid container */
  grid-row-end: span 2;  /* 3rd grid row line */
  grid-column-start: 3;  /* 3rd grid col line */
  grid-column-end: auto; /* right padding edge */
  /* <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-display-3/#containing-block">Containing block</a> covers the top right quadrant of the <a data-link-type="dfn" href="#grid-container">grid container</a> */

  position: absolute;
  top: 70px;
  bottom: 40px;
  left: 100px;
  right: 30px;
}
</pre>
        

        <figure>
			<img alt="" height="402" src="images/abspos-grid.svg" width="702">
		</figure>
        

        <p class="note" role="note">Note: Note that grids and the <a data-link-type="dfn" href="#grid-placement-property">grid-placement properties</a> are <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#flow-relative">flow-relative</a>,
		while abspos offsets are <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#physical">physical</a>,
		so if the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a> or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-writing-mode">writing-mode</a> properties change,
		the grid will transform to match,
		but the offsets won’t.</p>
        
	
      </div>


      <h3 class="heading settled" data-level="9.5" id="auto-placement-algo"><span class="secno">9.5. </span><span class="content">
Grid Item Placement Algorithm</span><a class="self-link" href="#auto-placement-algo"></a></h3>


      <p>The following <dfn data-dfn-type="dfn" data-export="" data-local-title="auto-placement algorithm" id="grid-item-placement-algorithm">grid item placement algorithm<a class="self-link" href="#grid-item-placement-algorithm"></a></dfn>
	resolves <a data-link-type="dfn" href="#automatic-grid-position">automatic positions</a> of <a data-link-type="dfn" href="#grid-item">grid items</a> into <a data-link-type="dfn" href="#definite-grid-position">definite positions</a>,
	ensuring that every <a data-link-type="dfn" href="#grid-item">grid item</a> has a well-defined <a data-link-type="dfn" href="#grid-area">grid area</a> to lay out into.
	(<a data-link-type="dfn" href="#grid-span">Grid spans</a> need no special resolution;
		if they’re not explicitly specified,
		they default to either 1 or,
		for <a data-link-type="dfn" href="#subgrid">subgrids</a>,
		the size of their <a data-link-type="dfn" href="#explicit-grid">explicit grid</a>.)</p>


      <p class="note" role="note">Note: This algorithm can result in the creation of new rows or columns in the <a data-link-type="dfn" href="#implicit-grid">implicit grid</a>,
	if there is no room in the <a data-link-type="dfn" href="#explicit-grid">explicit grid</a> to place an auto-positioned <a data-link-type="dfn" href="#grid-item">grid item</a>.</p>


      <p>Every <a data-link-type="dfn" href="#grid-cell">grid cell</a>
	(in both the <a data-link-type="dfn" href="#explicit-grid" title="explicit grid">explicit</a> and <a data-link-type="dfn" href="#implicit-grid">implicit grids</a>)
	can be <dfn data-dfn-type="dfn" data-noexport="" id="occupied">occupied<a class="self-link" href="#occupied"></a></dfn> or <dfn data-dfn-type="dfn" data-noexport="" id="unoccupied">unoccupied<a class="self-link" href="#unoccupied"></a></dfn>.
	A cell is <a data-link-type="dfn" href="#occupied">occupied</a>
	if it’s covered by a <a data-link-type="dfn" href="#named-grid-area">named grid area</a>,
	or by the <a data-link-type="dfn" href="#grid-area">grid area</a> of a <a data-link-type="dfn" href="#grid-item">grid item</a> with a <a data-link-type="dfn" href="#definite-grid-position">definite grid position</a>;
	otherwise,
	the cell is <a data-link-type="dfn" href="#unoccupied">unoccupied</a>.
	A cell’s <a data-link-type="dfn" href="#occupied">occupied</a>/<a data-link-type="dfn" href="#unoccupied">unoccupied</a> status can change during this algorithm.</p>


      <p>To aid in clarity,
	this algorithm is written with the assumption that <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-flow">grid-auto-flow</a>
	has <a class="css" data-link-for="grid-auto-flow" data-link-type="maybe" href="#valdef-grid-auto-flow-row">row</a> specified.
	If it is instead set to <a class="css" data-link-for="grid-auto-flow" data-link-type="maybe" href="#valdef-grid-auto-flow-column">column</a>,
	swap all mentions of rows and columns, inline and block, etc. in this algorithm.</p>


      <ol>
        <li data-md="">
          <p><b>Process the items locked to a given row.</b></p>
          

          <p>For each <a data-link-type="dfn" href="#grid-item">grid item</a> with a <a data-link-type="dfn" href="#definite-grid-position">definite row position</a>
(that is, the <a class="property" data-link-type="propdesc" href="#propdef-grid-row-start">grid-row-start</a> and <a class="property" data-link-type="propdesc" href="#propdef-grid-row-end">grid-row-end</a> properties define a <a data-link-type="dfn" href="#definite-grid-position">definite grid position</a>),
in <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order">order-modified document order</a>:</p>
          

          <dl>
            <dt data-md="">
              <p>“sparse” packing (omitted <a class="css" data-link-type="maybe" href="#valdef-grid-auto-flow-dense">dense</a> keyword)</p>
              

            </dt>
            <dd data-md="">

              <p>Set the row-start line of its <a data-link-type="dfn" href="#grid-placement">placement</a>
to the earliest (smallest positive index) line index
that ensures this item’s <a data-link-type="dfn" href="#grid-area">grid area</a> will not overlap any <a data-link-type="dfn" href="#occupied">occupied</a> grid cells
and that is past any <a data-link-type="dfn" href="#grid-item">grid items</a> previously placed in this row by this step.</p>
              

            </dd>
            <dt data-md="">
              <p>“dense” packing (<a class="css" data-link-type="maybe" href="#valdef-grid-auto-flow-dense">dense</a> specified)</p>
              

            </dt>
            <dd data-md="">

              <p>Set the row-start line of its <a data-link-type="dfn" href="#grid-placement">placement</a>
to the earliest (smallest positive index) line index
that ensures this item’s <a data-link-type="dfn" href="#grid-area">grid area</a> will not overlap any <a data-link-type="dfn" href="#occupied">occupied</a> grid cells.</p>
              

            </dd></dl>
          

        </li>
        <li data-md="">
          <p><b>Determine the number of columns in the implicit grid.</b></p>
          

          <p>Set the number of columns in the <a data-link-type="dfn" href="#implicit-grid">implicit grid</a> to the larger of:</p>
          

          <ul>
            <li data-md="">
              <p>The number of columns in the <a data-link-type="dfn" href="#explicit-grid">explicit grid</a>.</p>
              

            </li>
            <li data-md="">
              <p>Among all the items with a <a data-link-type="dfn" href="#definite-grid-position">definite column position</a>
(explicitly positioned items, items positioned in the previous step, and items not yet positioned but with a definite column)
the largest positive column-end line index,
minus 1.</p>
              

            </li>
            <li data-md="">
              <p>The largest <a data-link-type="dfn" href="#grid-span">column span</a> of all items.</p>
              

            </li></ul>
          

          <div class="example">
	For example, in the following style fragment:

			
            <pre>#grid {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-auto-flow: row;
}
#grid-item {
  grid-column: 4 / span 3;
}
</pre>


            <p>The number of columns needed is 6.
	The <code>#grid-item</code> element’s column-start line is index 4,
	so its span ensures that it’s column-end line will be index 7.
	This requires <code>7 - 1 = 6</code> columns to hold,
	which is larger than the <a data-link-type="dfn" href="#explicit-grid">explicit grid</a>’s 5 columns.</p>
</div>
          

        </li>
        <li data-md="">
          <p><b>Position the remaining grid items.</b></p>
          

          <p>The <dfn data-dfn-type="dfn" data-export="" data-local-title="cursor" id="auto-placement-cursor">auto-placement cursor<a class="self-link" href="#auto-placement-cursor"></a></dfn> defines the current “insertion point” in the grid,
specified as a pair of row and column <a data-link-type="dfn" href="#grid-line">grid lines</a>.
Initially the <a data-link-type="dfn" href="#auto-placement-cursor">auto-placement cursor</a> is specified with a row and column position both equal to 1.</p>
          

          <p>The <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-flow">grid-auto-flow</a> value in use determines how to position the items:</p>
          

          <dl>
            <dt data-md="">
              <p>“sparse” packing (omitted <a class="css" data-link-type="maybe" href="#valdef-grid-auto-flow-dense">dense</a> keyword)</p>
              

            </dt>
            <dd data-md="">
              <p>For each <a data-link-type="dfn" href="#grid-item">grid item</a> that hasn’t been positioned by the previous steps,
in <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order">order-modified document order</a>:</p>
              

              <dl>
                <dt data-md="">
                  <p>If the item has a <a data-link-type="dfn" href="#definite-grid-position">definite column position</a>:</p>
                  

                </dt>
                <dd data-md="">

                  <ol>
                    <li data-md="">
                      <p>Set the column position of the <a data-link-type="dfn" href="#auto-placement-cursor">cursor</a> to be equal to the column-start line index of the <a data-link-type="dfn" href="#grid-item">grid item</a>.
If this is less than the previous column position of the <a data-link-type="dfn" href="#auto-placement-cursor">cursor</a>,
increment the row position by 1.</p>
                      

                    </li>
                    <li data-md="">
                      <p>Increment the <a data-link-type="dfn" href="#auto-placement-cursor">cursor</a>’s row position until a value is found
where the <a data-link-type="dfn" href="#grid-item">grid item</a> does not overlap any <a data-link-type="dfn" href="#occupied">occupied</a> grid cells
(creating new rows in the <a data-link-type="dfn" href="#implicit-grid">implicit grid</a> as necessary).</p>
                      

                    </li>
                    <li data-md="">
                      <p>Set the item’s row-start line to the <a data-link-type="dfn" href="#auto-placement-cursor">cursor’s</a> row position.
(Implicitly setting the item’s row-end line according to its span, as well.)</p>
                      

                    </li></ol>
                  

                </dd>
                <dt data-md="">
                  <p>If the item has an <a data-link-type="dfn" href="#automatic-grid-position">automatic grid position</a> in both axes:</p>
                  

                </dt>
                <dd data-md="">

                  <ol>
                    <li data-md="">
                      <p>Increment the column position of the <a data-link-type="dfn" href="#auto-placement-cursor">auto-placement cursor</a>
until either this item’s <a data-link-type="dfn" href="#grid-area">grid area</a> does not overlap any <a data-link-type="dfn" href="#occupied">occupied</a> grid cells,
or the <a data-link-type="dfn" href="#auto-placement-cursor">cursor’s</a> column position,
plus the item’s column span,
overflow the number of columns in the implicit grid,
as determined earlier in this algorithm.</p>
                      

                    </li>
                    <li data-md="">
                      <p>If a non-overlapping position was found in the previous step,
set the item’s row-start and column-start lines to the <a data-link-type="dfn" href="#auto-placement-cursor">cursor’s</a> position.
Otherwise,
increment the <a data-link-type="dfn" href="#auto-placement-cursor">auto-placement cursor</a>’s row position
(creating new rows in the <a data-link-type="dfn" href="#implicit-grid">implicit grid</a> as necessary),
set its column position to 1,
and return to the previous step.</p>
                      

                    </li></ol>
                </dd></dl>
              

            </dd>
            <dt data-md="">
              <p>“dense” packing (<a class="css" data-link-type="maybe" href="#valdef-grid-auto-flow-dense">dense</a> specified)</p>
              

            </dt>
            <dd data-md="">
              <p>For each <a data-link-type="dfn" href="#grid-item">grid item</a> that hasn’t been positioned by the previous steps,
in <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order">order-modified document order</a>:</p>
              

              <dl>
                <dt data-md="">
                  <p>If the item has a <a data-link-type="dfn" href="#definite-grid-position">definite column position</a>:</p>
                  

                </dt>
                <dd data-md="">

                  <ol>
                    <li data-md="">
                      <p>Set the row position of the cursor to 1.
Set the column position of the cursor to be equal to the column-start line index of the <a data-link-type="dfn" href="#grid-item">grid item</a>.</p>
                      

                    </li>
                    <li data-md="">
                      <p>Increment the <a data-link-type="dfn" href="#auto-placement-cursor">auto-placement cursor</a>’s row position until a value is found
where the <a data-link-type="dfn" href="#grid-item">grid item</a> does not overlap any <a data-link-type="dfn" href="#occupied">occupied</a> grid cells
(creating new rows in the <a data-link-type="dfn" href="#implicit-grid">implicit grid</a> as necessary).</p>
                      

                    </li>
                    <li data-md="">
                      <p>Set the item’s row-start line index to the <a data-link-type="dfn" href="#auto-placement-cursor">cursor’s</a> row position.
(Implicitly setting the item’s row-end line according to its span, as well.)</p>
                      

                    </li></ol>
                  

                </dd>
                <dt data-md="">
                  <p>If the item has an <a data-link-type="dfn" href="#automatic-grid-position">automatic grid position</a> in both axes:</p>
                  

                </dt>
                <dd data-md="">

                  <ol>
                    <li data-md="">
                      <p>Set the cursor’s row and column positions both to 1.</p>
                      

                    </li>
                    <li data-md="">
                      <p>Increment the column position of the <a data-link-type="dfn" href="#auto-placement-cursor">auto-placement cursor</a>
until either this item’s <a data-link-type="dfn" href="#grid-area">grid area</a> does not overlap any <a data-link-type="dfn" href="#occupied">occupied</a> grid cells,
or the <a data-link-type="dfn" href="#auto-placement-cursor">cursor’s</a> column position,
plus the item’s column span,
overflow the number of columns in the implicit grid,
as determined earlier in this algorithm.</p>
                      

                    </li>
                    <li data-md="">
                      <p>If a non-overlapping position was found in the previous step,
set the item’s row-start and column-start lines to the <a data-link-type="dfn" href="#auto-placement-cursor">cursor’s</a> position.
Otherwise,
increment the <a data-link-type="dfn" href="#auto-placement-cursor">auto-placement cursor</a>’s row position
(creating new rows in the <a data-link-type="dfn" href="#implicit-grid">implicit grid</a> as necessary),
set its column position to 1,
and return to the previous step.</p>
                      

                    </li></ol>
                </dd></dl>
            </dd></dl>
          

        </li></ol>

      <h2 class="heading settled" data-level="10" id="alignment"><span class="secno">10. </span><span class="content">
Alignment</span><a class="self-link" href="#alignment"></a></h2>


      <p>After a <a data-link-type="dfn" href="#grid-container">grid container</a>’s <a data-link-type="dfn" href="#grid-track">grid tracks</a> have been sized,
	and the dimensions of all <a data-link-type="dfn" href="#grid-item">grid items</a> are finalized,
	<a data-link-type="dfn" href="#grid-item">grid items</a> can be aligned within their <a data-link-type="dfn" href="#grid-area">grid areas</a>.</p>


      <p>The <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-margin">margin</a> properties can be used to align items in a manner similar to,
	but more powerful than,
	what margins can do in block layout.
	<a data-link-type="dfn" href="#grid-item">Grid items</a> also respect the alignment properties from the Box Alignment spec,
	which allow easy keyword-based alignment of items in both the <a data-link-type="dfn" href="#row-axis">row axis</a> and <a data-link-type="dfn" href="#column-axis">column axis</a>.</p>


      <p>By default,
	<a data-link-type="dfn" href="#grid-item">grid items</a> stretch to fill their <a data-link-type="dfn" href="#grid-area">grid area</a>.
	However, if <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-self">justify-self</a> or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-self">align-self</a> compute to a value other than <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-align-3/#valdef-content-distribution-stretch">stretch</a>
	or margins are <a class="css" data-link-for="margin" data-link-type="value">auto</a>,
	<a data-link-type="dfn" href="#grid-item">grid items</a> will auto-size to fit their contents.</p>


      <h3 class="heading settled" data-level="10.1" id="auto-margins"><span class="secno">10.1. </span><span class="content">
Aligning with <a class="css" data-link-for="margin" data-link-type="value">auto</a> margins</span><a class="self-link" href="#auto-margins"></a></h3>


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


      <p>Auto margins on <a data-link-type="dfn" href="#grid-item">grid items</a> have an effect very similar to auto margins in block flow:</p>

	
      <ul>
		
        <li>
			During calculations of <a data-link-type="dfn" href="#grid-track">grid track</a> sizes, auto margins are treated as <span class="css">0</span>.

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

		</li>
        <li>
			Overflowing elements ignore their auto margins and overflow in the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#end">end</a> directions.
	</li>
      </ul>


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

	
      <div class="example">
		
        <p class="issue" id="issue-1383de0a"><a class="self-link" href="#issue-1383de0a"></a>
			TODO: EXAMPLE HERE
	</p>
      </div>


      <h3 class="heading settled" data-level="10.2" id="row-align"><span class="secno">10.2. </span><span class="content">
Row-axis Alignment: the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-self">justify-self</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-items">justify-items</a> properties</span><a class="self-link" href="#row-align"></a></h3>


      <p><a data-link-type="dfn" href="#grid-item">Grid items</a> can be aligned in the inline dimension
	by using the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-self">justify-self</a> property on the <a data-link-type="dfn" href="#grid-item">grid item</a>
	or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-items">justify-items</a> property on the <a data-link-type="dfn" href="#grid-container">grid container</a>,
	as defined in <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3-align" title="CSS3-ALIGN">[CSS3-ALIGN]</a>.</p>

	
      <div class="example">
		For example,
		for an English document,
		the inline axis is horizontal,
		and so the <a class="property" data-link-type="propdesc">justify-*</a> properties align the <a data-link-type="dfn" href="#grid-item">grid items</a> horizontally.

		
        <p class="issue" id="issue-3a8dda12"><a class="self-link" href="#issue-3a8dda12"></a>
			TODO: provide example
	</p>
      </div>


      <h3 class="heading settled" data-level="10.3" id="column-align"><span class="secno">10.3. </span><span class="content">
Column-axis Alignment: the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-self">align-self</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-items">align-items</a> properties</span><a class="self-link" href="#column-align"></a></h3>


      <p><a data-link-type="dfn" href="#grid-item">Grid items</a> can also be aligned in the block dimension
	(perpendicular to the inline dimension)
	by using the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-self">align-self</a> property on the <a data-link-type="dfn" href="#grid-item">grid item</a>
	or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-items">align-items</a> property on the <a data-link-type="dfn" href="#grid-container">grid container</a>,
	as defined in <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3-align" title="CSS3-ALIGN">[CSS3-ALIGN]</a>.</p>


      <h3 class="heading settled" data-level="10.4" id="grid-align"><span class="secno">10.4. </span><span class="content">
Aligning the Grid: the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-content">justify-content</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-content">align-content</a> properties</span><a class="self-link" href="#grid-align"></a></h3>


      <p>If the <a data-link-type="dfn" href="#grid">grid</a>’s outer edges do not correspond to the <a data-link-type="dfn" href="#grid-container">grid container</a>’s content edges
	(for example, if no columns are flex-sized),
	the <a data-link-type="dfn" href="#grid-track">grid tracks</a> are aligned within the content box according to the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-content">justify-content</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-content">align-content</a> properties on the <a data-link-type="dfn" href="#grid-container">grid container</a>.</p>

	
      <div class="example">
		For example, the following grid is centered vertically,
		and aligned to the right edge of its <a data-link-type="dfn" href="#grid-container">grid container</a>:

		
        <pre>.grid {
  display: grid;
  grid: 12rem 12rem 12rem 12rem / 10rem 10rem 10rem 10rem;
  justify-content: end;
  align-content: center;
}
</pre>
        

        <figure>
			<img alt="" height="252" src="images/align-justify-content.svg" width="352">
		</figure>
        
	
      </div>


      <h3 class="heading settled" data-level="10.5" id="grid-baselines"><span class="secno">10.5. </span><span class="content">
Grid Baselines</span><a class="self-link" href="#grid-baselines"></a></h3>


      <p>The baselines of a <a data-link-type="dfn" href="#grid-container">grid container</a> are determined as follows:</p>

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

		</li>
        <li>
			Otherwise, if the grid container has at least one <a data-link-type="dfn" href="#grid-item">grid item</a> whose area intersects the first row/column,
			and the first such <a data-link-type="dfn" href="#grid-item">grid item</a> (in <a data-link-type="dfn" href="#order-modified-grid-order">order-modified grid order</a>) has a baseline
			parallel to the relevant axis,
			the grid container’s baseline is that baseline.

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


      <p>A <a data-link-type="dfn" href="#grid-item">grid item</a> <dfn data-dfn-type="dfn" data-export="" id="baseline-participation">participates in baseline alignment<a class="self-link" href="#baseline-participation"></a></dfn> in a particular dimension
	if its value for <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-self">align-self</a> or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-self">justify-self</a>, as appropriate, is <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-justify-self-justify-items-align-content-align-self-align-items-baseline">baseline</a>
	and its inline axis is parallel to that dimension.</p>


      <p><dfn data-dfn-type="dfn" data-export="" id="order-modified-grid-order"><a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-flexbox-1/#propdef-order">order</a>-modified grid order<a class="self-link" href="#order-modified-grid-order"></a></dfn> is the order in which
	<a data-link-type="dfn" href="#grid-item">grid items</a> are encountered when traversing the grid’s <a data-link-type="dfn" href="#grid-cell">grid cells</a>,
	in row-major order if calculating the inline-axis baseline,
	or in column-major order if calculating the block-axis baseline.
	If two items are encountered at the same time,
	they are taken in <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order">order-modified document order</a>.</p>


      <p>When calculating the baseline according to the above rules,
	if the box contributing a baseline has an <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-overflow-3/#overflow0">overflow</a> value that allows scrolling,
	the box must be treated as being in its initial scroll position
	for the purpose of determining its baseline.</p>


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


      <h2 class="heading settled" data-level="11" id="layout-algorithm"><span class="secno">11. </span><span class="content">
Grid Sizing</span><a class="self-link" href="#layout-algorithm"></a></h2>


      <p>This section defines the <dfn data-dfn-type="dfn" data-export="" id="grid-sizing-algorithm">grid sizing algorithm<a class="self-link" href="#grid-sizing-algorithm"></a></dfn>,
	which determines the size of all <a data-link-type="dfn" href="#grid-track">grid tracks</a>
	and, by extension, the entire grid.</p>


      <p>Each track has specified <a data-link-type="dfn" href="#min-track-sizing-function" title="min track sizing function">minimum</a> and
	<a data-link-type="dfn" href="#max-track-sizing-function" title="max track sizing function">maximum</a> <a data-link-type="dfn" href="#track-sizing-function">sizing functions</a>
	(which may be the same).
	Each <a data-link-type="dfn" href="#track-sizing-function">sizing function</a> is either:</p>

	
      <ul>
		
        <li>A <dfn data-dfn-type="dfn" data-noexport="" id="fixed-sizing-function">fixed sizing function<a class="self-link" href="#fixed-sizing-function"></a></dfn> (<a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#length-value">&lt;length></a> or resolveable <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#percentage-value">&lt;percentage></a>).
		</li>
        <li>An <dfn data-dfn-type="dfn" data-noexport="" id="intrinsic-sizing-function">intrinsic sizing function<a class="self-link" href="#intrinsic-sizing-function"></a></dfn> (<a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a>, <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a>, or <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a>).
		</li>
        <li>A <dfn data-dfn-type="dfn" data-noexport="" id="flexible-sizing-function">flexible sizing function<a class="self-link" href="#flexible-sizing-function"></a></dfn> (<a class="production css" data-link-type="type" href="#typedef-flex">&lt;flex></a>).
	</li>
      </ul>


      <p>The <a data-link-type="dfn" href="#grid-sizing-algorithm">grid sizing algorithm</a> defines how to resolve these sizing constraints into used track sizes.</p>


      <h3 class="heading settled" data-level="11.1" id="algo-overview"><span class="secno">11.1. </span><span class="content">
Grid Sizing Algorithm</span><a class="self-link" href="#algo-overview"></a></h3>

	
      <ol>
		
        <li>
			First, the <a data-link-type="dfn" href="#track-sizing-algorithm">track sizing algorithm</a> is used to resolve the sizes of the <a data-link-type="dfn" href="#grid-column">grid columns</a>.


          <p>If calculating the layout of a <a data-link-type="dfn" href="#grid-item">grid item</a> in this step
			depends on the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#available">available space</a> in the <a data-link-type="dfn" href="#row-axis">row axis</a>,
			assume the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#available">available space</a> that it would have
			if any row with a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#definite">definite</a> <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a>
			had that size and all other rows were infinite.</p>
          

        </li>
        <li>
			Next, the <a data-link-type="dfn" href="#track-sizing-algorithm">track sizing algorithm</a> resolves the sizes of the <a data-link-type="dfn" href="#grid-row">grid rows</a>,
			using the <a data-link-type="dfn" href="#grid-column">grid column</a> sizes calculated in the previous step.

		</li>
        <li>
			Then, if the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-contribution">min-content contribution</a> of any grid items have changed
			based on the row sizes calculated in step 2,
			steps 1 and 2 are repeated with the new <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-contribution">min-content contribution</a> (once only).

			
          <div class="note" role="note">
				This cycle is necessary for cases where the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#inline-size">inline size</a> of a <a data-link-type="dfn" href="#grid-item">grid item</a>
				depends on the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#block-size">block size</a> of its <a data-link-type="dfn" href="#grid-area">grid area</a>.
				Examples include wrapped column <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-flexbox-1/#flex-container">flex containers</a> (<a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-flexbox-1/#propdef-flex-flow" title="flex-flow">flex-flow: column wrap</a>),
				<a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#establish-an-orthogonal-flow">orthogonal flows</a> (<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-writing-mode">writing-mode</a>),
				and <a data-link-spec="css-multicol" data-link-type="dfn" href="http://dev.w3.org/csswg/css-multicol-1/#multi-column-element">multi-column elements</a>.
			</div>
          

          <p class="issue" id="issue-4f54519f"><a class="self-link" href="#issue-4f54519f"></a>Is one cycle enough?</p>
          

        </li>
        <li>
			Finally, the <a data-link-type="dfn" href="#grid-container">grid container</a> is sized
			using the resulting size of the <a data-link-type="dfn" href="#grid">grid</a> as its content size,
			and the tracks are aligned within the <a data-link-type="dfn" href="#grid-container">grid container</a> 
			according to the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-content">align-content</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-content">justify-content</a> properties.
			<span class="note" role="note">Note: This can introduce extra space within or between tracks.
	</span></li>
      </ol>


      <p>Once the size of each <a data-link-type="dfn" href="#grid-area">grid area</a> is thus established,
	the <a data-link-type="dfn" href="#grid-item">grid items</a> are laid out into their respective containing blocks.</p>


      <h3 class="heading settled" data-level="11.2" id="algo-terms"><span class="secno">11.2. </span><span class="content">
Track Sizing Terminology</span><a class="self-link" href="#algo-terms"></a></h3>

	
      <dl>
		
        <dt><dfn data-dfn-type="dfn" data-noexport="" id="min-track-sizing-function">min track sizing function<a class="self-link" href="#min-track-sizing-function"></a></dfn>
		</dt>
        <dd>
			If the track was sized with a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-minmax">minmax()</a> function,
			this is the first argument to that function.
			Otherwise, it’s the track’s sizing function.

		</dd>
        <dt><dfn data-dfn-type="dfn" data-noexport="" id="max-track-sizing-function">max track sizing function<a class="self-link" href="#max-track-sizing-function"></a></dfn>
		</dt>
        <dd>
			If the track was sized with a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-minmax">minmax()</a> function,
			this is the second argument to that function.
			Otherwise, it’s the track’s sizing function.

		</dd>
        <dt><dfn data-dfn-type="dfn" data-noexport="" id="free-space">free space<a class="self-link" href="#free-space"></a></dfn>
		</dt>
        <dd>
			Equal to the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#available">available space</a> minus the sum of the <a data-link-type="dfn" href="#base-size">base sizes</a> of all the grid tracks,
			clamped to a minimum of zero.
			This value can change over the course of the algorithm,
			as <a data-link-type="dfn" href="#base-size">base sizes</a> are adjusted.


          <p>If <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#available">available space</a> is <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#indefinite">indefinite</a>,
			the <a data-link-type="dfn" href="#free-space">free space</a> is <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#indefinite">indefinite</a> as well.</p>
          

        </dd>
        <dt><dfn data-dfn-type="dfn" data-noexport="" id="span-count">span count<a class="self-link" href="#span-count"></a></dfn>
		</dt>
        <dd>
			The number of <a data-link-type="dfn" href="#grid-track">grid tracks</a> crossed by a <a data-link-type="dfn" href="#grid-item">grid item</a> in the applicable dimension.
	</dd>
      </dl>


      <h3 class="heading settled" data-level="11.3" id="algo-track-sizing"><span class="secno">11.3. </span><span class="content">
Track Sizing Algorithm</span><a class="self-link" href="#algo-track-sizing"></a></h3>


      <p>The remainder of this section is the <dfn data-dfn-type="dfn" data-noexport="" id="track-sizing-algorithm">track sizing algorithm<a class="self-link" href="#track-sizing-algorithm"></a></dfn>,
	which calculates from the <a data-link-type="dfn" href="#min-track-sizing-function" title="min track sizing function">min</a> and <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing functions</a>
	the used track size.
	Each track has a <dfn data-dfn-type="dfn" data-noexport="" id="base-size">base size<a class="self-link" href="#base-size"></a></dfn>,
	a <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#length-value">&lt;length></a> which grows throughout the algorithm
	and which will eventually be the track’s final size,
	and a <dfn data-dfn-type="dfn" data-noexport="" id="growth-limit">growth limit<a class="self-link" href="#growth-limit"></a></dfn>,
	a <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#length-value">&lt;length></a> which provides a desired maximum size for the <a data-link-type="dfn" href="#base-size">base size</a>.
	There are 4 steps:</p>

	
      <ol>
		
        <li><a href="#algo-init">Initialize Track Sizes</a>
		</li>
        <li><a href="#algo-content">Resolve Intrinsic Track Sizes</a>
		</li>
        <li><a href="#algo-grow-tracks">Maximize Tracks</a>
		</li>
        <li><a href="#algo-flex-tracks">Stretch Flexible Tracks</a>
	</li>
      </ol>


      <h3 class="heading settled" data-level="11.4" id="algo-init"><span class="secno">11.4. </span><span class="content">
Initialize Track Sizes</span><a class="self-link" href="#algo-init"></a></h3>


      <p><strong>Initialize each track’s base size and growth limit.</strong>
	For each track,
	if the track’s <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a> is:</p>

	
      <dl class="switch">
		
        <dt>A <a data-link-type="dfn" href="#fixed-sizing-function">fixed sizing function</a>
		</dt>
        <dd>
			Resolve to an absolute length and use that size as the track’s initial <a data-link-type="dfn" href="#base-size">base size</a>.


          <p class="note" role="note">Note: <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#indefinite">Indefinite</a> lengths cannot occur,
			as they’re treated as <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a>.</p>
          

        </dd>
        <dt>An <a data-link-type="dfn" href="#intrinsic-sizing-function">intrinsic sizing function</a>
		</dt>
        <dt>A <a data-link-type="dfn" href="#flexible-sizing-function">flexible sizing function</a>
		</dt>
        <dd>
			Use an initial <a data-link-type="dfn" href="#base-size">base size</a> of zero.
	</dd>
      </dl>


      <p>For each track,
	if the track’s <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a> is:</p>

	
      <dl class="switch">
		
        <dt>A <a data-link-type="dfn" href="#fixed-sizing-function">fixed sizing function</a>
		</dt>
        <dd>
			Resolve to an absolute length and use that size as the track’s initial <a data-link-type="dfn" href="#growth-limit">growth limit</a>.

		</dd>
        <dt>An <a data-link-type="dfn" href="#intrinsic-sizing-function">intrinsic sizing function</a>
		</dt>
        <dd>
			Use an initial <a data-link-type="dfn" href="#growth-limit">growth limit</a> of infinity.

		</dd>
        <dt>A <a data-link-type="dfn" href="#flexible-sizing-function">flexible sizing function</a>
		</dt>
        <dd>
			Use the track’s initial <a data-link-type="dfn" href="#base-size">base size</a> as its initial <a data-link-type="dfn" href="#growth-limit">growth limit</a>.
	</dd>
      </dl>


      <p>In all cases, if the <a data-link-type="dfn" href="#growth-limit">growth limit</a> is less than the <a data-link-type="dfn" href="#base-size">base size</a>,
	increase the <a data-link-type="dfn" href="#growth-limit">growth limit</a> to match the <a data-link-type="dfn" href="#base-size">base size</a>.</p>


      <h3 class="heading settled" data-level="11.5" id="algo-content"><span class="secno">11.5. </span><span class="content">
Resolve Intrinsic Track Sizes</span><a class="self-link" href="#algo-content"></a></h3>


      <p>This step resolves intrinsic track <a data-link-type="dfn" href="#track-sizing-function">sizing functions</a> to absolute lengths.
	First it resolves those sizes based on items that are contained wholly within a single track.
	Then it gradually adds in the space requirements of items that span multiple tracks,
	evenly distributing the extra space across those tracks
	insofar as possible.</p>


      <p>When the <a data-link-type="dfn" href="#grid-container">grid container</a> is being sized under a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-constraint">min-content constraint</a>,
	a track with a flexible <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a>
	is treated as if its <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a> was <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a>
	for the purposes of this step.
	<span class="issue" id="issue-b256823c"><a class="self-link" href="#issue-b256823c"></a>This seems correct, but should be checked because it wasn’t in the original algorithm.</span></p>


      <p class="note" role="note">Note: There is no single way to satisfy these constraints
	when items span across multiple tracks.
	This algorithm embodies a number of heuristics
	which have been seen to deliver good results on real-world use-cases,
	such as the "game" examples earlier in this specification.
	This algorithm may be updated in the future
	to take into account more advanced heuristics as they are identified.</p>

	
      <ol>
		
        <li>
			<strong>Size tracks to fit non-spanning items:</strong>
			For each track with an intrinsic <a data-link-type="dfn" href="#track-sizing-function">track sizing function</a>,
			consider the items in it with a span of 1:
			
          <ul>
				
            <li>
					<strong>For min-content minimums:</strong>
					If the track has a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a> <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a>,
					set its <a data-link-type="dfn" href="#base-size">base size</a>
					to the maximum of the items’ <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-contribution">min-content contributions</a>.
				</li>
            <li>
					<strong>For max-content minimums:</strong>
					If the track has a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a>,
					set its <a data-link-type="dfn" href="#base-size">base size</a>
					to the maximum of the items’ <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#max-content-contribution">max-content contributions</a>.
				</li>
            <li>
					<strong>For auto minimums:</strong>
					If the track has an <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a> <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a>,
					set its <a data-link-type="dfn" href="#base-size">base size</a>
					to the maximum of the items’ outer minimum sizes,
					as specified by their respective <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width">min-width</a> or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height">min-height</a> properties
					(whichever matches the relevant axis).
				</li>
            <li>
					<strong>For min-content maximums:</strong>
					If the track has a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a> <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a>,
					set its <a data-link-type="dfn" href="#growth-limit">growth limit</a>
					to the maximum of the items’ <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-contribution">min-content contributions</a>.
				</li>
            <li>
					<strong>For max-content and auto maximums:</strong>
					If the track has a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> or <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a> <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a>,
					set its <a data-link-type="dfn" href="#growth-limit">growth limit</a>
					to the maximum of the items’ <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#max-content-contribution">max-content contributions</a>.
			</li>
          </ul>
          

          <p>In all cases, if a track’s <a data-link-type="dfn" href="#growth-limit">growth limit</a> is now less than its <a data-link-type="dfn" href="#base-size">base size</a>,
			increase the <a data-link-type="dfn" href="#growth-limit">growth limit</a> to match the <a data-link-type="dfn" href="#base-size">base size</a>.</p>
          

        </li>
        <li>
			<strong>Increase sizes to accommodate spanning items:</strong>
			Next, consider the items with a span of 2
			that do not span a track with a <a data-link-type="dfn" href="#flexible-sizing-function">flexible sizing function</a>:
			
			
          <ol>
				
            <li>
					<strong>For intrinsic minimums:</strong>
					First increase the <a data-link-type="dfn" href="#base-size">base size</a> of tracks with
					a <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a> of <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a>, <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a>, or <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a>
					by <a href="#extra-space">distributing extra space</a> as needed
					to accommodate the contributions dictated by these items’
					minimum size (as specified by <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width">min-width</a>/<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height">min-height</a>).
				</li>
            <li>
					<strong>For content-based minimums:</strong>
					Next continue to increase the <a data-link-type="dfn" href="#base-size">base size</a> of tracks with
					a <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a> of <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a> or <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a>
					by <a href="#extra-space">distributing extra space</a> as needed
					to account for these items' <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-contribution">min-content contributions</a>.
				</li>
            <li>
					<strong>For max-content minimums:</strong>
					Third continue to increase the <a data-link-type="dfn" href="#base-size">base size</a> of tracks with
					a <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a> of <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a>
					by <a href="#extra-space">distributing extra space</a> as needed
					to account for these items' <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#max-content-contribution">max-content contributions</a>.
				</li>
            <li>
					If at this point any track’s <a data-link-type="dfn" href="#growth-limit">growth limit</a> is now less than its <a data-link-type="dfn" href="#base-size">base size</a>,
					increase its <a data-link-type="dfn" href="#growth-limit">growth limit</a> to match its <a data-link-type="dfn" href="#base-size">base size</a>.
				</li>
            <li>
					<strong>For intrinsic maximums:</strong>
					Next increase the <a data-link-type="dfn" href="#growth-limit">growth limit</a> of tracks with
					a <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a> of <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a> or <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> (including <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a>)
					by <a href="#extra-space">distributing extra space</a> as needed
					to account for these items' <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-contribution">min-content contributions</a>.
					Mark any tracks whose <a data-link-type="dfn" href="#growth-limit">growth limit</a> changed
					from infinite to finite in this step
					as <dfn data-dfn-type="dfn" data-noexport="" id="infinitely-growable">infinitely growable<a class="self-link" href="#infinitely-growable"></a></dfn> for the next step.
					
				</li>
            <li>
					<strong>For max-content maximums:</strong>
					Lastly continue to increase the <a data-link-type="dfn" href="#growth-limit">growth limit</a> of tracks with
					a <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a> of <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> (including <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a>)
					by <a href="#extra-space">distributing extra space</a> as needed
					to account for these items' <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#max-content-contribution">max-content contributions</a>.
			</li>
          </ol>
          

          <p>Repeat incrementally for items with greater spans until all items have been considered.</p>
          

        </li>
        <li>
			If any track still has an infinite <a data-link-type="dfn" href="#growth-limit">growth limit</a>
			(because, for example, it had no items placed in it),
			set its <a data-link-type="dfn" href="#growth-limit">growth limit</a> to its <a data-link-type="dfn" href="#base-size">base size</a>.
	</li>
      </ol>

	
      <p id="extra-space">
		To <dfn data-dfn-type="dfn" data-noexport="" id="distribute-extra-space">distribute extra space<a class="self-link" href="#distribute-extra-space"></a></dfn>
		by increasing the affected sizes of a set of tracks
		as required by a set of intrinsic size contributions,

	</p>
      <ol>
		
        <li>
			Maintain separately for each affected <a data-link-type="dfn" href="#base-size">base size</a> or <a data-link-type="dfn" href="#growth-limit">growth limit</a>
			an amount of planned increase.
			(This prevents the size increases from becoming order-dependent.)

		</li>
        <li>
			For each considered item,
			
          <ol>
				
            <li>
					<strong>Find the space to distribute:</strong>
					Subtract the corresponding size (<a data-link-type="dfn" href="#base-size">base size</a> or <a data-link-type="dfn" href="#growth-limit">growth limit</a>) of <em>every</em> spanned track
					from the item’s size contribution to find the item’s remaining size contribution.
					(For infinite <a data-link-type="dfn" href="#growth-limit">growth limits</a>, substitute the track’s <a data-link-type="dfn" href="#base-size">base size</a>.)
					This is the space to distribute. Floor it at zero.

              <pre><var>extra-space</var> = max(0, <var>size-contribution</var> - ∑<var>track-sizes</var>)</pre>
              

            </li>
            <li>
					<strong>Distribute space to base sizes up to growth limits:</strong>
					Distribute the space equally to the planned increase of each spanned track with an affected size,
					freezing tracks as their planned size reaches their <a data-link-type="dfn" href="#growth-limit">growth limits</a>
					(and continuing to grow the unfrozen tracks as needed).


              <p>If a track was marked as <a data-link-type="dfn" href="#infinitely-growable">infinitely growable</a> for this phase,
					treat its <a data-link-type="dfn" href="#growth-limit">growth limit</a> as infinite for this calculation
					(and then unmark it).</p>
              

              <p class="note" role="note">Note: If the affected size was a <a data-link-type="dfn" href="#growth-limit">growth limit</a>,
					this step has no effect.</p>
              

            </li>
            <li>
					<strong>Distribute space beyond growth limits:</strong>
					If space remains after all tracks are frozen,
					unfreeze and continue to distribute space to…

					
              <ul>
						
                <li>
							when handling <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a> <a data-link-type="dfn" href="#base-size">base sizes</a>:
							any affected track that happens to also have an intrinsic <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a>;
							if there are no such tracks, then all affected tracks.
						</li>
                <li>
							when handling <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> <a data-link-type="dfn" href="#base-size">base sizes</a>:
							any affected track that happens to also have a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a>;
							if there are no such tracks, then all affected tracks.
						</li>
                <li>when handling any intrinsic <a data-link-type="dfn" href="#growth-limit">growth limit</a>:
							all affected tracks.
					</li>
              </ul>
              
				
            </li>
            <li>
					<strong>Update the tracks' affected sizes</strong>
					by folding in the calculated increase
					so that the next round of space distribution will account for the increase.
					(If the affected size is infinite,
					set it to the track’s <a data-link-type="dfn" href="#base-size">base size</a> plus the calculated increase.)
			</li>
          </ol>
          
	
        </li>
      </ol>


      <p class="note" role="note">Note: When this step is complete,
	all intrinsic <a data-link-type="dfn" href="#base-size">base sizes</a> and <a data-link-type="dfn" href="#growth-limit">growth limits</a>
	will have been resolved to absolute lengths.</p>


      <h3 class="heading settled" data-level="11.6" id="algo-grow-tracks"><span class="secno">11.6. </span><span class="content">
Maximize Tracks</span><a class="self-link" href="#algo-grow-tracks"></a></h3>


      <p>If the <a data-link-type="dfn" href="#free-space">free space</a> is positive, distribute it equally to all tracks,
	freezing tracks as they reach their <a data-link-type="dfn" href="#growth-limit">growth limits</a>
	(and continuing to grow the unfrozen tracks as needed).</p>


      <p>For the purpose of this step:
	if sizing the <a data-link-type="dfn" href="#grid-container">grid container</a> under a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#max-content-constraint">max-content constraint</a>,
	the <a data-link-type="dfn" href="#free-space">free space</a> is infinite;
	if sizing under a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#min-content-constraint">min-content constraint</a>,
	the <a data-link-type="dfn" href="#free-space">free space</a> is zero.</p>


      <h3 class="heading settled" data-level="11.7" id="algo-flex-tracks"><span class="secno">11.7. </span><span class="content">
Stretch Flexible Tracks</span><a class="self-link" href="#algo-flex-tracks"></a></h3>


      <p>This step sizes flexible tracks
	using the largest value it can assign to an <span class="css">fr</span>
	without exceeding the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#available">available space</a>.</p>


      <p>First, find the used <a data-link-type="dfn" href="#flex-fraction">flex fraction</a>:</p>
	
      <dl>
		
        <dt>If the <a data-link-type="dfn" href="#free-space">free space</a> is zero:
		</dt>
        <dd>
			The used <a data-link-type="dfn" href="#flex-fraction">flex fraction</a> is zero.

		</dd>
        <dt>If the <a data-link-type="dfn" href="#free-space">free space</a> is a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#definite">definite</a> length:
		</dt>
        <dd>
			The used <a data-link-type="dfn" href="#flex-fraction">flex fraction</a> is the result of
			<a href="#algo-find-fr-size">finding the size of an fr</a>
			using all of the <a data-link-type="dfn" href="#grid-track">grid tracks</a>
			and a <a data-link-type="dfn" href="#space-to-fill">space to fill</a> of the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#available">available space</a>.

		</dd>
        <dt>If the <a data-link-type="dfn" href="#free-space">free space</a> is an <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#indefinite">indefinite</a> length:
		</dt>
        <dd>
			The used <a data-link-type="dfn" href="#flex-fraction">flex fraction</a> is the maximum of:

			
          <ul>
				
            <li>
					Each flexible track’s <a data-link-type="dfn" href="#base-size">base size</a> divided by its <a data-link-type="dfn">flex factor</a>.

				</li>
            <li>The result of
					<a href="#algo-find-fr-size">finding the size of an fr</a>
					for each <a data-link-type="dfn" href="#grid-item">grid item</a> that crosses a flexible track,
					using all the grid tracks that the item crosses
					and a <a data-link-type="dfn" href="#space-to-fill">space to fill</a> of the item’s <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#max-content-contribution">max-content contribution</a>.
			</li>
          </ul>
          
	
        </dd>
      </dl>


      <p>For each flexible track,
	if the product of the <var>used flex fraction</var> and the track’s <a data-link-type="dfn">flex factor</a>
	is greater than the track’s <a data-link-type="dfn" href="#base-size">base size</a>,
	set its <a data-link-type="dfn" href="#base-size">base size</a> to that product.</p>


      <p></p>


      <h4 class="heading settled" data-level="11.7.1" id="algo-find-fr-size"><span class="secno">11.7.1. </span><span class="content">
Find the Size of an <span class="css">fr</span></span><a class="self-link" href="#algo-find-fr-size"></a></h4>


      <p>This algorithm finds the largest size that an <span class="css">fr</span> unit can be
	without exceeding the target size.
	It must be called with a set of <a data-link-type="dfn" href="#grid-track">grid tracks</a>
	and some quantity of <dfn data-dfn-type="dfn" data-noexport="" id="space-to-fill">space to fill<a class="self-link" href="#space-to-fill"></a></dfn>.</p>

	
      <ol>
		
        <li>
			Let <dfn data-dfn-type="dfn" data-noexport="" id="leftover-space">leftover space<a class="self-link" href="#leftover-space"></a></dfn> be the <a data-link-type="dfn" href="#space-to-fill">space to fill</a>
			minus the <a data-link-type="dfn" href="#base-size">base sizes</a> of the non-flexible <a data-link-type="dfn" href="#grid-track">grid tracks</a>.

		</li>
        <li>
			Let <dfn data-dfn-type="dfn" data-noexport="" id="flex-factor-sum">flex factor sum<a class="self-link" href="#flex-factor-sum"></a></dfn> be the sum of the <a data-link-type="dfn">flex factors</a> of the flexible tracks.
			If this value is less than 1,
			set it to 1 instead.

		</li>
        <li>
			Let the <dfn data-dfn-type="dfn" data-noexport="" id="hypothetical-fr-size">hypothetical fr size<a class="self-link" href="#hypothetical-fr-size"></a></dfn>
			be the <a data-link-type="dfn" href="#leftover-space">leftover space</a>
			divided by the <a data-link-type="dfn" href="#flex-factor-sum">flex factor sum</a>.

		</li>
        <li>
			If the product of the <a data-link-type="dfn" href="#hypothetical-fr-size">hypothetical fr size</a> and a flexible track’s <a data-link-type="dfn">flex factor</a>
			is less than the track’s base size,
			restart this algorithm
			treating all such tracks as inflexible.

		</li>
        <li>
			Return the <a data-link-type="dfn" href="#hypothetical-fr-size">hypothetical fr size</a>.
	</li>
      </ol>


      <h2 class="heading settled" data-level="12" id="pagination"><span class="secno">12. </span><span class="content">
Fragmenting Grid Layout</span><a class="self-link" href="#pagination"></a></h2>


      <p>Grid containers break across fragment containers (fragmentainers) <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3-break" title="CSS3-BREAK">[CSS3-BREAK]</a> between
	grid rows. The break-* properties do not apply to grid areas. When fragmentating grid containers
	the goal is to minimize the number of grid areas that get fragmented due to their grid row
	being fragmented.</p>


      <h3 class="heading settled" data-level="12.1" id="fragmentation-alg"><span class="secno">12.1. </span><span class="content">
Sample Fragmentation Algorithm</span><a class="self-link" href="#fragmentation-alg"></a></h3>

	
      <ol>
		
        <li>
			Layout the grid following the <a data-section="" href="#layout-algorithm">§11 
Grid Sizing</a> by using the
			fragmentainer box width and assume unlimited height. During this step all <a class="property" data-link-type="propdesc" href="#propdef-grid-row">grid-row</a>
			<a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a> and <span class="css">fr</span> values must be resolved.

		</li>
        <li>
			Layout the grid container using the values resolved in the previous step.

		</li>
        <li>
			If a grid row extends past the current fragment and it is not the first grid row in
			this fragment; push it to the next fragment. Do this even if the grid row has no items.

		</li>
        <li>
			If a grid area dimensions change due to fragmentation (do not include items that
			span rows in this decision), increase the grid row as necessary for rows that either:
			
          <ul>
				
            <li>
					have a content min track sizing function.

				</li>
            <li>
					are in a grid that does not have an explicit height and the grid row is flexible.
			</li>
          </ul>
          

        </li>
        <li>
			If the grid height is <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a>, the height of the grid should be the sum of the final
			row sizes.

		</li>
        <li>
			If a grid area overflows the grid container due to margins being collapsed during
			fragmentation, extend the grid container to contain this grid area (this step is
			necessary in order to avoid circular layout dependencies due to fragmentation).
	</li>
      </ol>

	
      <p class="note" role="note">
		If the grid’s height is specified, steps three and four may cause the grid rows to
		overflow the grid.
	</p>


      <h2 class="no-num heading settled" id="acks"><span class="content">
Acknowledgements</span><a class="self-link" href="#acks"></a></h2>


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


      <h2 class="no-num heading settled" id="changes"><span class="content">
Changes</span><a class="self-link" href="#changes"></a></h2>


      <p>The following significant changes were made since the
	<a href="http://www.w3.org/TR/2014/WD-css3-grid-layout-20140513/">13 May 2014 Working Draft</a>.</p>

	
      <ul>
		
        <li>Applied <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-content">align-content</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-content">justify-content</a> to the <a data-link-type="dfn" href="#grid-track">grid tracks</a> rather than to the <a data-link-type="dfn" href="#grid">grid</a> as a monolithic unit, to allow justification of grid items across the grid container.
		</li>
        <li>Removed <span class="css">stack</span> value from <a class="property" data-link-type="propdesc" href="#propdef-grid-auto-flow">grid-auto-flow</a>.
		</li>
        <li>Added <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a> keyword to <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> function for auto-filled tracks.
		</li>
        <li>Fixed handling of row-locked auto-placed items to correctly place sparsely.
		</li>
        <li>Ported special handling of fractional flex values from Flex Layout to Grid Layout.
		</li>
        <li>Changed definition of <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-auto">auto</a> track sizes to look at the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width">min-width</a>/<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-max-width">max-width</a> properties
		    instead of always using the min-content size.
		</li>
        <li>Defined error handling for too-large grids, placement conflicts, and missing named lines.
		</li>
        <li>Clarified handling of orthogonal flows, sizing of grid containers, and sizing of grid items
		</li>
        <li>Fixed error in resolution of intrinsic track sizes that resulted in infinite growth limits.
		</li>
        <li>Enforced <a data-link-type="dfn" href="#growth-limit">growth limit</a> >= <a data-link-type="dfn" href="#base-size">base size</a> throughout the <a data-link-type="dfn" href="#track-sizing-algorithm">track sizing algorithm</a>.
		</li>
        <li>Various other layout clarifications and fixes.
	</li>
      </ul>


      <h2 class="no-num heading settled" id="translated-algo"><span class="content">
Appendix A: Translated Layout Algorithm</span><a class="self-link" href="#translated-algo"></a></h2>


      <p class="note" role="note">Note: The following is a more direct translation of the
	<a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140123/#track-sizing-algorithm">original Microsoft editors' track sizing algorithm</a>,
	from which the current algorithm is derived.
	It follows the original algorithm structure
	without being as programmatic in its language.
	It is preserved here to aid in review of the current specification
	(and will be removed in the next revision).</p>


      <p>This algorithm is run multiple times,
	once for each set of <a data-link-type="dfn" href="#grid-item">grid items</a> with a particular <a data-link-type="dfn" href="#span-count">span count</a>,
	and each time it moves through four phases,
	each one addressing one combination of <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a> or <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a>
	as a <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a> or <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a>.</p>


      <p>Starting from the set of all <a data-link-type="dfn" href="#grid-item">grid items</a> in the grid,
	remove any with a <a data-link-type="dfn" href="#span-count">span count</a> greater than one
	which span a track with a <a class="production css" data-link-type="type" href="#typedef-flex">&lt;flex></a> <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a>.
	Of the remaining,
	sort them into groups according to their <a data-link-type="dfn" href="#span-count">span count</a>,
	and order the groups in ascending order of <a data-link-type="dfn" href="#span-count">span count</a>.
	For each group, in order,
	perform the following steps four times:</p>

	
      <ol>
		
        <li>
			<b>Initialize variables</b>.


          <p>Let each item’s <dfn data-dfn-type="dfn" data-noexport="" id="needed-space">needed space<a class="self-link" href="#needed-space"></a></dfn> be:</p>
          

          <dl class="phase">
				
            <dt>In phase 1
				</dt>
            <dd>
					The min-content size of the item,
					minus the sum of the <a data-link-type="dfn" href="#base-size">base sizes</a> of the grid tracks it spans.
				</dd>
            <dt>In phase 2
				</dt>
            <dd>
					The max-content size of the item,
					minus the sum of the <a data-link-type="dfn" href="#base-size">base sizes</a> of the grid tracks it spans.
				</dd>
            <dt>In phase 3
				</dt>
            <dd>
					The min-content size of the item,
					minus the sum of the <a data-link-type="dfn" href="#growth-limit">growth limits</a> of the grid tracks it spans
					(or, if the <a data-link-type="dfn" href="#growth-limit">growth limit</a> is infinite, the <a data-link-type="dfn" href="#base-size">base size</a>).
				</dd>
            <dt>In phase 4
				</dt>
            <dd>
					The max-content size of the item,
					minus the sum of the <a data-link-type="dfn" href="#growth-limit">growth limits</a> of the grid tracks it spans
					(or, if the <a data-link-type="dfn" href="#growth-limit">growth limit</a> is infinite, the <a data-link-type="dfn" href="#base-size">base size</a>).
			</dd>
          </dl>
          

          <p>Let each item’s <dfn data-dfn-type="dfn" data-noexport="" id="growable-tracks">growable tracks<a class="self-link" href="#growable-tracks"></a></dfn> be:</p>
          

          <dl class="phase">
				
            <dt>In phase 1
				</dt>
            <dd>
					The grid tracks it spans with a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a> or <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a>.
				</dd>
            <dt>In phase 2
				</dt>
            <dd>
					The grid tracks it spans with a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> <a data-link-type="dfn" href="#min-track-sizing-function">min track sizing function</a>.
				</dd>
            <dt>In phase 3
				</dt>
            <dd>
					The grid tracks it spans with a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a> or <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a>.
				</dd>
            <dt>In phase 4
				</dt>
            <dd>
					The grid tracks it spans with a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a>.
			</dd>
          </dl>
          

          <p>Let each item’s <dfn data-dfn-type="dfn" data-noexport="" id="overgrowable-tracks">overgrowable tracks<a class="self-link" href="#overgrowable-tracks"></a></dfn> be:</p>
          

          <dl class="phase">
				
            <dt>In phase 1
				</dt>
            <dd>
					The item’s <a data-link-type="dfn" href="#growable-tracks">growable tracks</a> that also have a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-min-content">min-content</a> or <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a>.
					If there are no such tracks,
					then it’s all the <a data-link-type="dfn" href="#growable-tracks">growable tracks</a>.
				</dd>
            <dt>In phase 2
				</dt>
            <dd>
					The item’s <a data-link-type="dfn" href="#growable-tracks">growable tracks</a> that also have a <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-grid-template-rows-max-content">max-content</a> <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a>.
					If there ar eno such tracks,
					then it’s all the <a data-link-type="dfn" href="#growable-tracks">growable tracks</a>.
				</dd>
            <dt>In phase 3
				</dt>
            <dt>In phase 4
				</dt>
            <dd>
					The item’s <a data-link-type="dfn" href="#growable-tracks">growable tracks</a>.
			</dd>
          </dl>
          

          <p>Let each track’s <dfn data-dfn-type="dfn" data-noexport="" id="growth-delta">growth delta<a class="self-link" href="#growth-delta"></a></dfn> initially be zero.</p>
          

        </li>
        <li>
			<b>Calculate growth deltas.</b>


          <p>For each grid item in the group:</p>
          

          <ol>
				
            <li>
					
              <dl class="phase">
						
                <dt>In phase 1
						</dt>
                <dt>In phase 2
						</dt>
                <dd>
							Let each track’s <dfn data-dfn-type="dfn" data-noexport="" id="hypothetical-size">hypothetical size<a class="self-link" href="#hypothetical-size"></a></dfn>
							be the track’s <a data-link-type="dfn" href="#base-size">base size</a>.
						</dd>
                <dt>In phase 3
						</dt>
                <dt>In phase 4
						</dt>
                <dd>
							Let each track’s <a data-link-type="dfn" href="#hypothetical-size">hypothetical size</a>
							be the track’s <a data-link-type="dfn" href="#growth-limit">growth limit</a> if it’s finite,
							or else the track’s <a data-link-type="dfn" href="#base-size">base size</a> otherwise.
					</dd>
              </dl>
              

            </li>
            <li>
					Distribute the item’s <a data-link-type="dfn" href="#needed-space">needed space</a>
					as evenly as possible among the <a data-link-type="dfn" href="#hypothetical-size">hypothetical sizes</a> of the item’s <a data-link-type="dfn" href="#growable-tracks">growable tracks</a>,
					maxing each out as its <a data-link-type="dfn" href="#hypothetical-size">hypothetical size</a> reaches its <a data-link-type="dfn" href="#growth-limit">growth limit</a>.

					
              <dl class="phase">
						
                <dt>In phase 4
						</dt>
                <dd>
							If the track’s <a data-link-type="dfn" href="#growth-limit">growth limit</a> was changed from infinite to a finite value
							in phase 3,
							treat its <a data-link-type="dfn" href="#growth-limit">growth limit</a> as infinite for the purposes of this step.
					</dd>
              </dl>
              

            </li>
            <li>
					If all <a data-link-type="dfn" href="#growable-tracks">growable tracks</a> reached their <a data-link-type="dfn" href="#growth-limit">growth limit</a> in the previous step
					and there is still <a data-link-type="dfn" href="#needed-space">needed space</a> to distribute,
					distribute the leftover space evenly among the <a data-link-type="dfn" href="#hypothetical-size">hypothetical sizes</a> of the item’s <a data-link-type="dfn" href="#overgrowable-tracks">overgrowable tracks</a>.

				</li>
            <li>
					
              <dl class="phase">
						
                <dt>In phase 1
						</dt>
                <dt>In phase 2
						</dt>
                <dd>
							For each track,
							if the difference between its <a data-link-type="dfn" href="#hypothetical-size">hypothetical size</a> and its <a data-link-type="dfn" href="#base-size">base size</a>
							is greater than its <a data-link-type="dfn" href="#growth-delta">growth delta</a>,
							set its <a data-link-type="dfn" href="#growth-delta">growth delta</a> to that difference.
						</dd>
                <dt>In phase 3
						</dt>
                <dt>In phase 4
						</dt>
                <dd>
							For each track,
							if its <a data-link-type="dfn" href="#growth-limit">growth limit</a> is finite,
							and the difference between its <a data-link-type="dfn" href="#hypothetical-size">hypothetical size</a> and its <a data-link-type="dfn" href="#growth-limit">growth limit</a>
							is greater than its <a data-link-type="dfn" href="#growth-delta">growth delta</a>,
							set its <a data-link-type="dfn" href="#growth-delta">growth delta</a> to that difference.
							Otherwise, if its <a data-link-type="dfn" href="#growth-limit">growth limit</a> is infinite,
							and the difference between its <a data-link-type="dfn" href="#hypothetical-size">hypothetical size</a> and its <a data-link-type="dfn" href="#base-size">base size</a>
							is greater than its <a data-link-type="dfn" href="#growth-delta">growth delta</a>,
							set its <a data-link-type="dfn" href="#growth-delta">growth delta</a> to that difference.
					</dd>
              </dl>
              
			
            </li>
          </ol>
          

        </li>
        <li>
			<b>Adjust each track’s affected size.</b>

			
          <dl class="phase">
				
            <dt>In phase 1
				</dt>
            <dt>In phase 2
				</dt>
            <dd>
					For each track,
					increase its <a data-link-type="dfn" href="#base-size">base size</a> by its <a data-link-type="dfn" href="#growth-delta">growth delta</a>.
				</dd>
            <dt>In phase 3
				</dt>
            <dt>In phase 4
				</dt>
            <dd>
					For each track,
					if its <a data-link-type="dfn" href="#growth-limit">growth limit</a> is finite,
					increase its <a data-link-type="dfn" href="#growth-limit">growth limit</a> by its <a data-link-type="dfn" href="#growth-delta">growth delta</a>.
					Otherwise, if its <a data-link-type="dfn" href="#growth-limit">growth limit</a> is infinite,
					set its <a data-link-type="dfn" href="#growth-limit">growth limit</a>
					to the sum of its <a data-link-type="dfn" href="#base-size">base size</a> and its <a data-link-type="dfn" href="#growth-delta">growth delta</a>.
			</dd>
          </dl>
          
	
        </li>
      </ol>

</main>

    <h2 class="no-ref no-num heading settled" id="conformance"><span class="content">
Conformance</span><a class="self-link" href="#conformance"></a></h2>


    <h3 class="no-ref heading settled" id="conventions"><span class="content">
Document conventions</span><a class="self-link" href="#conventions"></a></h3>

    
    <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words "MUST",
    "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
    "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification.

    </p>
    <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-rfc2119" title="RFC2119">[RFC2119]</a></p>

    
    <p>Examples in this specification are introduced with the words "for example"
    or are set apart from the normative text with <code>class="example"</code>,
    like this:

    </p>
    <div class="example">
        
      <p>This is an example of an informative example.</p>
      
    
    </div>

    
    <p>Informative notes begin with the word "Note" and are set apart from the
    normative text with <code>class="note"</code>, like this:

    </p>
    <p class="note" role="note">Note, this is an informative note.</p>

    
    <p>Advisements are normative sections styled to evoke special attention and are
    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
    this:

    <strong class="advisement">
        UAs MUST provide an accessible alternative.
    </strong>

</p>
    <h3 class="no-ref heading settled" id="conformance-classes"><span class="content">
Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>

    
    <p>Conformance to this specification
    is defined for three conformance classes:
    </p>
    <dl>
        
      <dt>style sheet
            </dt>
      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
            style sheet</a>.
        </dd>
      <dt>renderer
            </dt>
      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
            that interprets the semantics of a style sheet and renders
            documents that use them.
        </dd>
      <dt>authoring tool
            </dt>
      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
            that writes a style sheet.
    </dd>
    </dl>

    
    <p>A style sheet is conformant to this specification
    if all of its statements that use syntax defined in this module are valid
    according to the generic CSS grammar and the individual grammars of each
    feature defined in this module.

    </p>
    <p>A renderer is conformant to this specification
    if, in addition to interpreting the style sheet as defined by the
    appropriate specifications, it supports all the features defined
    by this specification by parsing them correctly
    and rendering the document accordingly. However, the inability of a
    UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not
    required to render color on a monochrome monitor.)

    </p>
    <p>An authoring tool is conformant to this specification
    if it writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in
    this module, and meet all other conformance requirements of style sheets
    as described in this module.

</p>
    <h3 class="no-ref heading settled" id="partial"><span class="content">
Partial implementations</span><a class="self-link" href="#partial"></a></h3>

    
    <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong>
    treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
    as appropriate</a>) any at-rules, properties, property values, keywords,
    and other syntactic constructs for which they have no usable level of
    support. In particular, user agents <strong>must not</strong> selectively
    ignore unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid
    (as unsupported values must be), CSS requires that the entire declaration
    be ignored.</p>


    <h3 class="no-ref heading settled" id="experimental"><span class="content">
Experimental implementations</span><a class="self-link" href="#experimental"></a></h3>

    
    <p>To avoid clashes with future CSS features, the CSS2.1 specification
    reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
    syntax</a> for proprietary and experimental extensions to CSS.

    </p>
    <p>Prior to a specification reaching the Candidate Recommendation stage
    in the W3C process, all implementations of a CSS feature are considered
    experimental. The CSS Working Group recommends that implementations
    use a vendor-prefixed syntax for such features, including those in
    W3C Working Drafts. This avoids incompatibilities with future changes
    in the draft.
    </p>


    <h3 class="no-ref heading settled" id="testing"><span class="content">
Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>

    
    <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they
    can demonstrate to be correctly implemented according to spec.

    </p>
    <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental
    CSS renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before
    releasing an unprefixed implementation of any CSS features. Testcases
    submitted to W3C are subject to review and correction by the CSS
    Working Group.

    </p>
    <p>Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group’s website at
    <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the
    <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
    mailing list.


</p>
    <h2 class="no-num heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
    <h3 class="no-num heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
    <dl>
      <dt id="biblio-css21" title="CSS21"><a class="self-link" href="#biblio-css21"></a>[CSS21]</dt>
      <dd>Bert Bos; et al. <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a></dd>
      <dt id="biblio-css3-align" title="CSS3-ALIGN"><a class="self-link" href="#biblio-css3-align"></a>[CSS3-ALIGN]</dt>
      <dd>Elika J. Etemad; Tab Atkins Jr.. <a href="http://www.w3.org/TR/2013/WD-css3-align-20130514/">CSS Box Alignment Module Level 3</a>. 14 May 2013. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2013/WD-css3-align-20130514/">http://www.w3.org/TR/2013/WD-css3-align-20130514/</a></dd>
      <dt id="biblio-css3-flexbox" title="CSS3-FLEXBOX"><a class="self-link" href="#biblio-css3-flexbox"></a>[CSS3-FLEXBOX]</dt>
      <dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/">CSS Flexible Box Layout Module</a>. 18 September 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/">http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</a></dd>
      <dt id="biblio-css3-writing-modes" title="CSS3-WRITING-MODES"><a class="self-link" href="#biblio-css3-writing-modes"></a>[CSS3-WRITING-MODES]</dt>
      <dd>Elika J. Etemad; Koji Ishii. <a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a></dd>
      <dt id="biblio-css3val" title="CSS3VAL"><a class="self-link" href="#biblio-css3val"></a>[CSS3VAL]</dt>
      <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">CSS Values and Units Module Level 3</a>. 30 July 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">http://www.w3.org/TR/2013/CR-css3-values-20130730/</a></dd>
      <dt id="biblio-css3-break" title="css3-break"><a class="self-link" href="#biblio-css3-break"></a>[css3-break]</dt>
      <dd>Rossen Atanassov; Elika Etemad. <a href="http://www.w3.org/TR/css3-break/">CSS Fragmentation Module Level 3</a>. 16 January 2014. WD. URL: <a href="http://www.w3.org/TR/css3-break/">http://www.w3.org/TR/css3-break/</a></dd>
      <dt id="biblio-css3-sizing" title="css3-sizing"><a class="self-link" href="#biblio-css3-sizing"></a>[css3-sizing]</dt>
      <dd>Tab Atkins Jr.; Elika Etemad. <a href="http://www.w3.org/TR/css3-sizing/">CSS Intrinsic &amp; Extrinsic Sizing Module Level 3</a>. 27 September 2012. WD. URL: <a href="http://www.w3.org/TR/css3-sizing/">http://www.w3.org/TR/css3-sizing/</a></dd>
      <dt id="biblio-rfc2119" title="rfc2119"><a class="self-link" href="#biblio-rfc2119"></a>[rfc2119]</dt>
      <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a></dd>
    </dl>
    <h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
    <ul class="indexlist">
      <li>auto
        <ul>
          <li>value for grid-template-columns, grid-template-rows, <a href="#valdef-grid-template-columns-grid-template-rows-auto" title="section 5.1">5.1</a></li>
          <li>value for repeat(), <a href="#valdef-repeat-auto" title="section 5.1.2">5.1.2</a></li>
          <li>value for &lt;grid-line>, <a href="#grid-placement-auto" title="section 9.2">9.2</a></li>
        </ul>
      </li>
      <li>automatic column position, <a href="#automatic-grid-position" title="section 9">9</a></li>
      <li>automatic column span, <a href="#automatic-grid-span" title="section 9">9</a></li>
      <li>automatic grid position, <a href="#automatic-grid-position" title="section 9">9</a></li>
      <li>automatic grid span, <a href="#automatic-grid-span" title="section 9">9</a></li>
      <li>automatic placement, <a href="#auto-placement" title="section 6.2">6.2</a></li>
      <li>automatic position, <a href="#automatic-grid-position" title="section 9">9</a></li>
      <li>automatic row position, <a href="#automatic-grid-position" title="section 9">9</a></li>
      <li>automatic row span, <a href="#automatic-grid-span" title="section 9">9</a></li>
      <li>automatic span, <a href="#automatic-grid-span" title="section 9">9</a></li>
      <li>auto-placement, <a href="#auto-placement" title="section 6.2">6.2</a></li>
      <li>auto-placement algorithm, <a href="#grid-item-placement-algorithm" title="section 9.5">9.5</a></li>
      <li>auto-placement cursor, <a href="#auto-placement-cursor" title="section 9.5">9.5</a></li>
      <li>base size, <a href="#base-size" title="section 11.3">11.3</a></li>
      <li>column
        <ul>
          <li>definition of, <a href="#grid-column" title="section 2">2</a></li>
          <li>value for grid-auto-flow, <a href="#valdef-grid-auto-flow-column" title="section 6.2">6.2</a></li>
        </ul>
      </li>
      <li>column axis, <a href="#column-axis" title="section 2">2</a></li>
      <li>column position, <a href="#grid-position" title="section 9">9</a></li>
      <li>column span, <a href="#grid-span" title="section 9">9</a></li>
      <li>cursor, <a href="#auto-placement-cursor" title="section 9.5">9.5</a></li>
      <li>&lt;custom-ident>, <a href="#grid-placement-slot" title="section 9.2">9.2</a></li>
      <li>definite column position, <a href="#definite-grid-position" title="section 9">9</a></li>
      <li>definite column span, <a href="#definite-grid-span" title="section 9">9</a></li>
      <li>definite grid position, <a href="#definite-grid-position" title="section 9">9</a></li>
      <li>definite grid span, <a href="#definite-grid-span" title="section 9">9</a></li>
      <li>definite position, <a href="#definite-grid-position" title="section 9">9</a></li>
      <li>definite row position, <a href="#definite-grid-position" title="section 9">9</a></li>
      <li>definite row span, <a href="#definite-grid-span" title="section 9">9</a></li>
      <li>definite span, <a href="#definite-grid-span" title="section 9">9</a></li>
      <li>dense, <a href="#valdef-grid-auto-flow-dense" title="section 6.2">6.2</a></li>
      <li>distribute extra space, <a href="#distribute-extra-space" title="section 11.5">11.5</a></li>
      <li>explicit grid, <a href="#explicit-grid" title="section 5">5</a></li>
      <li>fixed sizing function, <a href="#fixed-sizing-function" title="section 11">11</a></li>
      <li>&lt;flex>
        <ul>
          <li>value for grid-template-columns, grid-template-rows, <a href="#valdef-grid-template-columns-grid-template-rows-flex" title="section 5.1">5.1</a></li>
          <li>(type), <a href="#typedef-flex" title="section 5.1.3">5.1.3</a></li>
        </ul>
      </li>
      <li>flex factor, <a href="#valdef-grid-template-columns-grid-template-rows-flex-factor" title="section 5.1">5.1</a></li>
      <li>flex factor sum, <a href="#flex-factor-sum" title="section 11.7.1">11.7.1</a></li>
      <li>flex fraction, <a href="#flex-fraction" title="section 5.1.3">5.1.3</a></li>
      <li>flexible length, <a href="#flexible-length" title="section 5.1.3">5.1.3</a></li>
      <li>flexible sizing function, <a href="#flexible-sizing-function" title="section 11">11</a></li>
      <li>free space, <a href="#free-space" title="section 11.2">11.2</a></li>
      <li>grid
        <ul>
          <li>definition of, <a href="#grid" title="section 2">2</a></li>
          <li>value for display, <a href="#valdef-display-grid" title="section 3.1">3.1</a></li>
          <li>(property), <a href="#propdef-grid" title="section 7">7</a></li>
        </ul>
      </li>
      <li>grid-area, <a href="#propdef-grid-area" title="section 9.3">9.3</a></li>
      <li>grid area, <a href="#grid-area" title="section 2.3">2.3</a></li>
      <li>grid-auto-columns, <a href="#propdef-grid-auto-columns" title="section 6.1">6.1</a></li>
      <li>grid-auto-flow, <a href="#propdef-grid-auto-flow" title="section 6.2">6.2</a></li>
      <li>grid-auto-rows, <a href="#propdef-grid-auto-rows" title="section 6.1">6.1</a></li>
      <li>grid cell, <a href="#grid-cell" title="section 2.1">2.1</a></li>
      <li>grid column, <a href="#grid-column" title="section 2">2</a></li>
      <li>grid-column, <a href="#propdef-grid-column" title="section 9.3">9.3</a></li>
      <li>grid-column-end, <a href="#propdef-grid-column-end" title="section 9.2">9.2</a></li>
      <li>grid column line, <a href="#grid-line" title="section 2.2">2.2</a></li>
      <li>grid-column-start, <a href="#propdef-grid-column-start" title="section 9.2">9.2</a></li>
      <li>grid container, <a href="#grid-container" title="section 3.1">3.1</a></li>
      <li>grid formatting context, <a href="#grid-formatting-context" title="section 3.1">3.1</a></li>
      <li>grid item, <a href="#grid-item" title="section 4">4</a></li>
      <li>grid item placement algorithm, <a href="#grid-item-placement-algorithm" title="section 9.5">9.5</a></li>
      <li>grid layout, <a href="#grid-layout" title="section 2">2</a></li>
      <li>grid line, <a href="#grid-line" title="section 2.2">2.2</a></li>
      <li>&lt;grid-line>, <a href="#typedef-grid-line" title="section 9.2">9.2</a></li>
      <li>grid placement, <a href="#grid-placement" title="section 9">9</a></li>
      <li>grid-placement property, <a href="#grid-placement-property" title="section 9">9</a></li>
      <li>grid position, <a href="#grid-position" title="section 9">9</a></li>
      <li>grid row, <a href="#grid-row" title="section 2">2</a></li>
      <li>grid-row, <a href="#propdef-grid-row" title="section 9.3">9.3</a></li>
      <li>grid-row-end, <a href="#propdef-grid-row-end" title="section 9.2">9.2</a></li>
      <li>grid row line, <a href="#grid-line" title="section 2.2">2.2</a></li>
      <li>grid-row-start, <a href="#propdef-grid-row-start" title="section 9.2">9.2</a></li>
      <li>grid sizing algorithm, <a href="#grid-sizing-algorithm" title="section 11">11</a></li>
      <li>grid span, <a href="#grid-span" title="section 9">9</a></li>
      <li>grid-template, <a href="#propdef-grid-template" title="section 5.3">5.3</a></li>
      <li>grid-template-areas, <a href="#propdef-grid-template-areas" title="section 5.2">5.2</a></li>
      <li>grid-template-columns, <a href="#propdef-grid-template-columns" title="section 5.1">5.1</a></li>
      <li>&lt;‘grid-template-columns’> / &lt;‘grid-template-rows’>, <a href="#grid-template-rowcol" title="section 5.3">5.3</a></li>
      <li>grid-template-rows, <a href="#propdef-grid-template-rows" title="section 5.1">5.1</a></li>
      <li>Grid track, <a href="#grid-track" title="section 2.1">2.1</a></li>
      <li>growable tracks, <a href="#growable-tracks" title="section Unnumbered section">Unnumbered section</a></li>
      <li>growth delta, <a href="#growth-delta" title="section Unnumbered section">Unnumbered section</a></li>
      <li>growth limit, <a href="#growth-limit" title="section 11.3">11.3</a></li>
      <li>hypothetical fr size, <a href="#hypothetical-fr-size" title="section 11.7.1">11.7.1</a></li>
      <li>hypothetical size, <a href="#hypothetical-size" title="section Unnumbered section">Unnumbered section</a></li>
      <li>implicit grid, <a href="#implicit-grid" title="section 6">6</a></li>
      <li>implicit grid column, <a href="#implicit-grid-track" title="section 6.1">6.1</a></li>
      <li>implicit grid row, <a href="#implicit-grid-track" title="section 6.1">6.1</a></li>
      <li>implicit grid track, <a href="#implicit-grid-track" title="section 6.1">6.1</a></li>
      <li>implicit named area, <a href="#implicit-named-area" title="section 5.2.2">5.2.2</a></li>
      <li>implicit named line, <a href="#implicit-named-line" title="section 5.2.1">5.2.1</a></li>
      <li>infinitely growable, <a href="#infinitely-growable" title="section 11.5">11.5</a></li>
      <li>inline-grid, <a href="#valdef-display-inline-grid" title="section 3.1">3.1</a></li>
      <li>&lt;integer> &amp;&amp; &lt;custom-ident>?, <a href="#grid-placement-int" title="section 9.2">9.2</a></li>
      <li>intrinsic sizing function, <a href="#intrinsic-sizing-function" title="section 11">11</a></li>
      <li>leftover space, <a href="#leftover-space" title="section 11.7.1">11.7.1</a></li>
      <li>&lt;length>, <a href="#valdef-grid-template-columns-grid-template-rows-length" title="section 5.1">5.1</a></li>
      <li>&lt;line-name-list>, <a href="#typedef-line-name-list" title="section 5.1">5.1</a></li>
      <li>&lt;line-names>, <a href="#typedef-line-names" title="section 5.1">5.1</a></li>
      <li>max-content, <a href="#valdef-grid-template-columns-grid-template-rows-max-content" title="section 5.1">5.1</a></li>
      <li>max track sizing function, <a href="#max-track-sizing-function" title="section 11.2">11.2</a></li>
      <li>min-content, <a href="#valdef-grid-template-columns-grid-template-rows-min-content" title="section 5.1">5.1</a></li>
      <li>minmax(), <a href="#valdef-grid-template-columns-grid-template-rows-minmax" title="section 5.1">5.1</a></li>
      <li>min track sizing function, <a href="#min-track-sizing-function" title="section 11.2">11.2</a></li>
      <li>named cell token, <a href="#named-cell-token" title="section 5.2">5.2</a></li>
      <li>named grid area, <a href="#named-grid-area" title="section 5.2">5.2</a></li>
      <li>named line, <a href="#named-line" title="section 5.1.1">5.1.1</a></li>
      <li>needed space, <a href="#needed-space" title="section Unnumbered section">Unnumbered section</a></li>
      <li>none
        <ul>
          <li>value for grid-template-rows, grid-template-columns, <a href="#valdef-grid-template-rows-grid-template-columns-none" title="section 5.1">5.1</a></li>
          <li>value for grid-template-areas, <a href="#valdef-grid-template-areas-none" title="section 5.2">5.2</a></li>
          <li>value for grid-template, <a href="#valdef-grid-template-none" title="section 5.3">5.3</a></li>
        </ul>
      </li>
      <li>null cell token, <a href="#null-cell-token" title="section 5.2">5.2</a></li>
      <li>occupied, <a href="#occupied" title="section 9.5">9.5</a></li>
      <li>order-modified grid order, <a href="#order-modified-grid-order" title="section 10.5">10.5</a></li>
      <li>overgrowable tracks, <a href="#overgrowable-tracks" title="section Unnumbered section">Unnumbered section</a></li>
      <li>participates in baseline alignment, <a href="#baseline-participation" title="section 10.5">10.5</a></li>
      <li>&lt;percentage>, <a href="#valdef-grid-template-columns-grid-template-rows-percentage" title="section 5.1">5.1</a></li>
      <li>placement, <a href="#grid-placement" title="section 9">9</a></li>
      <li>position, <a href="#grid-position" title="section 9">9</a></li>
      <li>repeat(), <a href="#funcdef-repeat" title="section 5.1.2">5.1.2</a></li>
      <li>row
        <ul>
          <li>definition of, <a href="#grid-row" title="section 2">2</a></li>
          <li>value for grid-auto-flow, <a href="#valdef-grid-auto-flow-row" title="section 6.2">6.2</a></li>
        </ul>
      </li>
      <li>row axis, <a href="#row-axis" title="section 2">2</a></li>
      <li>row position, <a href="#grid-position" title="section 9">9</a></li>
      <li>row span, <a href="#grid-span" title="section 9">9</a></li>
      <li>sizing function, <a href="#track-sizing-function" title="section 5.1">5.1</a></li>
      <li>space to fill, <a href="#space-to-fill" title="section 11.7.1">11.7.1</a></li>
      <li>span, <a href="#grid-span" title="section 9">9</a></li>
      <li>span count, <a href="#span-count" title="section 11.2">11.2</a></li>
      <li>span &amp;&amp; [ &lt;integer> || &lt;custom-ident> ], <a href="#grid-placement-span-int" title="section 9.2">9.2</a></li>
      <li>&lt;string>+, <a href="#valdef-grid-template-areas-string" title="section 5.2">5.2</a></li>
      <li>subgrid
        <ul>
          <li>value for grid-template-rows, grid-template-columns, <a href="#valdef-grid-template-rows-grid-template-columns-subgrid" title="section 5.1">5.1</a></li>
          <li>definition of, <a href="#subgrid" title="section 5.1.4">5.1.4</a></li>
          <li>value for grid-template, <a href="#valdef-grid-template-subgrid" title="section 5.3">5.3</a></li>
        </ul>
      </li>
      <li>&lt;track-breadth>, <a href="#typedef-track-breadth" title="section 5.1">5.1</a></li>
      <li>&lt;track-list>, <a href="#typedef-track-list" title="section 5.1">5.1</a></li>
      <li>track list, <a href="#track-list" title="section 5.1">5.1</a></li>
      <li>[ &lt;track-list> / ]? [ &lt;line-names>? &lt;string> &lt;track-size>? &lt;line-names>? ]+, <a href="#grid-template-ascii" title="section 5.3">5.3</a></li>
      <li>&lt;track-size>, <a href="#typedef-track-size" title="section 5.1">5.1</a></li>
      <li>track sizing algorithm, <a href="#track-sizing-algorithm" title="section 11.3">11.3</a></li>
      <li>track sizing function, <a href="#track-sizing-function" title="section 5.1">5.1</a></li>
      <li>trash token, <a href="#trash-token" title="section 5.2">5.2</a></li>
      <li>unoccupied, <a href="#unoccupied" title="section 9.5">9.5</a></li>
    </ul>
    <h2 class="no-num heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
    <table class="proptable data">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Value</th>
          <th scope="col">Initial</th>
          <th scope="col">Applies to</th>
          <th scope="col">Inh.</th>
          <th scope="col">%ages</th>
          <th scope="col">Media</th>
          <th scope="col">Animatable</th>
          <th scope="col">Computed value</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-template-columns">grid-template-columns</a></th>
          <td>none | &lt;track-list> | subgrid &lt;line-name-list>?</td>
          <td>none</td>
          <td>grid containers</td>
          <td>no</td>
          <td>refer to corresponding dimension of the content area</td>
          <td>visual</td>
          <td>no</td>
          <td>As specified, except for auto (see prose), with lengths made absolute</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-template-rows">grid-template-rows</a></th>
          <td>none | &lt;track-list> | subgrid &lt;line-name-list>?</td>
          <td>none</td>
          <td>grid containers</td>
          <td>no</td>
          <td>refer to corresponding dimension of the content area</td>
          <td>visual</td>
          <td>no</td>
          <td>As specified, except for auto (see prose), with lengths made absolute</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-template-areas">grid-template-areas</a></th>
          <td>none | &lt;string>+</td>
          <td>none</td>
          <td>grid containers</td>
          <td>no</td>
          <td>n/a</td>
          <td>visual</td>
          <td>no</td>
          <td>specified value</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-template">grid-template</a></th>
          <td>none | subgrid | &lt;‘grid-template-columns’> / &lt;‘grid-template-rows’> | [ &lt;track-list> / ]? [ &lt;line-names>? &lt;string> &lt;track-size>? &lt;line-names>? ]+</td>
          <td>see individual properties</td>
          <td>grid containers</td>
          <td>see individual properties</td>
          <td>see individual properties</td>
          <td>visual</td>
          <td>no</td>
          <td>see individual properties</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-auto-columns">grid-auto-columns</a></th>
          <td>&lt;track-size></td>
          <td>auto</td>
          <td>grid containers</td>
          <td>no</td>
          <td>see Track Sizing</td>
          <td>visual</td>
          <td>no</td>
          <td>see Track Sizing</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-auto-rows">grid-auto-rows</a></th>
          <td>&lt;track-size></td>
          <td>auto</td>
          <td>grid containers</td>
          <td>no</td>
          <td>see Track Sizing</td>
          <td>visual</td>
          <td>no</td>
          <td>see Track Sizing</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-auto-flow">grid-auto-flow</a></th>
          <td>[ row | column ] || dense</td>
          <td>row</td>
          <td>grid containers</td>
          <td>no</td>
          <td>n/a</td>
          <td>visual</td>
          <td>no</td>
          <td>specified value</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid">grid</a></th>
          <td>&lt;‘grid-template’> | [ &lt;‘grid-auto-flow’> [ &lt;‘grid-auto-columns’> [ / &lt;‘grid-auto-rows’> ]? ]? ]</td>
          <td>see individual properties</td>
          <td>grid containers</td>
          <td>see individual properties</td>
          <td>see individual properties</td>
          <td>visual</td>
          <td>no</td>
          <td>see individual properties</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-row-start">grid-row-start</a></th>
          <td>&lt;grid-line></td>
          <td>auto</td>
          <td>grid items and absolutely-positioned boxes whose containing block is a grid container</td>
          <td>no</td>
          <td>n/a</td>
          <td>visual</td>
          <td>no</td>
          <td>specified value</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-column-start">grid-column-start</a></th>
          <td>&lt;grid-line></td>
          <td>auto</td>
          <td>grid items and absolutely-positioned boxes whose containing block is a grid container</td>
          <td>no</td>
          <td>n/a</td>
          <td>visual</td>
          <td>no</td>
          <td>specified value</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-row-end">grid-row-end</a></th>
          <td>&lt;grid-line></td>
          <td>auto</td>
          <td>grid items and absolutely-positioned boxes whose containing block is a grid container</td>
          <td>no</td>
          <td>n/a</td>
          <td>visual</td>
          <td>no</td>
          <td>specified value</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-column-end">grid-column-end</a></th>
          <td>&lt;grid-line></td>
          <td>auto</td>
          <td>grid items and absolutely-positioned boxes whose containing block is a grid container</td>
          <td>no</td>
          <td>n/a</td>
          <td>visual</td>
          <td>no</td>
          <td>specified value</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-row">grid-row</a></th>
          <td>&lt;grid-line> [ / &lt;grid-line> ]?</td>
          <td>see individual properties</td>
          <td>grid items and absolutely-positioned boxes whose containing block is a grid container</td>
          <td>see individual properties</td>
          <td>see individual properties</td>
          <td>visual</td>
          <td>no</td>
          <td>see individual properties</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-column">grid-column</a></th>
          <td>&lt;grid-line> [ / &lt;grid-line> ]?</td>
          <td>see individual properties</td>
          <td>grid items and absolutely-positioned boxes whose containing block is a grid container</td>
          <td>see individual properties</td>
          <td>see individual properties</td>
          <td>visual</td>
          <td>no</td>
          <td>see individual properties</td>
        </tr>
        <tr>
          <th scope="row"><a class="css" data-link-type="property" href="#propdef-grid-area">grid-area</a></th>
          <td>&lt;grid-line> [ / &lt;grid-line> ]{0,3}</td>
          <td>see individual properties</td>
          <td>grid items and absolutely-positioned boxes whose containing block is a grid container</td>
          <td>see individual properties</td>
          <td>see individual properties</td>
          <td>visual</td>
          <td>no</td>
          <td>see individual properties</td>
        </tr>
      </tbody>
    </table>
    <h2 class="no-num heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
    <div style="counter-reset:issue">
      <div class="issue">The block layout spec should define this?<a href="#issue-839d056f"> ↵ </a></div>
      <div class="issue">Review implications of intrinsic ratio and Grid’s 2D nature.<a href="#issue-1779cb08"> ↵ </a></div>
      <div 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:www-style@w3.org?Subject=%5Bcss-grid%5D%20Collapsing%20Grid%20Tracks">post them to www-style@w3.org</a>.

<a href="#issue-8f83c1bc"> ↵ </a></div>
      <div class="issue">
			TODO: EXAMPLE HERE
	<a href="#issue-1383de0a"> ↵ </a></div>
      <div class="issue">
			TODO: provide example
	<a href="#issue-3a8dda12"> ↵ </a></div>
      <div class="issue">Is one cycle enough?<a href="#issue-4f54519f"> ↵ </a></div>
      <div class="issue">This seems correct, but should be checked because it wasn’t in the original algorithm.<a href="#issue-b256823c"> ↵ </a></div>
    </div></body>
</html>