CSSGrid Container

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 itsdisplay property is set togrid orinline-grid.

The<div> element becomes a grid container when itsdisplay property is set togrid orinline-grid.

Usedisplay: gridto make a block-level grid container:

.container {
display: grid;
}

Result:

Usedisplay: inline-gridto 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 therow-gap and thecolumn-gap properties
grid	A shorthand property for thegrid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and thegrid-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 thegrid-template-rows,grid-template-columns andgrid-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 thealign-content and the justify-content properties
row-gap	Specifies the gap between the grid rows