The Difference Between Justify and Place in CSS

At a glance

The post asks if a tooltip is incorrect, as the community member thought justify was for the primary axis and place was for both primary and cross axis. The comments discuss that the tooltip only explains the grid case, and that the CSS properties like justify-self and justify-items have different functions depending on the layout they are used in. Some community members are confused about the usage of justify- properties in grid layouts, as they seem to only apply to the inline axis. There is no explicitly marked answer, but the community members seem to agree that the tooltip is misleading in its explanation of the grid case.

Useful resources

ppaulrudy

Is this tooltip incorrect? I thought justify was along the primary axis and place is for both primary and cross axis. justify-items also has a similar tooltip, fyi

Attachment

5 comments

OOleg Isonen

its a bit misleading because it only explains grid case, its context depending on display
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

ppaulrudy

I'm confused. I've always used justify- in grid as a single axis thing.

In that MDN page, it says "In grid layouts, it aligns an item inside its grid area on the inline axis."

And on the grid alignment page: "To align things on the inline axis you use the properties that start with justify-, justify-content, justify-items and justify-self."

Nothing about both axes at once.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout

OOleg Isonen

there are properties in css that have a different function depending on the layout they are used in

ppaulrudy

I don't want to waste your time with this if I'm misunderstanding. But like you said, the tooltip references the grid case, and doesn't the grid case only apply to one dimension? Just want to avoid confusing users, unless it's me who's confused here

OOleg Isonen

yep, seems like it "In grid layouts, it aligns an item inside its grid area on the inline axis. Read more about alignment in grid layouts"

Add a reply

Join the Webstudio community

The Difference Between Justify and Place in CSS