Understanding CSS Grid Justify-Items Property


The justify-items property in CSS Grid is used to align grid items within their grid cell along the inline (horizontal) axis. It defines the default alignment for all items in a grid container, unless overridden by justify-self property on the individual items.

You can also set the justify-items property to other values, such as start, end, stretch or baseline. Here's what each value does:

  • start: aligns grid items to the start of their grid cell (left-aligned for ltr languages)
  • end: aligns grid items to the end of their grid cell (right-aligned for ltr languages)
  • center: aligns grid items to the center of their grid cell
  • stretch: stretches grid items to fill the entire width of their grid cell
  • baseline: aligns grid items such that their baselines align with each other

justify-items:start;

justify-items:start

justify-items:end;

justify-items:end

justify-items:center;

justify-items:center

justify-items:stretch; or justify-items:baseline;

justify-items:stretch

Here's an example:

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="justify_items.css">
</head>
<body>
  <div class="container">
    <div class="grid-item box-1">Box-1</div>
    <div class="grid-item box-2">Box-2</div>
    <div class="grid-item box-3">Box-3</div>
    <div class="grid-item box-4">Box-4</div>
    <div class="grid-item box-5">Box-5</div>
    <div class="grid-item box-6">Box-6</div>
    <div class="grid-item box-7">Box-7</div>
    <div class="grid-item box-8">Box-8</div>
    <div class="grid-item box-9">Box-9</div>
  </div>
</body>
</html>

justify_items.css :

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;
  box-sizing: border-box;
}

.container{
  border:5px solid black;
  margin: 20px;
}

.grid-item{
  color:white;
  font-size: 18px;
  padding: 16px;
  text-align: center;
}

.box-1{background-color: #1abc9c;}
.box-2{background-color:#3498db;}
.box-3{background-color: #2ecc71;}
.box-4{background-color: #9b59b6;}
.box-5{background-color:#34495e;}
.box-6{background-color:#2980b9;}
.box-7{background-color:#e74c3c;}
.box-8{background-color: #d35400;}
.box-9{background-color:#2c3e50;}

/**-----------------------------------------------*/
/*
   justify-items - Horizonal Axis Align
   align-items - vertical Axis Align

*/
.container{
  display: grid;
  height: 600px;
  grid-template: repeat(3,1fr) / repeat(3,1fr);
  justify-items:stretch;
  justify-items:start;
  justify-items:end;
  justify-items:center;

}
  
Live Preview

CSS Tutorial


Properties Reference


Cascading Style Sheet


Flexbox Tutorial


CSS Grid Tutorial


Transitions Properties


CSS Properties with Examples


CSS Selectors


CSS Pseudo Elements


CSS Attribute Selectors


Input Pseudo Classes


CSS Examples


CSS Animation Projects