Join the Webstudio community

Updated 6 months ago

The Difference Between Justify and Place in CSS

At a glance
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
Screenshot_2024-07-19_at_1.43.13_AM.png
O
p
5 comments
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
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
there are properties in css that have a different function depending on the layout they are used in
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
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
Sign up and join the conversation on Discord