CSS justify-items property
The justify-items property in CSS is used in grid layouts to align grid items along the row (horizontal) axis within their grid areas. It controls how the content inside each grid item is aligned horizontally when the grid item itself is smaller than the grid area it occupies.
Basic Syntax
selector { justify-items: value; }
Available Values
start: Aligns grid items at the start (left) of their grid area.justify-items: start;end: Aligns grid items at the end (right) of their grid area.justify-items: end;center: Centers grid items horizontally within their grid area.justify-items: center;stretch(default): Stretches grid items to fill the entire width of their grid area.justify-items: stretch;
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three equal columns */
grid-template-rows: 150px; /* One row with 150px height */
grid-gap: 10px; /* 10px gap between grid items */
height: 200px;
}
.item {
background-color: lightcoral;
padding: 20px;
}
.start {
justify-items: start;
}
.end {
justify-items: end;
}
.center {
justify-items: center;
}
.stretch {
justify-items: stretch;
}
</style>
</head>
<body>
<div class="container start">
<div class="item">Start</div>
<div class="item">Start</div>
<div class="item">Start</div>
</div>
<div class="container end">
<div class="item">End</div>
<div class="item">End</div>
<div class="item">End</div>
</div>
<div class="container center">
<div class="item">Center</div>
<div class="item">Center</div>
<div class="item">Center</div>
</div>
<div class="container stretch">
<div class="item">Stretch</div>
<div class="item">Stretch</div>
<div class="item">Stretch</div>
</div>
</body>
</html>
Explanation of the Example
- Start: The content of the grid items is aligned to the left edge of the grid area.
- End: The content of the grid items is aligned to the right edge of the grid area.
- Center: The content of the grid items is centered horizontally within the grid area.
- Stretch: The content of the grid items is stretched to fill the entire width of the grid area (this is the default behavior).
Practical Use Cases
Aligning Items in a Grid: If you have a grid with various items of different sizes, you might want to align them differently based on the content or design requirements.
Consistent Alignment: Use
justify-itemsto ensure consistent horizontal alignment across all grid items within a container.