CSS justify-self

The justify-self property in CSS is used to align items inside a grid cell along the inline (row) axis.

There are five possible values for justify-self:

• start: Aligns the item to the start of the row.
• end: Aligns the item to the end of the row.
• center: Centers the item in the row.
• stretch: Stretches the item to fill the entire row.
• auto: Sets the value to the parent grid's justify-items value.

Let's see some examples:

In the example above, we have a grid container with two columns. Each grid item has different justify-self values applied to it.

You can also use the justify-self property in combination with the justify-items property to override the alignment.

That's all you need to know about the justify-self property in CSS!