Hi there,
This simple post is all about CSS Grid items placement and positioning inside a CSS Grid. As we all know a CSS Grid has two axis i.e. Row (inline) Axis and Column (block) Axis and there are a few properties which are used to align and position grid items along these axis. There are three type of CSS Grid properties which are both common to row and column axis:
- Content (group of items)
- Items, and
- Self
Of these above properties which work on Grid Row (inline) Axis are justify-content, justify-items, and justify-self. These row axis properties only influence the alignment of content or grid items themselves horizontally. The properties are explained below:
justify-content: specifies how groups of elements should spread across the row axis.
justify-items: specifies how individual elements should spread across the row axis
justify-self: specifies how a single element should position itself with respect to the row axis
Similarly, the properties of CSS Grid which affect positioning of grid items vertically are align-content, align-items, and align-self, as explained below:
align-content: specifies how groups of elements should spread across the column axis
align-items: specifies how individual elements should spread across the column axis
align-self: specifies how a single element should position itself with respect to the column axis
After having memorized these properties and their affect on grid items along column (vertical) and/or row (horizontal) axis makes it super easy to work with CSS Grid.