Search⌘ K

Placing Content in Your Post-Apocalyptic Grid - III

Explore how to control content placement within CSS grid layouts using justify-self and align-self properties. Understand how each property aligns items horizontally and vertically within grid cells and use place-self as a shorthand. This lesson helps you master precise alignment techniques for responsive and visually appealing grid designs.

We'll cover the following...

Don’t you self justify, zombie!

justify-self: This lets you set how an item is aligned within its context, i.e. its column.

Note: The properties we’ve discussed are like genetic zombie contagions—(set on the parent), while this and the other “self” properties are set within the item itself. ...

.zombie-item {
    justify-self: stretch;
}