Skip to Content
Learn
Advanced CSS Grid
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.

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.

These properties are declared on grid items.

Instructions

1.

In the rule-set for the element with class c in style.css, add the justify-self property and set its value to start.

What changes?

2.

In the rule-set for the element with class a in style.css, add the align-self property and set its value to end.

What changes?

3.

The web page is looking a little uneven, so delete both of the declarations you made in the first two steps.

Folder Icon

Take this course for free

Already have an account?