Item Level Alignment

When we use container-level alignment (justify-items, align-items), all grid items follow the same alignment.

But if you want only one particular item to have a different alignment, you use Item-Level Alignment.

This controls the behavior of individual grid items.

Item level Alignment are:

• justify-self
• align-self
• place-self

justify-self (Horizontal Alignment for One Item)

This property aligns the grid items to their cells horizontally (in the left–right direction).

Possible values:

• Start → Sticks to the left side of the grid.
• End → Sticks to the right side of the grid.
• Center → Centers the grid horizontally.
• Stretch → Items stretch to the width of the cell (default behavior).

Example:

.item1 {
  justify-self: center;
}

Meaning:

Item 1 will be displayed horizontally centered within its cell.

Important:

This only applies to one item; other items will remain default(as defined in container).

align-self (Vertical Alignment for One Item)

This property aligns the grid items to their cells vertically (in the top–bottom direction).

Possible values:

• Start → Stick to the top of the grid.
• End → Stick to the bottom of the grid.
• Center → Center the grid vertically.
• Stretch (default) → Fill the height of the item cell (stretch from top to bottom).

Example:

.item1 {
  align-self: end;
}

Meaning:

Item 1 will be placed at the bottom of its cell.

place-self (Shorthand)

This is shorthand for writing both align-self and justify-self on one line.

Syntax:

place-self: align-self justify-self;

Example 1 (Same value for both):

.item1 {
   place-self: center;
}

Meaning: align-self: center; & justify-self: center;

This means the item will be placed in the perfect center (both top-bottom and right-left).

Example 2 (Different values):

.item1 {
   place-self: start end;
}

Meaning: align-self: start → top; & justify-self: end → right;

This means the item will be placed in the top-right corner of the cell.