Leniolabs / layoutit-grid

Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

Home Page:https://grid.layoutit.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Allow moving/extending grid areas

FrankySnow opened this issue · comments

Hello,
first of all, thank you for this wonderful tool !

The only thing I am missing is the ability to move or extend already defined grid areas.

When one grid area is saved, there is no way (at least I found none) to make it start at another row/column, or to make it span a different number of rows/columns.

Thanks in advance for taking this into consideration

commented

Hey @FrankySnow ! Thanks for the kind words ❤️

If this is in the production version at grid.layoutit.com, we added support for editing areas by clicking on their names. Check out this tweet: https://twitter.com/layoutit/status/1308060932011167751

If you are testing the code in the main branch, give us a few weeks, there are a lot of exciting things building up there 😉

Ok thank you @matias-capeletto !

I was referring to the production version. This is indeed what I was searching for, but I wasn't able to discover this feature without seeing your tweet. To me this is not intuitive, as there are no UX clues suggesting that I can do something else that editing the name, but maybe is it just me ? What I was trying to do is something similar to many cell-based software (like M$ Excel) : grabbing the border of the area to extend it, or grabbing the surface of the area to move it.

Are you considering something like this in the future ?

commented

Totally agree @FrankySnow 👍

In the next version, to be released hopefully during the next month, we will have an edit button. Clicking the area name will select it instead of editing it, that as you said, is not intuitive.

About grabbing the borders to modify, it would be a really interesting feature. We should add handles for that because if not, dragging will move the line, but I think we may include something like this at one point. Thanks for the suggestion!

Great, can't wait to see it !