Overview.bs

<pre class='metadata'>
Title: CSS Grid Layout Module Level 2
Shortname: css-grid
Level: 2
Status: ED
Group: csswg
Work Status: exploring
TR: https://www.w3.org/TR/css-grid-2/
ED: https://drafts.csswg.org/css-grid-2/
Previous version: https://www.w3.org/TR/2018/WD-css-grid-2-20180206/
Editor: Tab Atkins Jr., Google, http://www.xanthir.com/contact/, w3cid 42199
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885
Abstract: This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Level 2 expands Grid by adding “subgrid” capabilities for nested grids to participate in the sizing of their parent grids; and aspect-ratio&ndash;controlled gutters.
</pre>

Introduction {#intro}
=====================

	This level is currently maintained as a diff spec over the level 1 module [[!CSS-GRID-1]].
	The main addition to Level 1 is the “subgrid” feature:
	a subgridded axis is one which matches up its grid lines
	to lines in the element's parent's grid,
	and which derives the sizes of its tracks
	through this integration with the parent grid.
	In general, the behavior of subgrids are the same in both proposals:
	it is only a question of whether a single-axis subgrid is possible.

	Issue: The full text of the Grid specification will be folded in when this draft reaches CR.

<!--
 ██████  ██     ██ ████████   ██████   ████████  ████ ████████
██    ██ ██     ██ ██     ██ ██    ██  ██     ██  ██  ██     ██
██       ██     ██ ██     ██ ██        ██     ██  ██  ██     ██
 ██████  ██     ██ ████████  ██   ████ ████████   ██  ██     ██
      ██ ██     ██ ██     ██ ██    ██  ██   ██    ██  ██     ██
██    ██ ██     ██ ██     ██ ██    ██  ██    ██   ██  ██     ██
 ██████   ███████  ████████   ██████   ██     ██ ████ ████████
-->

<h2 id="subgrids">
Subgrids</h2>

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

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

	<div class="example">
		For example, suppose we have a form consisting of a list of inputs with labels:

		<pre class="lang-html">
			&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>

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

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

<h3 id="subgrid-per-axis">
Establishing a Subgrid: Per-Axis Proposal</h3>

	<a>Subgrids</a> provide the ability to pass grid parameters down through nested elements,
	and content-based sizing information back up to their parent grid.

	<pre class="propdef">
	Name: grid-template-rows, grid-template-columns
	New values: subgrid <<line-name-list>>?
	</pre>

	<dl dfn-for="grid-template-rows, grid-template-columns" dfn-type=value>
		<dt><dfn id="subgrid-listing">subgrid <<line-name-list>>?</dfn>
		<dd>
			The <dfn value for="grid-template-rows, grid-template-columns">subgrid</dfn> value
			indicates that the grid will adopt the spanned portion of its parent grid in that axis.
			Rather than being specified explicitly,
			the sizes of the grid rows/columns
			will be taken from the parent grid's definition.

			The <<line-name-list>> argument allows local naming of the grid lines propagated from the parent grid:
			if a <<line-name-list>> is given,
			the specified <<line-names>>s are assigned to the subgrid’s <a>explicit grid lines</a>,
			one per line, starting with line 1.
			Excess <<line-names>> are ignored.

			If there is no parent grid,
			this value is equivalent to
			the initial value, ''grid-template-rows/none''.
	</dl>

	The syntax of <<line-name-list>> is defined as follows:

	<pre class="prod">
		<dfn>&lt;line-name-list></dfn> = [ <<line-names>> | <<name-repeat>> ]+
		<dfn>&lt;line-names></dfn>     = '[' <<custom-ident>>* ']'
		<dfn>&lt;name-repeat></dfn>    = repeat( [ <positive-integer> | auto-fill ], <line-names>+)
	</pre>

	The <<name-repeat>> variant of the ''repeat()'' notation
	<!-- is for adding line names to <a href="#subgrids">subgrids</a> and -->
	can only be used with the ''grid-template-rows/subgrid'' keyword:
	it only repeats names.
	The ''auto-fill'' keyword is only valid once per <<line-name-list>>,
	and repeats enough times for the name list to match the subgrid’s specified <a>grid span</a>
	(falling back to 0 if the span is already fulfilled).

<h3 id="subgrid-items">
Characteristics of a Subgrid Item</h3>

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

	<ul style="list-style-type: lower-alpha">
		<li>
			The number of explicit tracks in each subgridded dimension
			is given by its <a>grid span</a> in that dimension,
			rather than by 'grid-template-rows'/'grid-template-columns'.
			The track sizes are governed by the parent grid.

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

		<li>
			Since <a>subgrids</a> can be placed before their contents are placed,
			the subgridded lines
			automatically receive the line names
			specified on the corresponding lines of the parent <a>grid</a>.
			These names are in <em>addition</em> to
			any line names specified locally on the subgrid.

		<li>
			The <a>subgrid</a> itself lays out as an ordinary <a>grid item</a> in its parent grid,
			but acts as if it was completely empty for sizing purposes
			in the subgridded dimension.

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

			<div class="example">
				For example, if we have a 3&times;3 grid with the following tracks:

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

				If a subgrid covers the last two tracks,
				its first two columns correspond to the parent grid's last two columns,
				and any items positioned into those tracks participate in sizing the parent grid.
				Specifically, an item positioned in the first track of the subgrid
				influences the auto-sizing of the parent grid's middle track.

				<pre>
					#subgrid { grid-column: 2 / span 2; } /* cover parent's 2nd and 3rd tracks */
					#subgrid > :first-child { grid-column: 1; } /* subgrid's 1st track, parent grid's 2nd track */
				</pre>

				If the subgrid has margins/borders/padding,
				the size of those margins/borders/padding also influences sizing.
				For example, if the subgrid has 100px padding:

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

				Then a <a>grid item</a> in the <a>subgrid's</a> first track
				acts as if it has an additional ''100px'' of top, left, and bottom margin,
				influencing the sizing of the parent grid's tracks
				and the <a>grid item's</a> own position.
			</div>

		<li>
			The 'gap' properties do not apply
			in the subgridded dimension(s).
			(Their items are instead spaced by the corresponding gutters of their parent grid,
			since they are laid out in the parent grid.)

			ISSUE: See <a href="https://github.com/w3c/csswg-drafts/issues/2285">issue 2285</a>
			for discussion about customizing gaps within the subgrid.

		<li>
			The <a>subgrid</a> does not have any <a>implicit grid tracks</a>
			in the subgridded dimension(s);
			every <a>grid area</a> within it is <a>clamped</a> to its <a>explicit grid</a>.

			<div class="example">
				For example, if a ''span 1'' subgrid has a <a>grid item</a> with ''grid-column: 2 / span 3;'',
				then that item is instead forced into (and limited to) the first (only) track in the subgrid.
			</div>

		<li>
			The <a>subgrid</a> is always stretched in its subgridded dimension(s:
			the 'align-self'/'justify-self' properties on it are ignored,
			as are any specified width/height constraints.

		<li>
			Layoutwise, the <a>subgrid</a>’s <a>grid</a>
			is always aligned with the corresponding section of the parent <a>grid</a>;
			the 'align-content'/'justify-content' properties on it are also ignored
			in the subgridded dimension.

		<li>
			The 'overflow' property does apply to <a>subgrids</a>,
			so that overflowing contents of the subgrid can be scrolled into view.
			(Note: the act of scrolling does not affect layout.)
	</ul>

<h3 id="subgrid-sizing">
Subgrid Sizing Algorithm</h3>

	Note: Placement of all grid items,
	including subgrids and their sub-items,
	occurs before sizing.

	Track sizing in a subgridded dimension
	treats each item in a given track in that axis
	as members of the parent grid.
	This interlacing requires that grid sizing
	drills down per axis into subgrids,
	rather than completing both axes in its recursion.
	Thus the <a href="https://www.w3.org/TR/css-grid-1/#algo-overview">Grid Sizing Algorithm</a>
	is modified as follows:

	<blockquote>

	<ol>
		<li>
			First, the <a>track sizing algorithm</a> is used to resolve the sizes of the <a>grid columns</a>.

			In this process,
			any <a>grid item</a> which is subgridded
			in the <a>grid container</a>’s <a>inline axis</a>
			is treated as empty
			and its <a>grid items</a> (the grandchildren)
			are treated as direct children of the <a>grid container</a> (their grandparent).
			This introspection is recursive.

			Items which are subgridded only in the <a>block axis</a>,
			and whose <a>grid container</a> size in the <a>inline axis</a>
			depends on the size of its contents
			are also introspected:
			since the size of the item in this dimension
			can be dependent on the sizing of its subgridded tracks in the other,
			the size contribution of any such item to this grid’s column sizing
			(see <a href="https://www.w3.org/TR/css-grid-1/#algo-content">Resolve Intrinsic Track Sizes</a>)
			is taken under the provision
			of having determined its track sizing only up to the same point
			in the Grid Sizing Algorithm as this parent grid itself.
			E.g. for the first pass through this step,
			the item will have its tracks sized only through this first step;
			if a second pass of this step is triggered then
			the item will have completed a first pass through steps 1-3
			as well as the second pass of this step
			prior to returning its size for consideration in this grid’s column sizing.
			Again, this introspection is recursive.

			If calculating the layout of a <a>grid item</a> in this step
			depends on the <a>available space</a> in the <a>block axis</a>,
			assume the <a>available space</a> that it would have
			if any row with a <a>definite</a> <a>max track sizing function</a>
			had that size and all other rows were infinite.

		<li>
			Next, the <a>track sizing algorithm</a> resolves the sizes of the <a>grid rows</a>,
			using the <a>grid column</a> sizes calculated in the previous step.

			In this process,
			any <a>grid item</a> which is subgridded
			in the <a>grid container</a>’s <a>block axis</a>
			is treated as empty
			and its <a>grid items</a> (the grandchildren)
			are treated as direct children of the <a>grid container</a> (their grandparent).
			This introspection is recursive.

			As with sizing columns,
			items which are subgridded only in the <a>inline axis</a>,
			and whose <a>grid container</a> size in the <a>block axis</a>
			depends on the size of its contents
			are also introspected.
			(As with sizing columns,
			the size contribution to this grid’s row sizing
			is taken under the provision
			of having determined its track sizing
			only up to this corresponding point in the algorithm;
			and again, this introspection is recursive.)

		<li>
			Then, if the <a>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>min-content contribution</a>
			and <a>max-content contribution</a> (once only).

			<div class="note">
				This cycle is necessary for cases where the <a>inline size</a> of a <a>grid item</a>
				depends on the <a>block size</a> of its <a>grid area</a>.
				Examples include wrapped column <a>flex containers</a> (''flex-flow: column wrap''),
				<a>orthogonal flows</a> ('writing-mode'),
				and <a spec=css-multicol>multi-column elements</a>.
			</div>

		<li>
			Finally, the <a>grid container</a> is sized
			using the resulting size of the <a>grid</a> as its content size,
			and the tracks are aligned within the <a>grid container</a>
			according to the 'align-content' and 'justify-content' properties.

			Note: This can introduce extra space between tracks,
			potentially enlarging the grid area of any grid items spanning the gaps
			beyond the space allotted to during track sizing.
	</ol>

	Once the size of each <a>grid area</a> is thus established,
	the <a>grid items</a> are laid out into their respective containing blocks.
	The <a>grid area’s</a> width and height are considered <a>definite</a> for this purpose.

	Note: Since formulas calculated using only definite sizes,
	such as the <a>stretch fit</a> formula,
	are also definite,
	the size of a grid item which is stretched
	is also considered definite.

	</blockquote>

	Issue: Note, this means that a subgrid establishing an orthogonal flow
	would have the order of its track sizing inverted compared to a nested grid.
	We could simplify this by saying that an orthogonal flow
	cannot establish a subgrid; it can only be a nested grid.

	<div class="example">
		The following example illustrates how per-axis subgrids are sized:

		Suppose we have a parent grid container <var>A</var>
		which contains an item <var>B</var> that has subgridded columns
		and contains a grandchild <var>B</var> that has subgridded rows
		and grandchild <var>D</var> that is simply a nested grid.

		<xmp>
			<grid-A>
				<grid-B subgrid=columns>
					<grid-C subgrid=rows/>
					<grid-D>
				</grid-B>
			<grid-A>
		</xmp>

		When <var>A</var> sizes its columns
		it treats <var>B</var>'s items
		as slotted into to <var>A</var>'s corresponding columns,
		but when <var>A</var> sizes its rows
		it treates <var>B</var> as a single item
		(a grid container with its own rows and some items including items <var>C</var> and <var>D</var>).
		Similarly when <var>B</var> sizes its rows,
		it treats <var>C</var>'s items as slotted into <var>B</var>'s rows,
		but when <var>B</var> sizes its columns,
		it treats <var>C</var> as a single item,
		just as it does with <var>D</var>.
		There is no relationship between <var>C</var>'s rows and <var>A</var>'s rows,
		because the rows in <var>B</var> are nested, not subgridded.

		At a high level, the grid algorithm is:

		<ol>
			<li>Size the columns
			<li>Size the rows
			<li>Adjust the columns (if needed based on final row sizes)
		</ol>

		The grid sizing algorithm in this example would thus look like this:
		<ol>
			<li>
				<strong>Resolve sizes of <var>A</var>’s grid columns,
				using the sizes of <var>A</var>’s grid items,
				treating <var>B</var> as empty
				but treating its children
				(including <var>C</var> and <var>D</var>)
				as items in grid <var>A</var>.</strong>

				The grid algorithm simply recurses into <var>D</var>.
				For <var>C</var>, it's more complicated:

				<ol>
					<li>Size <var>C</var>'s columns.
					<li>Size <var>C</var>'s rows by sizing <var>B</var>'s rows.
					<li>Adjust <var>C</var>'s columns.
					<li>Return <var>C</var>'s final column sizes.
				</ol>

				A correct size for <var>B</var>'s rows
				requires <var>C</var>'s final column sizes,
				because the row size depends on the column size,
				and thus <var>B</var>'s rows could very well depend
				on <var>C</var>'s final column sizes.
				To break this cyclic dependency,
				we need to split the algorithm to depend on
				the initial approximation of <var>C</var>'s final column sizes,
				and do the adjustment pass later.
				So for <var>C</var>, we need to recurse into column sizing only,
				and pass that initial size up to <var>A</var>
				for its initial column sizing.

				When we size <var>B</var>'s rows later on,
				we will size <var>C</var>'s rows (which are subgridded),
				and finish up <var>C</var>'s sizing by finalizing its columns.
				If this resulted in a change, we have the opportunity
				to trigger an adjustment pass for <var>A</var>'s columns
				during its adjustment pass.

			<li>
				<strong>Next, resolve sizes of <var>A</var>'s rows,
				using the sizes of <var>A</var>’s grid items,
				treating <var>B</var> as a single item.</strong>

				Since <var>B</var>, as a subgrid,
				has its sizing is split out into the multiple passes,
				the grid algorithm issues only a row-sizing recursion into <var>B</var>:
				Size <var>B</var>’s rows, treating D as a single item, requesting its final size,
				and treating <var>C</var> as an empty item
				and hoisting its children as items into grid <var>B</var>.

				<var>B</var> returns its final row size,
				which factors into <var>A</var>’s row sizing pass.

			<li>
				<strong>Last, finalize <var>A</var>’s column sizes.</strong>
				If <var>C</var>’s final size changes
				as a result of the row-sizing pass through <var>B</var>,
				this should trigger a resizing of <var>B</var>’s columns,
				which should trigger a resizing pass on <var>A</var>’s column.
		</ol>
	</div>

<h2 id=alignment>
Aspect-ratio&ndash;controlled Gutters</h2>

	Issue: There's a desire for having row and column gaps maintain a particular aspect ratio.
	This is one proposal for doing so; other ideas are welcome.
	See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/1116">Issue 1116</a>.
	Note this feature is likely to move to css-align-4,
	it is just being drafted up here while css-align-3 stabilizes.

	<pre class="propdef">
	Name: align-content, justify-content
	New values: [ <<aspect-ratio>> <<content-distribution>>? ]
	</pre>


	<dl dfn-for="align-content,justify-content" dfn-type=value>
		<dt><dfn>&lt;aspect-ratio></dfn>
		<dd>
			A <a spec="css-values">dimension</a> with the unit ''ar'',
			representing a multiplier against the analogous quantity
			in the other dimension.
			If that quantity cannot be determined
			(e.g. is itself specified as a <<aspect-ratio>>, or otherwise can't be referenced),
			then it is assumed to be zero.

			Note: This value can expand gutters
			even when there is no free space left,
			causing overflow.

			Specifically, an 'align-content' value of ''1ar'' represents
			the amount of space (which may be zero) allocated between two adjacent
			<a>alignment subjects</a> (<a>grid tracks</a> / <a>flex lines</a> / <a spec="css-multicol">column boxes</a>)
			by the 'justify-content' property.
			Unless a different <<content-distribution>> value is specified,
			space is distributed according to the same <<content-distribution>> rules
			as for 'justify-content'.
			The behavior of <<number>> values for 'justify-content' is analogous.

			Note: The space allocated by ''align-content: 1ar'' will be zero
			if 'justify-content' does not allocate space
			between adjacent <a>alignment subjects</a>:
			either due to not having a <<content-distribution>> value
			or due to there being fewer than two <a>alignment subjects</a>.

			If both 'align-content' and 'justify-content' have <<number>> values,
			then 'justify-content'’s <<number>> value is ignored
			and its <<content-distribution>> value honored as if specified alone.
			If no <<content-distribution>> value was specified,
			then 'justify-content' takes 'align-content'’s <<content-distribution>> value
			(if one was specified)
			and otherwise falls back to ''space-between''.
	</dl>

	<div class="example">
		In this example,
		a minimum of 1em is required between rows and columns.
		Additionally, any extra space in the inline axis
		that is distributed between columns,
		with full-size spaces on either side of the outermost columns.
		The gaps between rows are increased to match the extra space
		distributed between adjacent columns,
		but no space is added before the first row or after the last one.

		<pre>
			.grid {
				grid-template-columns: repeat(auto-fill, 15em);
				gap: 1em;
				justify-content: space-evenly;
				align-content: 1ar space-between;
			}
		</pre>

		This next example is the same as the previous,
		except that the ratio between row and column gaps is &phi;:

		<pre>
			.grid {
				grid-template-columns: repeat(auto-fill, 15em);
				gap: 1em 1.618em;
				justify-content: space-evenly;
				align-content: 0.618ar space-between;
			}
		</pre>
	</div>