Idea 1

El componente debería de funcionar atraves de un arreglo.

frutas = ["Manzana", "Pera", "Piña", "Pepino"];

<labgrilla #frutas [list]="frutas" (selectItem)="SelectItemEmit($event)"></labgrilla>

Además se requiere que sea posible seleccionar un item atraves de las flechas del teclado.

• El item en el cual estamos posicionados debería de resaltar entre los demás.
• La selección sera atraves de la tecla enter o el click derecho del ratón.
  

Responsive Design
Este componente debe de ser responsivo.

• Si mi pantalla de navegador es mayor a 1200px deberia mostrarse 12 items por fila.
• Si mi pantalla de navegador es menor a 1201px y mayor a 1000px deberia mostrarse 10 items por fila.
• Si mi pantalla de navegador es menor a 1001px y mayor a 800px deberia mostrarse 8 items por fila.
• Si mi pantalla de navegador es menor a 801px y mayor a 600px deberia mostrarse 6 items por fila.
• Si mi pantalla de navegador es menor a 601px y mayor a 500px deberia mostrarse 5 items por fila.
• Si mi pantalla de navegador es menor a 501px y mayor a 400px deberia mostrarse 4 items por fila.
• Si mi pantalla de navegador es menor a 401px y mayor a 300px deberia mostrarse 3 items por fila.
• Si mi pantalla de navegador es menor a 301px y mayor a 200px deberia mostrarse 2 items por fila.

首先定位 labgrilla 组件及其现有的 list 和 selectItem 入口点。检查该组件当前如何渲染项目，然后确认数组输入、键盘选择和高亮、通过 Enter 或右键单击进行选择，以及列出的响应式 items-per-row 断点都已覆盖。