CSS - justify-self Property

Previous
Quiz
Next

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;
      }

      .item {
         justify-self: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-self property
   </h2>
   <h4>
      justify-self: auto
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div class="item">
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

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;
      }

      .item {
         justify-self: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-self property
   </h2>
   <h4>
      justify-self: normal
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div class="item">
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

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;
      }

      .item {
         justify-self: stretch;
      }
   </style>
</head>

<body>
   <h2>
   CSS justify-self property
   </h2>
   <h4>
   justify-self: stretch
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div class="item">
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

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;
      }

      .item {
         justify-self: start;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-self property
   </h2>
   <h4>
      justify-self: start; direction: ltr;
   </h4>
   <div class="first-container container">
      <div>
         Item-1
      </div>
      <div class="item">
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
   <h4>
      justify-self: start; direction: rtl;
   </h4>
   <div class="second-container container">
      <div>
         Item-1
      </div>
      <div class="item">
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

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;
      }

      .item {
         justify-self: end;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-self property
   </h2>
   <h4>
      justify-self: end; direction: ltr;
   </h4>
   <div class="first-container container">
      <div>
         Item-1
      </div>
      <div class="item">
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
   <h4>
      justify-self: end; direction: rtl;
   </h4>
   <div class="second-container container">
      <div>
         Item-1
      </div>
      <div class="item">
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

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;
      }

      .item {
         justify-self: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-self property
   </h2>
   <h4>
      justify-self: center
   </h4>
   <div class="container first">
      <div>
         Item-1
      </div>
      <div class="item">
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

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;
      }

      .item {
         justify-self: left;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-self property
   </h2>
   <h4>
      justify-self: left
   </h4>
   <div class="container first">
      <div>
         Item-1
      </div>
      <div class="item">
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

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;
      }

      .item {
         justify-self: right;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-self property
   </h2>
   <h4>
      justify-self: right
   </h4>
   <div class="container first">
      <div>
         Item-1
      </div>
      <div class="item">
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

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;
      }

      .item {
         justify-self: last baseline;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-self property
   </h2>
   <h4>
      justify-self: last baseline
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div class="item">
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
justify-self 57.0 16.0 45.0 10.1 44.0
css_reference.htm
Print Page
Previous
Next
Advertisements