Join the Webstudio community

Updated 2 months ago

Help with Grid Alignment

At a glance

The community member is trying to create a grid layout with 3 columns, but wants the columns to start at the same point rather than be centered based on the longest one. They are using the grid layout from Craft, which turns into a flex layout at 767 pixels. The community members suggest using align-items: center or align-items: flex-start in the "advanced" settings to achieve the desired alignment.

Hey everyone! I have a problem with a grid I'm trying to create - as you can see it has 3 columns but I'd love them to start at the same point, rather than be centered based on the longest one. This is using the grid layout from Craft (so it turns from grid to flex at 767), but I can't see how to "top align" (probably not the right word, but hopefully you get what I mean) all the individual boxes. Any help would be super welcome! Thank you so much!
Attachment
Esme_-_CleanShot_2025-03-16_at_15.20.202x.png
B
E
6 comments
Try adding align-items: center
Thanks Bogdan - where am I adding that? Is it a setting or something I need to type into "advanced"?
Sorry - align items - flex start works in advanced! Thanks love πŸ’œ
Yeah, I meant start
If you use flex we have a ui for this
Attachment
image.png
Here's specific control
Attachment
image.png
Add a reply
Sign up and join the conversation on Discord