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.
Example
.container {
display: grid;
}
Example
.container {
display: inline-grid;
}
CSS Grid Container Properties
| 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 |
