Positional alignment Values
- start: Grid items are aligned to the start of the grid area.
- left: Aligns grid items to the left within the grid area.
- self-start: Aligns the grid items to the start of their respective grid cells along the inline axis (row).
Syntax:
justify-items: start | left | self-start;
- end: Align items to the end of the container’s cross axis.
- right: Aligns grid items to the right within the grid area.
- self-end: Aligns items to the end of their individual flex container.
Syntax:
justify-items: end | right | self-end;
- center: Grid items are centered within the grid area.
Syntax:
justify-items: center;
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | justify-items Property
</title>
<style>
#container{
display:flex;
align-items:center;
justify-content:center;
}
.child{
width: 100px;
height: 100px;
margin-right:2rem;
border: 2px solid black;
display: grid;
}
#start {
justify-items: start;
}
#end {
justify-items: end;
}
#center {
justify-items: center;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">w3wiki</h1>
<div id="container">
<!--justify-items: start | left | self-start -->
<div class="child" id="start">
<div style="background-color:green;">
Start
</div>
<div style="background-color:Yellow;">
Left
</div>
</div>
<!--justify-items: center -->
<div class="child" id="center">
<div style="background-color:green;">
Center
</div>
<div style="background-color:Yellow;">
Center
</div>
</div>
<!--justify-items: end | right | self-end; -->
<div class="child" id="end">
<div style="background-color:green;">
End
</div>
<div style="background-color:Yellow;">
right
</div>
</div>
</div>
</center>
</body>
</html>
Output: The 3 contianers represent the different values of positional alignment.
CSS justify-items Property
The `justify-items`
property in CSS is important for aligning items within a grid container along the inline (row) axis. It allows you to control the alignment of grid items in a grid container when they do not explicitly position themselves using grid-area
or similar properties.
Similar to `align-items` property
for flex containers, justify-items
enables you to align grid items horizontally within their grid areas.
Syntax:
justify-items: normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] |
legacy | positional alignment | Initial | inherit | inherit
Now, let’s understand each of the property values: