Container

display

• grid
• grid-gap

justify-items

align-items

justify-content

align-content

Items

• grid-column (start / stop)
• grid-row

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:

• grid – generates a block-level grid
• inline-grid – generates an inline-level grid

.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:

• <track-size> – can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)
• <line-name> – an arbitrary name of your choosing

.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: