display
grid
grid-gap
justify-items
align-items
justify-content
align-content
grid-column
(start / stop)grid-row
grid-area
(name or 1/1/2/4)
justify-self
align-self
order
z-index
Defines the element as a grid container and establishes a new grid formatting context for its contents.
Values:
grid
– generates a block-level gridinline-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.
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: