Global Values
- Inherit: Inherit the value from the parent element.
- initial: Sets the property to its default value.
- unset: Resets it to inherit from its parent element or defaults to its initial value if not inherited.
Syntax:
justify-items: <inherit | initial | unset>;
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | justify-items Property
</title>
<style>
#initial {
width: 320px;
height: 200px;
border: 2px solid black;
display: grid;
justify-items: initial;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">w3wiki</h1>
<div id="initial">
<div style="background-color:green;">
Green
</div>
<div style="background-color:Yellow;">
Yellow
</div>
</div>
</center>
</body>
</html>
Output: It used the initial value which set it to the default value of element.
Supported Browsers: CSS justify-items property
- Google Chrome: 52.0 and above
- Edge: 12.0 and above
- Internet Explorer: 11.0 and above
- Firefox: 20.0 and above
- Opera: 12.1 and above
- Safari: 9.0 and above
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: