How to evenly distribute columns in a grid container?

Question

css

Hi all! The problem is this, there is a list of thumbs, the number of thumbs is unknown from 0 to infinity, the size of the thumbs ranges from 190px to 320px. This list should look like this
Styles applied look like this
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

But this option is not suitable, because if there are not enough thumbs, they are stretched.

You need something like this
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 320px));
}

But the result is not what I expect, the columns do not shrink and do not adjust to the line width

Answer 1

Use auto-fill