Loading lesson path
Overview
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.
Formula
An element becomes a grid container when its display property is set to grid or inline - grid.<div>
Formula
element becomes a grid container when its display property is set to grid or inline - grid.Formula
Use display: grid to make a block - level grid container:.container {display: grid;
}Formula
Use display: inline - grid to make an inline grid container:.container {display: inline-grid;
}Formula
Vertically aligns the grid items inside the container align - itemsSpecifies the default alignment for items inside a flexbox or grid container display
Formula
Specifies the display behavior (the type of rendering box) of an element column - gapFormula
A shorthand property for the row - gap and the column - gap properties gridA 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
Formula
Specifies how auto - placed items are inserted in the grid grid - auto - rowsFormula
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