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

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)

4 Likes

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.

1 Like

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.

1 Like

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

2 Likes

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

3 Likes

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.

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

1 Like

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

2 Likes

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.

3 Likes

Same issue here, please add functionality to add a row anywhere on the page as an existing grid with lots of content can be a nighmare to adjust otherwise.

Update – Vlad replied to my tweet a few weeks ago saying this is already in development.

4 Likes

Thank you for sharing this! I hope the PTB’s act on it fast :crossed_fingers::crossed_fingers::crossed_fingers:

Is this still not available? I have a pricing grid with over 50 rows and need to insert 5 rows. Kind of a nightmare. This seems like basic grid functionality.

I’m very new to Webflow and wanting to add a new second row to a 7-row grid within a dropdown. The “Grid 2.0 in Webflow” support article reads “To reorder rows or columns in the Style panel, open the grid settings and hover over the row or column you’d like to move and drag the handle that appears.” This doesn’t seem to work; no handles appear. I can add a row to the bottom within “Grid Edit”, but then I’d have to move the content manually, which I keep messing up.

Surely there must be a way to add a row in between other rows, or at least add a row at the bottom of a grid and reorder the existing rows. What might I be missing?

I found that if you name each area in your grid, it’s easier to pull the bottom of the last row down and then grab the top pink corners and move each grid area down like this. It’s really hard to cut and paste or even drag in these grids, but this method works OK