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
CodePudding user response：
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;
}