In this section, we will learn what the grid align-items property is and how to use it in CSS.

Click here to run the example of grid align-items property.

CSS grid align-items Property Definition and Usage

When we create a grid, we can see that each item is placed in one cell and fills the entire space of that cell. But this is the default behavior and we can change the position of all items within their cells horizontally and vertically.

In order to vertically change the position of grid-items within their cells, we use `align-items`.

CSS grid align-items Property Syntax

align-items: value;

CSS grid align-items Property Value

The values that can be set for this property are:

• start: using this value, each item will be positioned at the top edge of its cell.

• end: using this value, each item will be positioned at the bottom edge of its cell.

• center: using this value, each item will be positioned at the center of its cell.

• stretch: using this value, each item will vertically stretch and fill the entire vertical space of its cell.

Note: there’s another property called `align-self` by which we can vertically change the position of an item within its cell. The difference between this property and `align-items` is that `align-self` applies to only one item, but `align-items` apply to all items within a grid.

Example: align items center

See the Pen align items center by Enjoy Tutorials (@enjoytutorials) on CodePen.