CSS - justify-items Property

CSS justify-items property provides a default alignment along the relevant axis for each box by setting the default justify-self for all box items.

This property's effect varies based on the layout mode in use:

  • It aligns items in block-level layouts along the inline axis within their containing block.

  • When elements are positioned absolutely, the items within the containing block are aligned on the inline axis, considering the specified top, left, bottom, and right offset values.

  • This property is ignored in table cell layouts .

  • This property is ignored in Flexbox layouts.

  • Aligns the items inside the grid areas on the inline axis in grid layouts.

Possible Values

  • normal − This keyword's effect is determined on the layout mode:

    • Same as start in block-level layouts.

    • Absolute positioning uses this keyword as a 'start' for replaced boxes and a 'stretch' for other absolute-positioned boxes.

    • It has no meaning in table cell layouts because its property is ignored.

    • It has no meaning in flexbox layouts because its property is ignored.

    • This term acts as a 'stretch' for grid items, except boxes with an aspect ratio or intrinsic sizes, which act as a 'start'.

  • start − Aligns the items at the start edge of the alignment container in the corresponding axis.

  • end − Aligns the items at the end edge of the alignment container in the corresponding axis.

  • center − Aligns the items at the centre of the alignment container.

  • flex-start − This value is considered as start, by items that are not children of a flex container.

  • flex-end − This value is considered as end, by items that are not children of a flex container.

  • self-start − The items are aligned to the start edge of the alignment container in the appropriate axis.

  • self-end − The items are aligned to the end edge of the alignment container in the appropriate axis.

  • left − The items are aligned to the left edge of the alignment container. This value acts like start if the property's axis is not parallel to the inline axis.

  • right − The items are aligned to the right edge of the alignment container in the appropriate axis. This value acts like start if the property's axis is not parallel to the inline axis.

  • baseline, first baseline, last baseline − Defines alignment with the first or last baseline of a box in its baseline-sharing group, aligns the box's first or last baseline set with the appropriate baseline, with start as the fallback for the first baseline and end for the last baseline.

  • stretch − When the aggregate size of the items is less than the alignment container, auto-sized items are evenly enlarged, according to max-height/max-width limitations, the combined size fills the alignment container.

  • safe − In case 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.

  • 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.

Applies To

All elements.

Syntax

This property can take any of four forms:

  • Basic keyword: The keyword values are normal or stretch.

  • Baseline alignment: The baseline keyword with an additional first or last.

  • Positional alignment: Choose from center, start, end, flex-start, flex-end, self-start, self-end, left, or right. also optionally unsafe or safe.

  • Legacy alignment: Use the legacy keyword with left or right.

Basic Keywords

justify-items: normal;
justify-items: stretch;

Positional Alignment

justify-items: center;
justify-items: start; 
justify-items: end; 
justify-items: flex-start;
justify-items: flex-end; 
justify-items: self-start;
justify-items: self-end;
justify-items: left; 
justify-items: right;

Baseline Alignment

justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

Overflow Alignment (for positional alignment only)

justify-items: safe center;
justify-items: unsafe center;

Legacy Alignment

justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

CSS justify-items - normal Value

The following example demonstrates the justify-items: normal property that aligns the items along the row axis within each grid cell with its default behavior −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: normal;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - stretch Value

The following example demonstrates the justify-items: stretch property that stretches the items along the row axis to fill the entire width of their columns −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: stretch;
      background-color: greenyellow;
   }
   .box > div {
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - start Value

The following example demonstrates the justify-items: start property that aligns items against the start edge of the grid container −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: start;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - end Value

The following example demonstrates the justify-items: end property that aligns items against the end edge of the grid container −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: end;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - center Value

The following example demonstrates the justify-items: center property. It aligns the items at the center of the grid container horizontally −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: center;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - flex-start Value

The following example demonstrates the justify-items: flex-start property that aligns items against the start edge of the grid container (same as the start value) −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: flex-start;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - flex-end Value

The following example demonstrates the justify-items: flex-end property that aligns items against the end edge of the grid container (same as the end value) −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: flex-end;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - self-start Value

The following example demonstrates the justify-items: self-start property that aligns items at the start edge of the grid container −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: self-start;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - self-end Value

The following example demonstrates the justify-items: self-end property that aligns items at the end edge of the grid container −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: self-end;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - left Value

The following example demonstrates the justify-items: left property, that packed flush the items with each other towards the left edge of the grid container −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: left;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - right Value

The following example demonstrates the justify-items: right property, that packed flush the items with each other towards the right edge of the grid container −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: right;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - baseline Value

The following example demonstrates the justify-items: baseline property, that aligns the items along the basline. The baseline is an imaginary line that will align the elements based on where their text is located −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: baseline;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - last baseline Value

The following example demonstrates the justify-items: last baseline property, that aligns the items along the baseline of the last grid item in each row −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: last baseline;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS justify-items - safe center Value

The following example demonstrates the justify-items: safe center property, that aligns the overflowing items ( Item 1 and Item 3) to the start of their respective columns −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 100px);
      justify-items: safe center;
      grid-gap: 10px;
      border: 2px solid black;
      padding: 10px;
      background-color: greenyellow;
   }
   .grid-item {
      width: 350px; 
      height: 50px;
      background-color: lightcoral;
      border: 2px solid blue;
      margin: 5px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div class="grid-item">Item 1 (Overflow)</div>
      <div class="grid-item">Item 2</div>
      <div class="grid-item">Item 3 (Overflow)</div>
      <div class="grid-item">Item 4</div>
   </div>
</body>
</html>

CSS justify-items - legacy right Value

The following example demonstrates the justify-items: legacy right property, that aligns the items to the end of the grid cells −

<html>
<head>
<style> 
   .box {
      width: 100%;
      border: 2px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 40px;
      grid-gap: 10px;
      justify-items: legacy right;
      background-color: greenyellow;
   }
   .box > div {
      width: 100px;
      border: 2px solid blue;
      background-color: lightcoral;
      margin: 5px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <div>Item 1</div>
      <div>Item 2</div>  
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>
Advertisements