Angular-gridster2: Change grid layout system to CSS Grid Layout

[tiberiuzuld]

Remove all grid layout system and move to https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

The only calculations of positions, columns and rows should be for drag and resize.

This will be a breaking change and will require a major version.

[mischkl]

Sounds like a good idea! Just a note, we and many others unfortunately need to support Internet Explorer 11 into the future while trying not to fall behind on our version of Angular. Thus it would be great if you could implement this with an eye toward maintaing IE11 compatibility (i.e. including -ms- prefixed CSS properties in addition to normal grid- properties, and testing for compatibility). Thanks!

[tiberiuzuld]

Will try to support all browsers which support it https://caniuse.com/#feat=css-grid
I cannot promise that IE11 will be supported till I am finished, but will try to do so.

[mischkl]

Sounds good, thanks!

[tiberiuzuld]

TODO:

• [x] render all gridTypes with the new layout

• [x] make resize work

• [x] make drag work

• [x] make mobile view work

• [x] fix element size on resize when grid changes size

• [ ] test IE 11 and try to make it work. Update: not possible.

• [x] cleanup code and remove any unnecessary code

[tiberiuzuld]

IE11 support is not possible with CSS Grid. Sorry guys.
Mainly because grid-auto-rows, grid-auto-columns and grid-gap is not supported.
You will have to drop support for IE11 or continue to use the 4.x version of the grid.
Should continue to work with angular 6.

[mischkl]

OK, too bad. As long as the 4.x version continues to work with Angular should be OK though. Thanks!