multiple grids in horizontal layout

tried to add multiple grids in horizontal layout , grids are not coming properly.
cant we show two grids ins single horizontal layout?

Yes, it is possible. Does your HorizontalLayout have a defined width (e.g. 100%)?

HorizontalLayout is defined without width. When Grid is defined with specific width then all grids coming ok. Without specific width its not coming ok. so have defined width in grid to solve it.

Yep. There are three major cases for width and height of an element:

  1. Fixed. This is the simple case - you tell a Grid that it’s 300 pixels wide, that’s what it will be (discounting any special circumstances).
  2. Relative, usually Percentage. This means the parent of a component can decide how many pixels the component will have on the screen. This is ok as long the parent doesn’t have undefined width (because what’s 50% of undefined? It’s still undefined.).
  3. Undefined. This means the component is sized by its content. This option makes sense if you have e.g. a Span that should be as long as the text inside it, or a Layout that should be just high enough to fit all the buttons that are inside it. Undefined size doesn’t make sense if the component doesn’t have children inside of it, or if the children aren’t able to tell the parent how big it should be.

Thanks, Its really helpful.

As per case 3, can we say due to multiple grid, size is not identified by its parent horizontal layout.
For other element like text field it is able to manage the components without specifying width.

Yep; a TextField has a default fixed width, so it will work inside an undefined-width container like a default HorizontalLayout.