The justify-items property is a sub-property of the CSS Grid Layout module. It is used to align the content of all grid items along the inline (main) axis within their respective grid areas.
Example 1: justify-items: start
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: start; /* Aligns items to the start of their grid area */
gap: 10px;
background-color: #f7f7f7;
padding: 10px;
}
.grid-item {
background-color: #3498db;
padding: 20px;
color: white;
}
Explanation
This code aligns all grid items to the beginning of their respective grid cells along the horizontal axis. The items will be flush with the left edge of their grid area.
Example 2: justify-items: end
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: end; /* Aligns items to the end of their grid area */
gap: 10px;
background-color: #f7f7f7;
padding: 10px;
}
.grid-item {
background-color: #e74c3c;
padding: 20px;
color: white;
}
Explanation
This example demonstrates the end value, which aligns all grid items to the far right of their grid cell along the inline axis.
Example 3: justify-items: center
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center; /* Centers items within their grid area */
gap: 10px;
background-color: #f7f7f7;
padding: 10px;
}
.grid-item {
background-color: #2ecc71;
padding: 20px;
color: white;
}
Explanation
The center value for justify-items horizontally centers the content within each grid item's designated area. This is a common choice for creating balanced layouts.
Example 4: justify-items: stretch
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: stretch; /* Stretches items to fill their grid area */
gap: 10px;
background-color: #f7f7f7;
padding: 10px;
}
.grid-item {
background-color: #f1c40f;
/* No width is set, so the item will stretch */
color: white;
padding: 20px;
}
Explanation
stretch is the default value for justify-items. It causes the grid items to expand horizontally, filling the entire width of their grid area.
Example 5: justify-items: self-start
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center; /* Default alignment for the container */
gap: 10px;
background-color: #f7f7f7;
padding: 10px;
}
.grid-item {
background-color: #9b59b6;
padding: 20px;
color: white;
}
.special-item {
justify-self: self-start; /* Overrides the container's alignment for this specific item */
}
Explanation
While justify-items sets the alignment for all items, justify-self can override it for a single item. Here, self-start aligns a specific item to the start, contrasting with the centered group.
Example 6: justify-items: self-end
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: start; /* Default alignment for the container */
gap: 10px;
background-color: #f7f7f7;
padding: 10px;
}
.grid-item {
background-color: #1abc9c;
padding: 20px;
color: white;
}
.another-item {
justify-self: self-end; /* Aligns this specific item to the end */
}
Explanation
Similar to the previous example, self-end is used with the justify-self property to target an individual grid item. It positions the item at the far right of its grid cell, overriding the container's start alignment.
Example 7: justify-items with different content sizes
.grid-container {
display: grid;
grid-template-columns: auto auto;
justify-items: center; /* Center aligning items of different widths */
gap: 15px;
background-color: #f0e68c;
padding: 15px;
}
.grid-item {
background-color: #d2691e;
padding: 15px;
color: white;
}
.wide-item {
width: 200px; /* A wider item to show alignment */
}
Explanation
This code illustrates how justify-items: center works with items of varying widths. Each item is centered within its respective grid track, regardless of its own size.