Title: CSS Grid Layout Module Level 2
Shortname: css-grid
Level: 2
Status: UD
Group: csswg
Work Status: exploring
ED: https://drafts.csswg.org/css-grid-2/
Editor: Tab Atkins Jr., Google, http://www.xanthir.com/contact/
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com
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.

Grid Containers

Establishing Grid Containers: the ''subgrid'' 'display' value

	Name: display
	New values: subgrid
	

subgrid

If the element is a grid item (i.e. it is in-flow and its parent is a grid container), this value makes the element a subgrid (which is a special type of grid container box, see [[#subgrids]]) and consequently ignores its 'grid-template-*' and 'grid-*-gap' properties in favor of adopting the parent grid tracks that it spans. Otherwise, it behaves as ''grid''.

Subgrids

			<ul>
				<li><label>Name:</label> <input name=fn>
				<li><label>Address:</label> <input name=address>
				<li><label>Phone:</label> <input name=phone>
			</ul>
		

			ul {
				display: grid;
				grid: auto-flow / auto 1fr;
			}
			li {
				display: subgrid;
				grid-column: span 2;
				margin: 0.5em;
				border: solid;
				padding: 0.5em;
			}
			label {
				grid-column: 1;
			}
			input {
				grid-column: 2;
			}
		

• The number of explicit tracks is given by its grid span, rather than by 'grid-template-rows'/'grid-template-columns'.
• The grid-placement properties of the subgrid’s grid items 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.
• The subgrid itself lays out as an ordinary grid item in its parent grid, but acts as if it was completely empty for sizing purposes. The subgrid's own grid items participate in the sizing of its parent grid and are aligned to it. In this process, the sum of the subgrid's margin, padding, and borders at each edge are applied as an extra layer of margin to the items at those edges.
  For example, if we have a 3×3 grid with the following tracks:

  #parent-grid { grid-template-columns: 300px auto 300px; }

  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.

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

  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:

  #subgrid { padding: 100px; }

  Then a grid item in the subgrid's 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 grid item's own position.
• The 'grid-gap' properties do not apply to subgrids. (Their items are instead spaced by the 'grid-gap' of their parent grid, since they are laid out in the parent grid.)
• The subgrid does not have any implicit grid tracks; every grid area within it is clamped to its explicit grid.
  For example, if a ''span 1'' subgrid has a grid item with ''grid-column: 2 / span 3;'', then that item is instead forced into (and limited to) the first (only) track in the subgrid.
• The subgrid is always stretched in both dimensions: the 'align-self'/'justify-self' properties on it are ignored, as are any specified width/height constraints.
• Layoutwise, the subgrid’s explicit grid is always aligned with the corresponding section of the parent grid; the 'align-content'/'justify-content' properties on it are also ignored.
• The UA may apply 'overflow' to subgrids so the contents of the subgrid can be scrolled aside. (Note: the act of scrolling does not affect layout.) Overflow must otherwise be treated as ''visible''.
• Since subgrids can be placed before their contents are placed, their lines automatically receive the line names specified on the parent grid.

Masonry Layout