css grid display that places as many divs as possible per row

Question

I would like my divs to be in grid form, without changing its size and without a fixed number of divs per row or per column, so that it is adaptable in different resolutions, like the youtube home screen.

something like:

My code:

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

But this way it is limited to 6 columns, which works at my current resolution, but it doesn't adapt to resolutions with the smaller width

Answer 1

you can do this:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* This is better for small screens, once min() is better supported */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  gap: 1rem;
}

https://css-tricks.com/snippets/css/complete-guide-grid/