CSS GRID - Issue when adding a new row

Hello,
I have noticed that whenever I add a new row to the grid it automatically add it at the bottom of the grid and not on top even if I (with the visual tool) press the + sing placed on the top right of the grid row creator.
See the video, please.

Any hint. It looks like a bug to me, maybe.

Many Thanks

i think PG is using the implicit quality to add new rows (or columns) which would always go at the end.

if you wanted a new row at the top, you will need to redefine the start/end row def of all your content to allow for the added row in the line count. top edge is always 1, the 2nd row starts at 2 and goes to line 3.

using grid area for content placement makes this much easier to manage, and inserting a row at the top becomes trivial.

1 Like

I am pretty sure it was working before this pg release. Other wise it would not have much sense in having plus (+) icons at the buttom and on top if it always just add the new row at the end.
Instead for the columns it workinf fine. Plus signs on the left and right add new column accordingly.

@red-rosefields, @droidgoo’s description of what’s going on is correct:

Adding rows or columns to the grid definition doesn’t change the placement of elements in the grid - unless you are using named grid areas.

For example, let’s say you have a grid with one row and one column, and one element displayed in position (1,1). Adding a new row at the beginning of the grid will change the grid definition, but it will not change the position of the element - it will still be displayed at (1,1).

This separation of grid layout and element positioning is a feature of CSS Grid, not a bug because it lets us create responsive grid layouts where position of element is defined, but the actual shape of the grid adjusts to different situations.

So, CSS Grid is not like HTML table where layout of the table and cell positions / order is one and the same thing.

Using named grid areas / lines

CSS Grid lets us name areas and lines of the grid. If we use these names to position elements, inserting rows and columns also changes the position of named areas and lines accordingly.

For example, if area (1,1) would be named “title” and the element would be positioned using this named area, inserting a new row at the beginning would push the “title” down one row and the element would thus be displayed in the 2nd row of the grid.

More information

2 Likes

Got it.
Thanks a lot for replying.