Horizontal layout max. number of components to fit window

Hi, I’m adding content dynamically to my horizontal layout depending on what’s stored in the database but I want it to be added vertically whenever the max. width of the window is reached. I don’t seem to be able to do this…
unknown.png

unknown.png

Sounds more like a css grid that you wanna use https://css-tricks.com/snippets/css/complete-guide-grid/ - there are lumo utility classes for it https://vaadin.com/docs/latest/styling/lumo/utility-classes

Thanks! Will take a look at it. :slightly_smiling_face:

Seemed like a flex layout did the trick

If I understood correctly, you would want items to wrap onto a new line when they fill the browser viewport width? You can use flex-wrap for that (CSS property).

But a CSS grid is also an option. Depends a bit on what you need. A flex layout is sized based on its content/children, while a grid layout defines the size of its content/children.