Container

display

justify-items

align-items

justify-content

align-content

Items

grid-area (name or 1/1/2/4)

justify-self

align-self

order

z-index


Properties for the Parent(Grid Container)

display

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Values:

.container {
  display: grid | inline-grid;
}

Note: The ability to pass grid parameters down through nested elements (aka subgrids) has been moved to level 2 of the CSS Grid specification.Here’s a quick explanation.

grid-template-columns grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

Values:

.container {
  grid-template-columns:  ... |   ...;
  grid-template-rows:  ... |   ...;
}

Examples:

When you leave an empty space between the track values, the grid lines are automatically assigned positive and negative numbers: