CSS Grid Container

A grid container contains one or more grid items arranged in columns and rows.

All direct child elements of a grid container automatically become grid items.

An element becomes a grid container when its display property is set to grid or inline-grid.

Display Grid Property

The <div> element becomes a grid container when its display property is set to grid or inline-grid.

Use display: grid to make a block-level grid container:

.container {
display: grid;
}

Result:

Use display: inline-grid to make an inline grid container:

.container {
display: inline-grid;
}

Result:

Property	Description
align-content	Vertically aligns the grid items inside the container
align-items	Specifies the default alignment for items inside a flexbox or grid container
display	Specifies the display behavior (the type of rendering box) of an element
column-gap	Specifies the gap between the columns
gap	A shorthand property for the row-gap and the column-gap properties
grid	A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-auto-columns	Specifies a default column size
grid-auto-flow	Specifies how auto-placed items are inserted in the grid
grid-auto-rows	Specifies a default row size
grid-template	A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas	Specifies how to display columns and rows, using named grid items
grid-template-columns	Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows	Specifies the size of the rows in a grid layout
justify-content	Horizontally aligns the grid items inside the container
place-content	A shorthand property for the align-content and the justify-content properties
row-gap	Specifies the gap between the grid rows