CSS grid - justify-items, align-items, justify-self, align-self
Hello,
We have 4 properties to align items within container and individually:
ALIGN ITEMS WITHIN CONTAINER:
We have 2 properties for the grid container to align grid items horizontally and vertically within grid container (grid areas).
CSS grid spec: "A grid area is the logical space used to lay out one or more grid items. A grid area consists of one or more adjacent grid cells. It is bound by four grid lines"
Lets test each of the property and inspect it via Firefox or Chrome inspector
ALIGN ITEMS WITHIN CONTAINER:
1. to align grid items horizontally (inline/row axis alignment):
justify-items : stretch (default), start, end, center
2. to align grid items vertically (block/column axis alignment):
align-items: stretch (default), start, end, center (same values as for justify-items)
ALIGN INDIVIDUAL ITEMS (remove alignment properties from the container )
We have 2 properties for the individual grid items to align them horizontally and vertically:
Lets test each of the property and inspect it via Firefox or Chrome inspector
1. to align individual grid item horizontally (inline/row axis alignment):
justify-self: stretch (default), start, end, center
2. to align individual grid item vertically (block/column axis alignment):
align-self: stretch (default), start, end, center (same values as for justify-self)