New Project "Phoenix" - Item grid control

For our new project we need an item grid control. This control should be programmed in HTML5, CSS3, JavaScript Example: *Picture1* In the above example from our present pos system, items are displayed as buttons in a 5x5 grid. The item description and if applicable, the item price, are displayed on the button. In case the item description is too long, it is automatically wrapped to the next line. *Picture2* In the above example from our present pos system, items are displayed as buttons in a 5x5 grid. The item description and if applicable, the item price, are displayed on the button. In case the item description is too long, it is automatically wrapped to the next line. *Picture3* It is also possible to change the shape of the button. *Picture4* By clicking on a button an event with a tag-value is triggered. The control element must have the following characteristics: - The item-buttons should be generated by a function and they should be consecutively displayed. - The number of buttons displayed should be adjustable. It should be possible to have grids with different numbers of buttons, for example 3x4 or 1x4. - A scroll or swipe function should be included to be used when the number of items exceeds the maximum number of buttons that can be displayed and it is necessary to display additional items. - The design of the individual buttons should be modifiable. It should be possible to change the form and color of the buttons. - The displayed text should automatically adjust to the button. - Clicking on a button should trigger an event and pass a defined tag-value as argument. - The entire control element should be responsive.