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:end;

justify-items:center;

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

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;

}

Understanding CSS Grid Justify-Items Property

justify-items:start;

justify-items:end;

justify-items:center;

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

Source Code :

justify_items.css :

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