Grid Builder needs improvement or I need more guidance

Working with the grid builder is a bit cumbersome, and requires upfront calculation to get grids with columns widths as desired, example (as far as I understand how it works):

Example 1: Goal is to have 3 columns with the first column 40% (0.4), the other 2 30% (0.3) each. To be able to do this (via that tiny dragging functionality) is to calculate, what number of fractions is necessary to enable these values, thus “Number of fractions” * content width of each column results in an integer (no decimal), thus this example you have to put the fractions number to 10!

Example 2: 2 Columns, first one should be 55%, this results in number of fractions = 20!

Am I missing something? I would propose to have a unlimited dragging option with the grid builder, which shows the percentage while dragging the sizes, and a rework of the UI, where the dragging is better visualized, like this example (taken from the Plugin Qubely):

You are not using the Cwicly block.

image

Grid Builder in Cwicly looks like that:

image

I do, that is just what I am talking about…the screenshot I included is only to visualize a different dragging UI I am proposing

Oh, I missed that. Need to read things more carefully, really sorry!

This is a valid point in my opinion.
Showing the actual size (width) of a column and update in real-time while dragging.
I think this is needed, especially when working with a higher number of fractions.

1 Like

it is not only showing the percentages, it is also about allowing free, contineous dragging, which is currently not possible (see examples I sketched), I would recommend to have a look to e.g. the Qubely Plugin, how it is solving this. Apart from that, the idea of Cwicly working with fractions and should be kept, also the great possibility with that to move all the grid items horizontally and vertically around.

I would also recommend in enable a bigger size of the grid editor for better UX

Do I need to change this thread to “feature request”?

I get your points @FZwo, although working with a visual, draggable layout of Grid CSS is not as easy as it seems. Just the reordering logic is somewhat a bore to put together.

Correct me if I’m wrong, but you’re linking to a UI that deals with a flex layout, not a grid one per se.

Also, it doesn’t allow the multitude of positioning possibilities we currently offer in the Grid builder when ticking Auto Grid off, nor does it feature the repeating possibilities of a grid layout?

That’s better up to you to judge what is possible and what makes sense without loosing the flexibility you mentioned, as I am not able to oversee that (I am not that an expert). The most important point from my view is the free dragging option allowing free percentages

Well, in a way this is an added gimmick on the UI you linked to → you don’t see the value you’ve set until mouse up. How do you know you’re hitting that 40%?

You were also referring to the fact that this is not achievable in Cwicly, which in this particular example is feasible with simple divs.

Sure you can do that with divs (but that is not done with a grid builder then), but for columns not, and if you are coming from native Gutenberg, you are a bit lost…

Maybe there are better solutions than what I posted as UI, at least you are able to see (on the right side in that screenshot), what the percentage is you dragged it, and you can put a percentage manually (which is not possible with Cwicly right now). And as I described in my examples, it is currently very complicated, if you want to e.g. put a row of 2 to e.g. 55%.

I want to complement the need I see in a simple question, apart from a kind of “mathematical” or technical discussion about your grid editor this way:

How to allow the user in a simple, intuitive and wysiwyg way to adjust column widths e.g. of 3 columns, where he wants the first one slightly wider, the second one much more narrow, and the third one accordingly wider to the changes of the first 2 columns?

From my perspective, a contemporary pagebuilder has to offer a sound solution for that, and Cwicly is currently missing a crucial point in pagebuilder experience

1 Like

@Louis @Marius any final statement, take away or not to take anything from this? i certainly do not assume that i always have the right view, or that there is even a right view

There have been a few threads on this, on one side to have all grid properties accessible, and on the other to possibly rework our columns block so that it accommodates more flexibility in use.

I have confirmed these points in all of those threads, and they will be addressed.

Once again, this is flex, and very possible within Cwicly.

1 Like

@FZwo as mentioned, I do think that a column could display the fractions they take up inside the grid.
So per your example, if set 20fr for the grid and a column should take 55% of the space, it would be useful to get an indicator about the actual space, so 11fr in this case.
Currently, it’s just guessing when using a higher number of fractions, unless I miss something.

A resizable grid editor modal would benefit the situation, as you already pointed out.
Your idea of dragging the width, if I got you right, comes with the major downside, that it would directly affect all other columns.
In addition, as pointed out above, it would remove the ability to simply drag & drop the columns.

Can’t add more regarding your other points, I think Louis pointed out all the relevant stuff.

1 Like