CSS Grid panel-less Suggestion Request

drymetal · July 3, 2019, 10:15am

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.

cy2 · July 3, 2019, 9:32am

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?)

Webjack357 · July 3, 2019, 2:17am

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

cy2 · July 3, 2019, 9:35am

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

George · July 3, 2019, 10:07am

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

drymetal · July 3, 2019, 10:14am

@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?

cy2 · July 3, 2019, 10:49am

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.

cy2 · July 3, 2019, 10:57am

@George. Very interesting.

srcreative · September 12, 2019, 9:12pm

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!

cy2 · July 25, 2022, 6:13am

I’m about to use CSS Grid to start another project and thought it was time to resurrect this Wappler feature request.

In 2018, Webflow introduced CSS Grid but it had two problems: you had to manually position the grid children for each breakpoint and, more importantly, there was no way to support things like e-commerce, CMS and search results lists. A year later, they updated to CSS Grid 2.0 so now you can do both.

I’m posting this Webflow CSS Grid tutorial to show how their implementation works and to drum up support to have CSS Grid incorporated into Wappler.

ben · July 25, 2022, 4:49am

Have a look here:

In Bootstrap, CSS Grid is in an experimental stage. The reason why it has not been implemented to date is because the consensus on CSS Grid has not yet been finalised.

Rather than Wappler branch out with their own interpretation of CSS Grid, let’s wait until Bootstrap has this finalised.

B.T.W., CSS Grid is a 2 dimensional layout tool, while Flexbox has the same features, but in a single dimension. This can be either vertically or horizontally orientated. In other words, do not expect too much from CSS Grid, a lot of the same can be achieved using Flexbox.