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 areaend
— positions grid items on the right side/bottom of the grid areacenter
— positions grid items on the center of the grid areastretch
— 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
In style.css, inside the .a
ruleset, add the align-self
property and set its value to end
.
What changes?
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.