I love the grid, but in the last week, they have been acting differently. Initially, I can see the light grey dashed lines for each cell. After placing items, the dashed lines stop showing up. Its very hard to design / move / edit stuff when you can’t see where items are going to go.
Thanks for reaching out about Grid within Webflow.
We were able to reach out to the engineers, and noted that this is expected behavior.
The current design is that if an item is placed in a cell, we hide the empty cell outlines.
Think of it like the empty div — when you set some size-changing properties on that div or put some children inside, we hide the outlines there as well.
With that said, we would like to get a better understanding how it’s affecting your workflow. Empty outlines have been a hot topic, and has changed quite a bit since the original launch.
The problem I am running into is when I am adjusting for responsiveness.
I make extra cells (usually rows) so that when I get to mobile portrait mode, it’s easy for me to move cell content from sideways to stacked. That way, I don’t have to add new rows or columns. It’s a very powerful strategy and works great!
Here’s the problem. Once a grid is populated, as you clarified, all the dashed lines disappear. I can’t see where the cells are. When I go to drag contents to their new position, I am ‘flying blind’ and end up guessing. The grid gets seriously messed up! I build the grid fast, but it’s agonizingly slow to edit by moving contents.
It’s also fairly common that I end up with 1 pixel wide rows or columns. OUCH.
Please consider these two suggestions
Make the grid visible (or partially visible) instead of 100% invisible.
OR
Provide an Style option switch ‘Grid Outlines’ = on/off
Either of these would be a HUGE help in my workflow. Grids are truly great, but this improvement will make them amazing. They deserve it.
Thanks for the feedback, and we’ve gone ahead and passed it on to our engineers so that they may take it into consideration as they improve Grid for us.
Though we don’t have a timeline of if/when an update will be completed, we’ll be happy to let you know as soon as possible.
Thanks again, and please reach out if you have any additional questions!
I agree with @schultzeworks that there should at least be an option to always show all grid outlines, it would make it easier to see what’s happening in the grid after elements have been added. I don’t always remember how I aligned things
@dram Solid suggestion, thank you! But, I’ve tried it and it’s not showing me what I need.
The strategy I’m using is for column 1 elements to take up two cells vertically. When I need to stack elements, I shift the contents into the top cell, so there is now room beneath. That’s where the column 2 elements go when you shift to mobile-portrait.
To re-phrase for clarity:
In desktop, elements take up two cells vertically, 1x2
In Mobile-portrait, elements take up two cells horizontally, 2x1
In the images below, you can see that ‘Hide/Show Empty Elements’ is not helping. Why? I’m using them all. No empty ones! My otherwise excellent strategy is foiled/ complicated by this hidden UI.