Strange Grid behavior

Hello everyone.
I’ve come across something in Webflow that I can’t figure out.
I’ve created a new page with a section and a container with the class ‘Flexiblock’.
There are six identical divs with the class ‘blokje’. 250px high and 250px wide, background color purple.

The container with the class ‘Flexiblock’ is a ‘Grid’ with 2 columns and 2 rows.
Everything is set to ‘auto’. All default settings.
Now, when I place the divs with the class ‘blokje’ in this grid, the first position in the grid remains empty. The first ‘blokje’ is placed in position 2.

If I click on the first block in this grid and change ‘auto’ to ‘manual’, the block suddenly jumps to the correct position! If I switch back, it goes back to the second position.
I don’t understand why this is happening. In my opinion, the first block, with the position set to auto, should occupy the first position, not the second.

Does anyone have an idea why this is happening?
I’ve made a short video about this (click the link below) that shows the problem.
I would appreciate your help.


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

Hey! HGweb The issue with the positioning of divs in a grid in Webflow may be related to the default settings of the grid and the positioning of the divs. One possible solution is to adjust the settings of the grid and the divs to ensure that they are positioned correctly. Another solution is to use a different layout method, such as flexbox or a different grid system, to achieve the desired layout. or refer this Responsive design with flexbox and the Webflow grid | Webflow Blog

Thanks ankitparmar for your prompt answer.
So this is a CSS Grid Bug? Or is it a Webflow thing?