The justify-self property is used to specify the alignment of a content’s position along with the appropriate axis in a CSS Grid.
Syntax:
justify-self: stretch | normal | auto | baseline | start | end | center | flex-start | flex-end | self-start | self-end | left | right | safe | unsafe
Property Values:
- stretch: It is the default value of this property and it makes the content to fill the whole width of the cell.
- normal: It is the trivial properties i.e. behaves as start in block-level layouts and in replaced absolutely-positioned boxes, as stretch in other absolutely positioned boxes, in the table and flex layouts, it is ignored, in grid layout as stretch except in few cases like boxes with aspect ratio where it acts as the start value.
- auto: It is the value used justify-items property located in parent element or defaults to the normal value. It is the default value.
- baseline: It makes the alignment of the alignment baseline of the current box’s first or last baseline set to the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fall-back value for first baseline is start and for last baseline is end.
- start: It allows the content to align itself to the left of the cell.
- end: It allows the content to align itself to the right of the cell.
- center: It allows the content to align itself to the center of the cell.
- flex-start: It is the same as the start value.
- flex-end: It is the same as the end value.
- self-start: It aligns the item to the left of the aligned container at the beginning of an item.
- self-end: It aligns the item to the right of the aligned container at the end of an item.
- left: It makes the item pack flush to the left of the alignment container. It acts as the same as start if the property’s axis is not parallel with the inline axis.
- right: It makes the item pack flush to the right of the alignment container. It acts as the same as end if the property’s axis is not parallel with the inline axis.
- safe: It makes the item align as the start value if the item overflows the alignment container.
- unsafe: It makes the item align as the given value regardless of relative sizes alignment container and the item.
Example 1: In this example, justify-self is not used for the alignment.
HTML
<!DOCTYPE html><html>
<head>
<style>
article {
font-family: sans-serif;
background-color: green;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 70px;
grid-gap: 30px;
width: 700px;
justify-items: stretch;
border: solid;
margin: 20%;
}
article span {
background-color: white;
color: green;
margin: 2px;
text-align: center;
border: solid;
}
article,
span {
padding: 5px;
border-radius: 3px;
border: solid;
}
</style>
</head>
<body>
<article class="container">
<span>GEEKS</span>
<span>FOR</span>
<span>GEEKS</span>
<span>ONLINE</span>
<span>PORTAL</span>
</article>
</body>
</html>
|
Output:
Example 2: In this example, a few of the justify-self values are used for the alignment.
HTML
<!DOCTYPE html><html>
<head>
<style>
article {
font-family: sans-serif;
background-color: green;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 70px;
grid-gap: 30px;
width: 700px;
justify-items: stretch;
border: solid;
margin: 20%;
}
span:nth-child(2) {
justify-self: start;
}
span:nth-child(3) {
justify-self: center;
}
span:nth-child(4) {
justify-self: end;
}
article span {
background-color: white;
color: green;
margin: 2px;
text-align: center;
border: solid;
}
article,
span {
padding: 5px;
border-radius: 3px;
border: solid;
}
</style>
</head>
<body>
<article class="container">
<span>GEEKS</span>
<span>FOR</span>
<span>GEEKS</span>
<span>ONLINE</span>
<span>PORTAL</span>
</article>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome 57+
- Edge 16+
- Firefox 45+
- Opera 44+
- Apple Safari 10.1+