Mergeable Grid list

The tool helps users to merge any adjacent tiles in a grid list so that they can create customized views as they want. Once they customize the view, they can place whatever the content they would like, like images, videos, and livestreams into each tile. That experience is just WOW.

Live at https://ng-grid-list.netlify.app/

Tech stack

• Angular 10

• NgRx

• Angular Material

How to use

The functionality is pretty much similar to merge in Excel.

1. Generate a grid list using Generate button from the toolbar

https://github.com/anthowen/mergeable-grid-list/blob/master/FireShot%20Capture%20064%20-%20DoWow%20-%20ng-grid-list.netlify.app.png

2. Select adjacent cells holding on meta key

(Note: On Macintosh keyboards, this key is the command key (⌘). On Windows keyboards, this key is the Windows key (⊞))

https://github.com/anthowen/mergeable-grid-list/blob/master/FireShot%20Capture%20067%20-%20DoWow%20-%20ng-grid-list.netlify.app.png

3. Once Merge button is enabled, merge selected cells

4. Keep merging cells until you find a good-looking view

https://github.com/anthowen/mergeable-grid-list/blob/master/FireShot%20Capture%20061%20-%20DoWow%20-%20ng-grid-list.netlify.app.png