The justify-self CSS property is used in grid layouts to align individual grid items along the horizontal axis within their own grid cell. It allows you to control the horizontal alignment of a specific grid item within its grid cell.
The justify-self property accepts various values to control the horizontal alignment of a grid item:
-
start: The grid item is aligned to the start of its grid cell. -
end: The grid item is aligned to the end of its grid cell. -
center: The grid item is centered horizontally within its grid cell. -
stretch: The grid item is stretched to fill the entire width of its grid cell. -
baseline: The grid item is aligned based on its baseline.
Here’s an example:
.grid-item {
justify-self: center;
}
In this example, the .grid-item class sets the horizontal alignment of the specific grid item to center within its grid cell.
You can use other values like start, end, stretch, or baseline to achieve different horizontal alignments for individual grid items within the grid layout.
The justify-self property is useful when you need to control the horizontal alignment of specific grid items within their grid cells, allowing for fine-grained control over the layout and positioning in grid layouts.