CSS Grid panel-less Suggestion Request

I think CSS Grid should be added to Wappler. I’ve played heavily with Webflow and Pinegrow to see what they are like with it. And I actually came away thinking it could be easier. I don’t think their implementations made their programs more efficient. Just more featured.

My thought is - I don’t think there really needs to be any panel tools at all. Just insert the grid and you can edit all of it live. This would make it very easy to use and fast I think. Anyway, below are some ideas I came up with on how this may work.

The only addition not in these screenshots is the modifier key Alt or Control. When resizing a gap, row or column, holding alt or ctrl would change all of them in the grid instead of the one.

Hi @drymetal. I think CSS Grid has the potential to eliminate layout frameworks primarily because it enables virtual layers (and is light on the code). Chessboard layout are fine for most things but sometimes you want to have an element that appears to float on top of another element or overflow to one side just to break the monotony of the ubiquitous square grid systems we see everywhere.

I gave an example on this thread but there’s a better example on the Webflow site (see below)

webflow-cssgrid-overlap

(EDIT: I’ve had a think about z-indexes and found it was unnecessary so I’ve removed that part of the suggestion. You may be right, drymetal. Perhaps we don’t need a Grid panel if everything can be done in Design View?)

1 Like

This is interesting…Did you know there is a discussion this week on this subject?: Pinegrow comes with CSS Grid

By the way you can too vote for you own suggestion :slight_smile:

1 Like

Not sure who you’re asking @Webjack357 but I was aware of it and added to the thread. Cheers.

2 Likes

Btw webflow already rethink their grid implementation, because of the too fast release of the first one. So a lot of lessons to be learned :slight_smile:

2 Likes

@Webjack357 & @cy2
I saw the thread. I was going to post this there, but I thought the idea of being able to edit the grid without a panel was important enough that it should be its own topic and feature request. Less it may get buried. Also I didn’t see voting.

Or at least panel-less as so far as I’ve described. I can see z-index being useful. Maybe clicking cell and mouse wheel + alt + ctrl adjusts it?

1 Like

Hi @drymetal. I’ve had second thoughts about the z-index. I don’t think it’s necessary. Every grid area has to be given coordinates or a grid area name. The coordinates (or grid-area name) you select determines which section will appear on top.

In the image below, the darker container appears on top because the top right corner has been given a grid-area name (“text”) which matches the other ‘text’ grid-areas. If that area was given the grid-area name of ‘photo’ then the light blue container would appear on top. I was over thinking the problem. :blush:

2 Likes

@George. Very interesting. :upside_down_face:

Just would like to add my two cents that I would love to see this feature implemented as well! I really like the design possibilities that the css grid opens up and makes available. Pairing the css grid with the powerful App Connect and Server Connect components already offered by Wappler would be an unbeatable combination!

4 Likes