CSS justify-self property provides a default alignment along the relevant axis for each box by setting the default justify-self for all box items.
Syntax
justify-self: auto | normal | stretch | start | right | center | left | end | overflow-alignment | baseline alignment | initial | inherit;
Property Values
| Value | Description |
|---|---|
| auto | It inherits the grid container justify-items property value. Default. |
| normal | It is dependent on the layout mode, for grid layout it is same as “stretch” |
| stretch | It stretches to fill the grid cell if width is not set. |
| start | It aligns items at the start in the inline direction edge of the alignment container . |
| left | It aligns items at the left edge of the alignment container . |
| center | It aligns items at the center edge of the alignment container . |
| end | It aligns items at the end in the inline-direction edge of the alignment container . |
| right | It aligns items at the right edge of the alignment container . |
| overflow alignment | safe: If the size of the item overflows the alignment container, the alignment mode of the item is set as “start”unsafe: The specified alignment value is honored regardless of the relative sizes of the item and alignment container. |
| baseline alignment | The element is aligned with the baseline of the parent. |
| initial | It sets the property to its default value. |
| inherit | It inherits the property from the parent element. |
Examples of CSS Justify Self Property
The following examples explain the justify-self property with different values.
Justify Self Property with Auto Value
To let the grid item align according to the default alignment specified by the justify-items property of the grid container, we use the auto value. The grid item will use the alignment behavior set for the container. In the following example, justify-items has been set to “stretch”.
Example
<!DOCTYPE html><html><head><style>.container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: stretch; gap: 3px; border: 2px solid black; height: 150px; padding: 5px; }.container>div { background-color: lightblue; text-align: center; border: 2px solid green; color: white; padding: 15px; height: 50px; }</style></head><body><h2>.item { justify-self: auto; }</h2><h4>CSS justify-self property</h4><div class="container"><div>justify-self: autoItem-1 </div><div class="item"> Item-2 </div><div> Item-3 </div></div></body></html></pre>Justify Self Property with Normal Value
The normal value is similar to auto value as it typically corresponds to the default alignment behavior. It generally aligns items based on the default setting of the grid container. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: stretch; gap: 3px; border: 2px solid black; height: 150px; padding: 5px; }.container>div { background-color: lightblue; text-align: center; border: 2px solid green; color: white; padding: 15px; height: 50px; }</style></head><body><h2>.item { justify-self: normal; }</h2><h4>CSS justify-self property</h4><div class="container"><div>justify-self: normalItem-1 </div><div class="item"> Item-2 </div><div> Item-3 </div></div></body></html></pre>Justify Self Property with Stretch Value
To make the grid item stretch to fill the entire width of its grid cell, we use the stretch value. It ensures that items expand to fit the available space. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: stretch; gap: 3px; border: 2px solid black; height: 150px; padding: 5px; }.container>div { background-color: lightblue; text-align: center; border: 2px solid green; color: white; padding: 15px; height: 50px; }</style></head><body><h2> CSS justify-self property </h2><h4> justify-self: stretch </h4><div class="container"><div>.item { justify-self: stretch; }Item-1 </div><div class="item"> Item-2 </div><div> Item-3 </div></div></body></html></pre>Justify Self Property with Start Value
To align the grid item to the start edge of its grid cell, we use the start value. In left-to-right (LTR) languages, this is equivalent to aligning to the left; in right-to-left (RTL) languages, it aligns to the right. The direction property determines the start edge. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: stretch; gap: 3px; border: 2px solid black; height: 150px; padding: 5px; }.container>div { background-color: lightblue; text-align: center; border: 2px solid green; color: white; padding: 15px; height: 50px; }.first-container { direction: ltr; }.second-container { direction: rtl; }</style></head><body><h2>.item { justify-self: start; }</h2><h4>CSS justify-self property</h4><div class="first-container container"><div>justify-self: start; direction: ltr;</h4><div class="second-container container"><div>Item-1 </div><div class="item"> Item-2 </div><div> Item-3 </div></div><h4> justify-self: start; direction: rtl;Item-1 </div><div class="item"> Item-2 </div><div> Item-3 </div></div></body></html></pre>Justify Self Property with End Value
aligns the grid item to the end edge of its grid cell, we use the end value. In left-to-right (LTR) languages, this is equivalent to aligning to the right; in right-to-left (RTL) languages, it aligns to the left. The direction property determies the end edge. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: stretch; gap: 3px; border: 2px solid black; height: 150px; padding: 5px; }.container>div { background-color: lightblue; text-align: center; border: 2px solid green; color: white; padding: 15px; height: 50px; }.first-container { direction: ltr; }.second-container { direction: rtl; }</style></head><body><h2>.item { justify-self: end; }</h2><h4>CSS justify-self property</h4><div class="first-container container"><div>justify-self: end; direction: ltr;</h4><div class="second-container container"><div>Item-1 </div><div class="item"> Item-2 </div><div> Item-3 </div></div><h4> justify-self: end; direction: rtl;Item-1 </div><div class="item"> Item-2 </div><div> Item-3 </div></div></body></html></pre>Justify Self Property with Center Value
To align the grid item at the center of its grid cell, we use the center value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: stretch; gap: 3px; border: 2px solid black; height: 150px; padding: 5px; }.container>div { background-color: lightblue; text-align: center; border: 2px solid green; color: white; padding: 15px; height: 50px; }</style></head><body><h2>.item { justify-self: center; }</h2><h4>CSS justify-self property</h4><div class="container first"><div>justify-self: centerItem-1 </div><div class="item"> Item-2 </div><div> Item-3 </div></div></body></html></pre>Justify Self Property with Left Value
To align the grid item to the left edge of its grid cell, we use the left value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: stretch; gap: 3px; border: 2px solid black; height: 150px; padding: 5px; }.container>div { background-color: lightblue; text-align: center; border: 2px solid green; color: white; padding: 15px; height: 50px; }</style></head><body><h2>.item { justify-self: left; }</h2><h4>CSS justify-self property</h4><div class="container first"><div>justify-self: leftItem-1 </div><div class="item"> Item-2 </div><div> Item-3 </div></div></body></html></pre>Justify Self Property with Right Value
To align the grid item to the right edge of its grid cell, we use the right value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: stretch; gap: 3px; border: 2px solid black; height: 150px; padding: 5px; }.container>div { background-color: lightblue; text-align: center; border: 2px solid green; color: white; padding: 15px; height: 50px; }</style></head><body><h2>.item { justify-self: right; }</h2><h4>CSS justify-self property</h4><div class="container first"><div>justify-self: rightItem-1 </div><div class="item"> Item-2 </div><div> Item-3 </div></div></body></html></pre>Justify Self Property with Last Baseline Value
To align the grid item such that its baseline aligns with the last baseline of the grid cell, we use the last baseline value. This is useful for aligning text elements so that the last lines of text in each grid item are aligned horizontally. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: stretch; gap: 3px; border: 2px solid black; height: 150px; padding: 5px; }.container>div { background-color: lightblue; text-align: center; border: 2px solid green; color: white; padding: 15px; height: 50px; }</style></head><body><h2>.item { justify-self: last baseline; }</h2><h4>CSS justify-self property</h4><div class="container"><div>justify-self: last baselineItem-1 </div><div class="item"> Item-2 </div><div> Item-3 </div></div></body></html></pre>
Leave a Reply