I’m working on a web application form that supports a multi-column layout where users can design their own forms. They can drag and drop field elements into a 12-column grid and position them according to their preference. Currently, I’ve implemented a 12-column layout using a CSS grid:

.flexible {
    display: grid;
    grid-template-columns: repeat(12, 200px); 
}

However, I’m facing an issue where I can’t drop an element into the second row unless the first row is fully occupied. When I try to drop a field into the second row, the placeholder moves to the 8th column of the first row because the remaining 5 columns in the first row are still empty.

Is there a way to drop elements directly into the second row, even if the first row isn’t completely filled?