Simplify the Grid & Flex layout UI

Since Grid layout is already new and requires some learning curve…Having a sleek and functional UI will always help reducing the burden of learning new tools… So please refer to this video -
https://youtu.be/t0MMezMoATI?si=YxlxzGtBAne1p-LL

and do the needful for the community @diacritica

1 Like

+1 this so hard

i’d rather use this

than this

please @diacritica, fix this

@myfunnyandy I’d love to hear your opinion on this (not urgent!)

ups, I’ve almost missed this one. And I always love discussions about interaction patterns.

My short answer here would be that I think they are both right.

When we created Flex Layout we took a simple yet radical approach. We wanted designers to be able to express themselves in web native language. The same capabilities, restrictions, and wording. It was a risky bet but in the end, we can say that it paid off. In order to get it, we decided to do a very straightforward translation by listing the available properties while keeping the CSS naming. But we may have been too literal by doing so.

I don’t want to give the wrong impression, our data shows that this is working much more than fine. However, we believe that there’s room for improvement. Mapping the options (like in the examples that you’ve shared) is probably better to meet the user’s mental models. Can we still be faithful to CSS web standards and, at the same time, adapt its complexity to designer’s mental models? We do believe so, and we are already designing some explorations in order to do it.