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; }
As the short-shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end:
.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 setsalign-self, the second valuejustify-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;
}
