Отображение сетки css, которое размещает как можно больше элементов div в строке

Я хотел бы, чтобы мои элементы div были в форме сетки, без изменения их размера и без фиксированного количества элементов div в строке или столбце, чтобы их можно было адаптировать к различным разрешениям, например, на главном экране YouTube.

что-то вроде:

Мой код:

.foodlist{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

Но таким образом он ограничен 6 столбцами, что работает с моим текущим разрешением, но не адаптируется к разрешениям с меньшей шириной.