Responsive Grid

[projetobleroo]

Could someone guide me how can I make the columns and grid items
stay responsive in angular, example I have the layout this way in full screen.

as I make it smaller, that each card is one under the other and not decreasing its size.

[llorenspujol]

I see no problems on the grid side. You should make your grid item components responsive.

If what you want is that when the screen is smaller, change the number of columns, for example just 1 column, this is another thing that we can discuss.

[projetobleroo]

Sim , o intuito é que ele altere o numero de colunas caso seja necessário devido tamanho da tela. Que ao invés de diminuir os elementos ele coloque um em baixo do outro desta forma.

[llorenspujol]

This feature is not supported, and is currently not in the roadmap. That being said, if requested for many users it could be implemented, since is fairly easy.

For now I suggest you to implement it yourself. You should listen your container "width" changes, and when it is smaller enough, change the configuration of the grid to have less columns and also correct the grid item bounds.

[jneuhaus20]

By "correct the grid item bounds," do you mean recalculating the positions and sizes for all the items? That seems like a pretty nontrivial task, with several options for specific behaviors.

Additionally, if you persist layouts it would be nice to have a built-in distinction between breakpoint-based layout changes and ones from drag/drop events. Ideally a given layout definition could be made to "look right" at smaller breakpoints without necessitating a change in definition.

I guess my point is that that's harder than it sounds to do well, and library users (and the library) would benefit from funneling into some best practices here in addition to the algorithm assistance.