CSS
Individual Item Alignment in CSS Grid using `justify-self` and `align-self`
Master `justify-self` and `align-self` in CSS Grid to precisely position individual grid items within their cells, overriding container-level alignment settings.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
border: 1px solid #000;
/* Default alignment for all items (can be overridden) */
justify-items: start;
align-items: center;
}
.grid-item {
background-color: lightblue;
padding: 5px;
border: 1px solid blue;
font-size: 0.8em;
}
/* Specific alignment for an individual item */
.grid-item-2 {
justify-self: end; /* Aligns content to the end of its cell horizontally */
align-self: start; /* Aligns content to the start of its cell vertically */
background-color: lightcoral;
}
.grid-item-5 {
justify-self: center; /* Centers content horizontally within its cell */
align-self: end; /* Aligns content to the end of its cell vertically */
background-color: lightgreen;
}
How it works: While `justify-items` and `align-items` control the default alignment for all items within a grid container, `justify-self` and `align-self` provide granular control over individual grid items. This allows you to override the container's default settings and position specific items exactly where needed within their respective grid cells, horizontally (`justify-self`) or vertically (`align-self`).