<> = repeat(  [ auto-fill | auto-fit ] , [ <>? <> ]+ <>? )
	

Subgrids

Here's a subgrid example: ```css ``` ```html

1 2 3 subgrid.1 sub.2 s.3 4 5 6 7

```

Note how the subgrid's first item ("subgrid.1") contributes to the intrinsic size of the 2nd row in the parent grid. This is possible since the subgrid specified a definite position so we know which tracks it will occupy. Note also that trying to subgrid the parent's [=stacking axis=] results in the subgrid converting to a [=grid lanes container=] with its [=inline axis=] as the [=stacking axis=].

Track Repetition: the ''repeat()'' notation

repeat(auto-fit)

Grid Axis Track Sizing

Subgrid Item Contributions

Optimized Track Sizing

1. Separate all the [=grid items=] into item groups, according to the following properties: * the span of the item * the placement of the item, i.e. which tracks it is allowed to be placed in * the item's [=baseline-sharing group=] Note: For example, an item with span 2 placed in the second track will be in a different group than an item with span 2 that has an [=automatic grid position=].
2. For each [=item group=], synthesize a virtual grid item that has the maximum of every intrinsic size contribution among the items in that group. If the items apply [=baseline alignment=], determine the baselines of the [=virtual grid item=] by placing all of its items into a single hypothetical grid track and finding their shared baseline(s) and shims. Increase the group's intrinsic size contributions accordingly.
3. Place hypothetical copies of each [=virtual grid item=] into the [=grid axis=] tracks in every position that the item could potentially occupy, and run the [[css-grid-2#algo-track-sizing|track sizing algorithm]] with those items. The resulting track sizes are the [=grid lanes container's=] track sizes.

Grid Lanes Item Placement

Here's a grid lanes layout demonstrating explicitly placed and spanning items:

		.container {
			grid-template-columns: repeat(3, auto);
		}
		.container > :nth-child(2) {
			/* auto-placed, but spanning. */
			grid-column: span 2;
		}
		.container > :nth-child(3) {
			/* manually placed */
			grid-column: 3;
		}
		/* all other children are auto-placed */
		

Specifying Grid Axis Item Placement: the 'grid-column-*' and 'grid-row-*' properties

Placement Precision: the 'flow-tolerance' property

	Name: flow-tolerance
	Value: normal | <> | infinite
	Initial: normal
	Percentages: relative to the [=grid-axis=] [=content box=] size of the [=grid lanes container=]
	Inherited: no
	Applies to: [=grid lanes containers=]
	Computed value: a computed <> value
	Animation type: as length
	

: <> :: Specifies the tie threshold for the [=grid lanes container=]. Placement positions are considered to be equally good (“tied”) if they are within the specified distance from the shortest position. Note: The initial value is a “small” distance (''1em'') that is probably appropriate to represent “close enough”. : normal :: Resolves to a [=used value=] of ''1em'' in [=grid lanes layout=] and a [=used value=] of ''0'' in all other layout modes. : infinite :: Specifies an infinite [=tie threshold=]. This makes items distribute themselves strictly in order, without considering the length of the tracks at all. Note: This value can result in consecutive items being placed in dramatically different positions in the [=stacking axis=], which can be confusing to readers. If the initial value (`1em`) is too small, consider a larger value (such as `10em` or `50vh`) instead of `infinite`.

In the following example, when placing the 5th item, the fourth column is the shortest, but the first column is almost as short.

With the default tolerance of ''1em'', both the first and fourth columns are considered to be "tied", and so the first is chosen. If, instead, the tolerance is set to ''0px'', then there is no tie; only the fourth column is a possible placement.

Dense Placement: the ''grid-auto-flow/dense'' keyword

Grid Lanes Layout and Placement Algorithm

1. If the item has a [=definite grid position=] in the [=grid axis=], use that placement. ISSUE: Should this also update the placement cursor? Otherwise, resolve its [=grid axis=] placement using these substeps:
   1. Starting at the first [=grid axis=] line in the [=implicit grid=], find the largest [=running position=] of the [=grid axis=] tracks that the item would span if it were placed at this line, and call this position max_pos.
   2. Repeat the previous step for each successive line number until the item would no longer fit inside the grid.
   3. Let |possible lines| be the line that resulted in the smallest max_pos, and all lines that result in a max_pos within the [=tie threshold=] of this max_pos.
   4. Choose the first line in |possible lines| greater than or equal to the [=auto-placement cursor=] as the item's position in the [=grid axis=]; or if there are none such, choose the first one.
   5. Update the [=auto-placement cursor=] to point to item's last line.
2. Place the item in its [=grid axis=] tracks at the maximum of the [=running position=]s of the tracks it spans.
3. Calculate the size of the item's containing block and then layout the item. Set the [=running position=] of the spanned [=grid axis=] tracks to max_pos + [=outer size=] + 'grid-gap'. For this purpose, the [=outer sizes=] of the box are floored at zero. Note: That is, if the box has sufficiently large negative margins, it won't somehow count as a negative size here. The [=running position=] of a track never decreases, so a negative-sized box won't cause future normally-sized items placed in the track to overlap previous items.
4. If the [=grid lanes container=] uses ''grid-auto-flow/dense'' packing, and there exists skipped spaces in the layout (e.g. due to spanning items) into which the item, as it is sized now, could have fit if it were placed earlier, and where the spanned tracks have the same total used size as the tracks into which it is currently placed, then instead place it into the highest such space. If there are multiple valid spaces within the [=tie threshold=] of the highest space, place it in the [=start=]-most of them. Rewind the [=auto-placement cursor=] and the [=running position=] to their values before this item’s placement. Note: Items that visually intrude into preceding empty spaces (via negative margins, ''position: relative'', transforms, etc.), do not affect the size of those empty spaces. Later items can get placed in those spaces and visually overlap these previous items. Note: Dense packing both ignores the [=auto-placement cursor=] when backfilling, and does not update it after placement. If there aren't any acceptable placement gaps to backfill, though, it places items exactly as when ''grid-auto-flow/dense'' were not specified.

Containing Block

Placement and Writing Modes

Here's a simple example using ''direction: rtl'' in the [=grid axis=]: ```css ``` ```html

1 2 3 4

```

Here's a simple example using ''direction: rtl'' in the [=stacking axis=]: ```css ``` ```html

1 2 3 4

```

Sizing Grid Containers

Here's a simple example: ```css ``` ```html

1 2 3 4 5 6

```

Alignment and Spacing

Gutters: the 'row-gap', 'column-gap', and 'gap' properties

Grid-axis Alignment: the 'align-content'/'justify-content', 'align-self'/'justify-self', and 'align-items'/'justify-items' properties

Stacking-axis Content Distribution: the 'align-content'/'justify-content' properties

Stacking-axis Self Alignment: the 'align-self'/'justify-self' and 'align-items'/'justify-items' properties

''align-self: start''	''align-self: end''

Baseline Alignment

Fragmentation

Fragmentation in the stacking axis

Fragmentation in the Grid Axis

Absolute Positioning

Graceful Degradation

Acknowledgements

Security Considerations

Privacy Considerations

Changes

Additions Since Level 2

• Added [=grid lanes layout=].
• Expanded ''repeat(auto-fill)'' and ''repeat(auto-fit)'' to accept indefinite track sizing functions. (Issue 9321, Issue 12899)
• Introduced the 'flow-tolerance' property.

Recent Changes