katoid / angular-grid-layout

Responsive grid with draggable and resizable items for Angular applications.
https://katoid.github.io/angular-grid-layout
MIT License
462 stars 61 forks source link

Responsive number of columns #99

Open mr-samani opened 1 year ago

mr-samani commented 1 year ago

How can it be made responsive?

Is such a possibility available? I want, for example, to change the columns to 2 in tablet size and have the grid layout automatically adjust itself, or have all items stacked vertically in a single column on mobile devices.

llorenspujol commented 1 year ago

Hi @mr-samani !

This feature is not currently built into the grid. However, it would be nice to implement it one day, since is an easy feature that many people is requesting.

We could define the number of columns per width, something like this:

breakpoints = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
cols = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},

If you are really interested on having this issue, the quickest approach is to implement it yourself. You only need to create a pull request (PR) with the appropriate changes. If you decide to do so, I recommend to join the Discord so I can provide you some guidance.