Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Grid Container?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___: grid3Order
Put the learning moves in the order that makes the concept easiest to apply.
CSS Grid Container Properties
Display Grid Property
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 .
display: griddisplay: inline-gridCSS 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 |