Grid-area
Gives an item a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.
Values:
-
<name> – a name of your choosing
-
<row-start> / <column-start> / <row-end> / <column-end> – can be numbers or named lines
.item { grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; }
Examples:
As a way to assign a name to the item:
.item-d { grid-area: header; }
.item-d { grid-area: 1 / col4-start / last-line / 6; }
Justify-self
Aligns a grid item inside a cell along the inline (row) axis (as opposed to align-self which aligns along the block (column) axis). This value applies to a grid item inside a single cell.
Values:
-
start – aligns the grid item to be flush with the start edge of the cell
-
end – aligns the grid item to be flush with the end edge of the cell
-
center – aligns the grid item in the center of the cell
-
stretch – fills the whole width of the cell (this is the default)
.item { justify-self: start | end | center | stretch; }
Examples:
.item-a { justify-self: start; }
.item-a { justify-self: end; }
.item-a { justify-self: center; }
.item-a { justify-self: stretch; }
To set alignment for all the items in a grid, this behavior can also be set on the grid container via the justify-items property.
Align-self
Aligns a grid item inside a cell along the block (column) axis (as opposed to justify-self which aligns along the inline (row) axis). This value applies to the content inside a single grid item.
Values:
-
start – aligns the grid item to be flush with the start edge of the cell
-
end – aligns the grid item to be flush with the end edge of the cell
-
center – aligns the grid item in the center of the cell
-
stretch – fills the whole height of the cell (this is the default)
.item {
align-self: start | end | center | stretch;
}
Examples:
.item-a {
align-self: start;
}
.item-a {
align-self: end;
}
.item-a {
align-self: center;
}
.item-a {
align-self: stretch;
}
To align all the items in a grid, this behavior can also be set on the grid container via the align-items property.
Place-self
place-self sets both the align-self and justify-self properties in a single declaration.
Values:
-
auto – The “default” alignment for the layout mode.
-
<align-self> / <justify-self> – The first value sets align-self, the second value justify-self. If the second value is omitted, the first value is assigned to both properties.
Examples:
.item-a {
place-self: center;
}
.item-a {
place-self: center stretch;
}
All major browsers except Edge support the place-self shorthand property.