Justify Self and Align Self

The justify-items and align-items properties specify how all grid items contained within a single container will position themselves along the row and column axes, respectively.

justify-self specifies how an individual element should position itself with respect to the row axis. This property will override justify-items for any item on which it is declared.

align-self specifies how an individual element should position itself with respect to the column axis. This property will override align-items for any item on which it is declared.

These properties are declared on grid items. They both accept these four properties:

• start — positions grid items on the left side/top of the grid area

• end — positions grid items on the right side/bottom of the grid area

• center — positions grid items on the center of the grid area

• stretch — positions grid items to fill the grid area (default)

align-self and justify-self accept the same values as align-items and justify-items. You can read about these values on the Mozilla Developer Network. The definitions for these values can also be found in the documentation. It is important to note that the page with the definitions includes some values that are not accepted in CSS Grid layout.

Instructions

1.In style.css, inside the .a ruleset, add the align-self property and set its value to end.

What changes?

2.In style.css, inside the .c ruleset, add the justify-self property and set its value to start.

What changes?

The web page is looking a little uneven. We’ll get rid of both declarations in the next exercise.