The justify-self property is a part of the CSS Grid Layout module. It is used to align the content of a grid item along the horizontal axis within its grid cell. This property is used to control the alignment of a single grid item, whereas the justify-items property is used to control the alignment of all the grid items within a grid container.
The justify-self property can be used to align the content of a grid item to the left, right, center, or stretch it to fill the entire grid cell. It is similar to the align-self property, which is used to align the content of a grid item along the vertical axis within its grid cell.
Let's take a look at some examples of how the justify-self property can be used:
In this example, we have a grid container with two grid items. The first grid item has a justify-self property set to start, which aligns the content of the grid item to the left of its grid cell. The second grid item has a justify-self property set to end, which aligns the content of the grid item to the right of its grid cell.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.grid-item-1 {
justify-self: start;
}
.grid-item-2 {
justify-self: end;
}
In this example, we have a grid container with three grid items. The first grid item has a justify-self property set to center, which aligns the content of the grid item to the center of its grid cell. The second grid item has a justify-self property set to stretch, which stretches the content of the grid item to fill the entire grid cell. The third grid item has a justify-self property set to start, which aligns the content of the grid item to the left of its grid cell.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.grid-item-1 {
justify-self: center;
}
.grid-item-2 {
justify-self: stretch;
}
.grid-item-3 {
justify-self: start;
}
The justify-self property is a useful tool for aligning the content of a grid item along the horizontal axis within its grid cell. It can be used to align the content to the left, right, center, or stretch it to fill the entire grid cell. By using this property, you can create more complex and dynamic layouts with CSS Grid Layout.