justify-self
Definition
The justify-self property is used to align a grid item along the horizontal axis within a grid cell. It overrides the default value of justify-items set on the grid container for that particular item. This property applies only to grid items.
Examples
Setting justify-self to start:
.grid-item {
justify-self: start;
}
Setting justify-self to center:
.grid-item {
justify-self: center;
}
Setting justify-self to end:
.grid-item {
justify-self: end;
}
Values
| Value | Description |
|---|---|
| auto | Default value. Grid item inherits the value of justify-items from its grid container. |
| stretch | Grid item is stretched to fill the grid cell. |
| center | Grid item is centered within the grid cell. |
| start | Grid item is aligned with the start of the grid cell. |
| end | Grid item is aligned with the end of the grid cell. |
| baseline | Grid item is aligned with the text baseline within the grid cell. |
| first baseline | Grid item is aligned with the first text baseline within the grid cell. |
| last baseline | Grid item is aligned with the last text baseline within the grid cell. |
Best Practices
- Use justify-self to align individual grid items within a grid cell.
- Use justify-items to set the default horizontal alignment of all grid items within a grid container.
- Avoid using justify-self on non-grid items as it has no effect.
- Use auto for justify-self if you want the grid item to inherit the default horizontal alignment set on the grid container.
- Always test your layout on different screen sizes and devices to ensure that it looks good and is aligned as expected.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |