Formlayout colspan not working in Display : grid

As show in the picture

I’ve created a grid div ( this is to have responsive layout ) and under that I’ve a form layout. Everything is looking good except the colspan. What ever the value I set, it does not have any impact. All components are taking equal size. How to implement colspan in this scenario ?

I’m trying to get these two in one row with colspan = 1 but it is not taking effect

At specific available width, all column take the same space by default - you can customize this behavior with the responsive step APi; take a look at the docs: Form Layout | Components | Vaadin Docs