# Align and Justify GRID

There are 3 main categories for placement.

• Content: This is how the group of cells are placed in the main container.
• Items: This is how each items is placed in each cell.
• Self: This is how single item is paced in a cell.

For each category the are 2 axis.

• Align: This is how the item is placed in the row axis (up-down).
• Justify: This is how the item is placed in the column axis (left-right).

So we end up with 6 CSS properties.

• align-content
• justfy-content
• align-items
• justify-item
• align-self
• justify-self

# Align Content

CSS Class: alignContent-start/center/end/space-between/space-around/space-evenly/stretch
Component: align-content="start/center/end/space-between/space-around/space-evenly/stretch"
The default is stretch.

# Justify Content

CSS Class: justContent-start/center/end/space-between/space-around/space-evenly/stretch
Component: justify-content="start/center/end/space-between/space-around/space-evenly/stretch"
The default is stretch.

# Align Items

CSS Class: alignItems-start/center/end/space-between/space-around/space-evenly/stretch
Component: align-items="start/center/end/space-between/space-around/space-evenly/stretch"
The default is stretch.

# Justify Items

CSS Class: justItems-start/center/end/space-between/space-around/space-evenly/stretch
Component: justify-items="start/center/end/space-between/space-around/space-evenly/stretch"
The default is stretch.

# Align & Justify Sandbox

# Align Self

CSS Class: alignSelf-start/center/end/stretch
The default is stretch.
The selected alignSelf class is bound to box 2.

# Justify Self

CSS Class: justSelf-start/center/end/stretch
The default is stretch.
The selected justSelf class is bound to box 2.