Basic Keyword Values
- stretch: Default value of the `justify-items`. The grid items are stretched to fit the grid area.
Syntax:
justify-items: stretch;
- normal: This property aligns grid items within a grid container based on their context. In grid layouts, it acts like
stretch(items fill their cell’s width); in other layouts, it often defaults tostartalignment.
Syntax:
justify-items: normal;
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | justify-items Property
</title>
<style>
#stretch {
width: 320px;
height: 200px;
border: 2px solid black;
display: grid;
justify-items: stretch;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">w3wiki</h1>
<div id="stretch">
<div style="background-color:Yellow;">
Yellow
</div>
</div>
</center>
</body>
</html>
Output: The grid item is taking the whole width of the parent container.
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: