March 12Mar 12 Administrators CSS Grid 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 its display property is set to grid or inline-grid. 1 2 3 4 5 Try it Yourself » Display Grid Property The <div> element becomes a grid container when its display property is set to grid or inline-grid. Example Use display: grid to make a block-level grid container: .container { display: grid;} Result: 1 2 3 4 5 Try it Yourself » Example Use display: inline-grid to make an inline grid container: .container { display: inline-grid;} Result: 1 2 3 4 5 Try it Yourself » 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 ★ +1 Sign in to track progress
Create an account or sign in to comment