The justify-items CSS property is used in grid layouts to align grid items along the horizontal axis within their respective grid cells. It sets the alignment of items within the grid cells in the grid container.
The justify-items property accepts various values to control the horizontal alignment of grid items:
-
start: Grid items are aligned to the start of the grid cell. -
end: Grid items are aligned to the end of the grid cell. -
center: Grid items are centered horizontally within the grid cell. -
stretch: Grid items are stretched to fill the entire width of the grid cell. -
baseline: Grid items are aligned based on their baseline.
Here’s an example:
.grid-container {
display: grid;
justify-items: center;
}
In this example, the .grid-container class is a grid container, and the justify-items: center; rule centers the grid items horizontally within their respective grid cells.
You can use other values like start, end, stretch, or baseline to achieve different horizontal alignments based on your layout requirements.
The justify-items property is useful in grid layouts to control the horizontal alignment of grid items within their grid cells, providing flexibility in the positioning and layout of the grid structure.