CSS - justify-items Property

Quiz

CSS justify-items property is used to align grid-items within their grid area along the inline direction (horizontal). It controls how items are placed within their grid cells, effectively setting their alignment within the container's grid.

Syntax

justify-items: legacy | normal | stretch | start | left | center | end | right |  overflow-alignment | baseline alignment | initial | inherit;

Property Values

Value	Description
legacy	This value is inherited by box descendants. However, if a descendant has justify-self: auto, only left, right, or centre values are considered, not the legacy keyword. 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 Items Property

The following examples explain the justify-items property with different values.

Justify Items Property with Normal Value

To align items using the default alignment behavior, which typically corresponds to stretch in most modern browsers, we use the normal 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: normal;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

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

</html>

Justify Items Property with Stretch Value

To let the grid item stretch to fill the entire width of its grid cell, we use the stretch value. This is the default 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: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

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

</html>

Justify Items Property with Start Value

To align the grid item to the start edge of its grid area, we use the start value. In left-to-right (LTR) languages, this is equivalent to left; in right-to-left (RTL) languages, it aligns to the right edge. The direction property determines the starting 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: start;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }
      
      .first{
         direction: ltr;
      }
      .second{
         direction: rtl;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

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

</html>

Justify Items Property with End Value

To align the grid item to the end edge of its grid area, we use the end value. In LTR languages, this is equivalent to right; in RTL languages, it aligns to the left edge. The direction property determines the ending 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: end;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .first {
         direction: ltr;
      }

      .second {
         direction: rtl;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

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

</html>

Justify Items Property with Center Value

To align the grid item to the center of its grid area in the inline direction, we use the center value. All grid items are aligned at the center horizontally within their grid cells. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: center;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

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

</html>

Justify Items Property with Left Value

To align the grid item to the left edge of its grid area in the inline direction, we use the left value. All grid items are positioned flush against the left side of their respective grid cells. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: left;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

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

</html>

Justify Items Property with Right Value

To align the grid item to the right edge of its grid area in the inline direction, we use the right value. All grid items are positioned flush against the right side of their respective grid cells. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: right;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

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

</html>

Justify Items Property with Baseline Value

To align the grid item along the baseline of the grid cell, we use the baseline value. This is useful to align items with a specific baseline. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: baseline;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

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

</html>

Justify Items Property with Legacy Right Value

This value ensures that items are aligned to the right edge of their grid cells according to the behavior implemented by browsers before the CSS Grid specification was fully standardized. It was designed to provide backward compatibility with older browser behaviors that used a different alignment system. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: legacy right;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

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

</html>

Supported Browsers

Property
justify-items	57.0	16.0	45.0	10.1	44.0

css_reference.htm

Print Page