These properties specify, as a space-separated track list, the line names and track sizing functions of the grid. Each track sizing function can be specified as a length, a percentage of the grid container’s size, a measurement of the contents occupying the column or row, or a fraction of the free space in the grid. It can also be specified as a range using the minmax() notation, which can combine any of the previously mentioned mechanisms to specify separate min and max track sizing functions for the column or row.

]]> These properties specify, as a space-separated track list, the line names and track sizing functions of the grid. Each track sizing function can be specified as a length, a percentage of the grid container’s size, a measurement of the contents occupying the column or row, or a fraction of the free space in the grid. It can also be specified as a range using the minmax() notation, which can combine any of the previously mentioned mechanisms to specify separate min and max track sizing functions for the column or row.

]]> This property specifies named grid areas, which are not associated with any particular grid item, but can be referenced from the grid-placement properties. The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand.

]]> The grid-template property is a shorthand for setting , , and in a single declaration.

]]> If a grid item is positioned into a row or column that is not explicitly sized by or , implicit grid tracks 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 auto-placement algorithm creating additional rows or columns. The grid-auto-columns and properties specify the size of such implicitly-created tracks.

]]> If a grid item is positioned into a row or column that is not explicitly sized by or , implicit grid tracks 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 auto-placement algorithm creating additional rows or columns. The grid-auto-columns and properties specify the size of such implicitly-created tracks.

]]> Grid items that aren't explicitly placed are automatically placed into an unoccupied space in the grid container. The grid-auto-flow property controls the direction in which the search for unoccupied space takes place, and whether rows or columns are added as needed to accommodate the content.

]]> The grid property is a shorthand that sets all of the explicit grid properties (, , and ) as well as all the implicit grid properties (, , and ) in a single declaration. If value is omitted, it is set to the value specified for . Other omitted values are set to their initial values.

]]> The grid-row-start property determines a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid. area.

]]> The grid-column-start property determines a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-start edge of its grid. area.

]]> The grid-row-end property determines a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid. area.

]]> The grid-column-end property determines a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid. area.

]]> The grid-row property are shorthand for and /.

If two <grid-line> values are specified, the longhand is set to the value before the slash, and the longhand is set to the value after the slash.

When the second value is omitted, if the first value is a <custom-ident>, the longhand is also set to that <custom-ident>; otherwise, it is set to auto.

]]> The grid-column property are shorthand for and /.

If two <grid-line> values are specified, the longhand is set to the value before the slash, and the longhand is set to the value after the slash.

When the second value is omitted, if the first value is a <custom-ident>, the longhand is also set to that <custom-ident>; otherwise, it is set to auto.

]]> If four <grid-line> values are specified, is set to the first value, is set to the second value, is set to the third value, and is set to the fourth value.

When is omitted, if is a <custom-ident>, is set to that <custom-ident>; otherwise, it is set to auto.

When is omitted, if is a <custom-ident>, is set to that <custom-ident>; otherwise, it is set to auto.

When is omitted, if is a <custom-ident>, all four longhands are set to that value. Otherwise, it is set to auto.

]]> grid-row-gap and grid-column-gap properties specify the gutters between grid rows and grid columns, respectively. The effect is as though the affected grid lines acquired width: the grid track between two grid lines is the space between the gutters that represent them. For the purpose of track sizing, each gutter is essentially treated as an extra, empty track of the specified size. Negative values are invalid.

]]> grid-row-gap and grid-column-gap properties specify the gutters between grid rows and grid columns, respectively. The effect is as though the affected grid lines acquired width: the grid track between two grid lines is the space between the gutters that represent them. For the purpose of track sizing, each gutter is essentially treated as an extra, empty track of the specified size. Negative values are invalid.

]]> This property is a shorthand that sets and in one declaration. If <‘grid-column-gap’> is omitted, it’s set to the same value as <‘grid-row-gap’>.

]]>