Streaming live at 10am (PST)

CSS Grid Re-ordering grid rows - inserting a row between existing rows


#1

I have created a grid. Now after creating it, I want to insert a new row between the first and second rows.

For example, I have a grid with 3 rows. I want to insert a new row between the 1st and 2nd row. The new 2nd row is inserted. What was row 2 would now be row 3 and what was row 3 is now row 4. All grid child content would move with the row.

When I click on edit grid, rolling over a row implies, because you when you rollover the row a hand appears and if you move it a blue line appears, that you can move the row. But it doesn’t move.

I thought moving row and content should be easy, but thinking about it, maybe not so easy (because of changing all the row start end positions). But then I think, this is why we use tool like Webflow so don’t have to write code.

This question has been asked, but I don’t think it was really answered. And since it looks like moving a row is happening when you rollover it and move, I’m confused as to whether there is a bug. There are comments saying next implementation of CSS Grid will be better. So, again, not sure if inserting a row (or column) is something to look forward to.

Since moving row in edit grid doesn’t work, to add a row in the middle of the grid, do you have to add a row at the end (seems only place can be added) and move all the content down one row to end up with an empty row, effectively inserting a row?

Thanks


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


#2

Yes, you answered your own question here. Editing grid is currently separate from editing content so that you have to move content while out of grid edit mode.


#3

You’re right. I did answer my own question in that I know how to add row and move content.

My real question is if grid editor will ever work similar to a spreadsheet. In Excel, you can insert a row anywhere in the spreadsheet, and when you do, all the rows and content move down same number of rows you inserted. And, if you delete a row (or rows) all the other rows adjust accordingly.


#4

Well, webflow staff mentioned planned improvements in the grid usability so I guess why not?


#5

Hoping for the same. I’m currently working on a 30 row, 4 column comparison pricing table, based on CSS grid, and OMG, I need to insert a row at position 2. That means literally repositioning 29 * 4 cells manually. >_<


#6

I agree, grids are a nightmare.
I’ve all but given up using them because of the problems of moving elements around for mobile views. Even selecting elements within a ‘cell’ is hit or miss.
Today the whole system started slowing down and finally bombed out.
Sorry, folks, I just don’t think it’s ready.


#7

Agreed @wergle32 :point_left:

Love Grids, it’s one of the best tools in Webflow. That said, inserting rows between other rows would save so much time, especially when you’re transferring everything into a 1 column layout (for mobile views).


#8

Hey guys, found this Wishlist item by Gary, please upvote it.
https://wishlist.webflow.com/ideas/WEBFLOW-I-1545


#9

I am using the grid a lot, since they have the potential to eliminate several layers of nesting. Potential is the key. Not quite there yet.

In the style panel, the The Grid Edit is supposed to let you add a row (it works) and then let you move it. (it does NOT WORK.) That means you have to move EVERYTHING up or down instead.

Please please fix this.