Baseline alignment values
- baseline: Aligns grid items along their baseline.
- first baseline: Aligns grid items along their first baseline.
- last baseline: Aligns grid items along their last baseline.
Syntax:
justify-items: first baseline | last baseline;
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | justify-items Property
</title>
<style>
#container{
display:flex;
align-items:center;
justify-content:center;
}
.child{
width: 150px;
height: 150px;
margin-right:2rem;
border: 1px solid red;
display: grid;
}
#first-baseline {
justify-items: first baseline;
}
#last-baseline {
justify-items: last baseline;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">w3wiki</h1>
<div id="container">
<!--justify-items: first baseline -->
<div class="child" id="first-baseline">
<div> First Baseline </div>
<div> First Baseline </div>
</div>
<!--justify-items:last baseline; -->
<div class="child" id="last-baseline">
<div> Last Baseline </div>
<div> Last Baseline </div>
</div>
</div>
</center>
</body>
</html>
Output: The first container represent the `value: first baseline` and the second container represent `value: last baseline` 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: