Streaming live at 10am (PST)

Bizarre Grid Behavior

#1

Hello everyone! I need some help.

I have a footer that has been built using a grid layout. This footer has worked flawlessly for the entire development of this site, until recently. Since earlier this week every single time I log in to make any change to the website, this footer goes completely bonkers and needs to be rebuilt from scratch. The behavior is essentially the Grid will visibly add rows, contrary to the settings of the grid, then space the content out in what seems to be a randomly bizarre fashion. Sometimes it will take content from one grid spot and place it over the top of another grids content. Maddening.

  1. Grids become corrupted and add rows randomly in contrast to the settings of the grid.

  2. Content goes everywhere. Restore points do nothing, the behavior follows no matter how far back I go.

  3. I’ve reached out to Webflow support twice and they have not responded. As it stands the only solution is to rebuild the footer from scratch. This happens every single time I log in, even to make simple CMS content updates.

Is anyone else having this bizarre grid behavior? The site in question has content that needs to be updated daily, of course having to rebuild a footer daily isn’t really working out too well :slight_smile:

Any thoughts would be greatly appreciated! I am working exclusively in Chrome if that helps.

As you can see in the read only link, the social media links in the bottom left are supposed to be 3x3, which is how the grid is set up. Yet it has added a phantom row and moved all the content.

Here is my site Read-Only: https://preview.webflow.com/preview/front-range-timber?utm_source=front-range-timber&preview=f356825fb99c08c603ee36b256476dbc
(how to share your site Read-Only link)

#2

The footer is part of a symbol. Could the symbol itself be corrupted? When I rebuild I do it within the context of that symbol, for obvious reasons. I have not rebuilt the symbol itself, just the content within it.

#3

This is not an issue or a bug. This is the result of not using the grid the way you should to get the outcome you want.

You can define an explicit grid with grid layout. The Grid Layout specification is flexible enough to add additional rows and columns when needed. Features such as adding “as many columns that will fit into a container” are included.

Ok, so how do you get the layout you want? Take each link block and define the column start, column end, and row start, row end you want to assign to it. Do this manually instead of trying to use drag and drop, since you will likely end up dragging images instead of the link blocks.

So if your grid is defined with 2 rows and 3 columns (6 units), then the first block level element would be 1/1/1/1 (col start, col end, row start, row end), second would be 2/2/1/1, third would be 3/3/1/1/, then the next row would be 1/1/2/2/, 2/2/2/2, 3/3/2/2.

Then there would be no auto rows added. If you wanted to add another row, do that implicitly, and follow the the above instructions with c/c/3/3.

If you edit the grid on another breakpoint you would assign the blocks where you want, adding or removing columns / rows as needed.

CloudApp

#4

Thank you so much webdev. Where do I define the: column start, column end, and row start, row end? The only thing that is weird is that it took so long for this behavior to start.

#5

CloudApp

#6

Cheers. Thanks so much for the help. I will take a look.