Grid reference cell lines disappearing

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.

Running Chrome [latest] on Windows 10 [latest]


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @schultzeworks,

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.

Thanks in advance! :nerd_face: :webflow_heart:

1 Like

Hello @ mistercreate Thanks for the reply.

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

  1. Make the grid visible (or partially visible) instead of 100% invisible.
    OR
  2. 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.

Hi @schultzeworks,

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! :webflow_heart:

Webflow got you covered! Use the “show empty divs” button at the bottom left.

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 :man_facepalming:t2:

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

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.