I have some html elements that have a minimum size of 200px.
I want to create a grid of these elements, such that there are at most 5 per row.
If the row doesn’t have enough space for 5, I want the items to move to a new row.
The following code achieves this.

<div class="grid">
    <div class="grid_item"></div>
    <div class="grid_item"></div>
    <div class="grid_item"></div>
    <div class="grid_item"></div>
    <div class="grid_item"></div>
    <div class="grid_item"></div>
    <div class="grid_item"></div>
    <div class="grid_item"></div>
    <div class="grid_item"></div>
    <div class="grid_item"></div>
</div>

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 20%));
}

.grid_item {
    border: solid black 1px;
    width: 200px;
    height: 200px;
}

However, I don’t want to have to also have to specify 200px minimum track size on the grid.
I want it to be whatever is the minimum size of the contained elements.

So I tried to replace 200px with auto (and min-content too) but neither seems to work properly.
The result is that when there isn’t enough space for 5 elements, instead of moving the items to a new row, it still keeps 5 elements per row and adds an horizontal scroll bar.

grid-template-columns: repeat(auto-fill, minmax(auto, 20%));

Is there a way to achieve this?