Grid Item Align

CSS Grid Items - Alignment

Grid items can be aligned within their respective grid cells using properties like:

• justify-self - Specifies the horizontal alignment within a cell
• align-self - Specifies the vertical alignment within a cell
• place-self - Shorthand property for align-self and justify-self

These can also be applied to all grid items in a container using justify-items and align-items on the grid container.

The CSS justify-self Property

The justify-self property is used to align a grid item within its grid cell in the inline direction.

Tip: For pages in English, inline direction is left to right and block direction is top to bottom.

This property can have one of the following values:

• auto (default)
• normal
• stretch
• start
• left
• center
• end
• right

Note: For this property to have any alignment effect, the grid item need available space around itself in the inline direction.

Example

  .item1 {justify-self: right;}
.item6 {justify-self:
  center;}

The CSS align-self Property

The align-self property is used to align a grid item within its grid cell in the block direction.

This property can have one of the following values:

• auto (default)
• normal
• stretch
• start
• end
• center

Note: For this property to have any alignment effect, the grid item need available space around itself in the block direction.

Example

  .item1 {align-self: start;}
.item6 {align-self: center;}

CSS Grid Item Alignment Properties