Published: 19 Jun
2025
3-min read
Table of Contents
INTRODUCTION
CSS Grid is a layout system in CSS that lets you design web pages using rows and columns in a grid-like structure. It’s one of the most powerful layout techniques in modern web development because it allows you to build two-dimensional layouts (both rows and columns) in a clean and responsive way.
INTRODUCTION
The justify-items property controls the horizontal alignment of items inside their own grid cells along inline-axis.
The justify-items property is an extended version of the CSS
justify-self property. It is exactly similar to
justify-self except that it applies to all Grid-items.
Where to apply - The property is applied on grid-conatiner
and not on grid-items.
Possible Values
The possible values of the justify-items property are listed below.
- center
- start
- end
- stretch
1. center
All the Items are centered horizontally in their grid cells.
2. start
All the Items are aligned at the inline-start edge(left for english) of their grid cells.
3. end
All the Items are aligned at the inline-end edge(right for english) of their grid cells.
4. stretch
The stretch value causes an item to stretch from start edge to end edge of grid area along the axis. When used for justify-items all the items are stretched from inline-start edge to inline-end edge.