How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
I don't see how this is possible with the current iteration of CSS Grid.
As you've already discovered, you would at least need to define a fixed minimum width on the columns, in order to force a wrap at some point.
Unfortunately, with automatic repetitions, the minimum length cannot be auto, min-content or max-content alone, because that is forbidden in the specification.
Here's as close as you can get with Grid, as far as I can tell:
.btn-tabs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(75px, max-content));
width: 20rem;
}
/* original demo styles */
.btn {
font-family: "Arial", sans-serif;
border-bottom: 4px solid #77aaee;
color: #77aaee;
padding: .6rem;
text-decoration: none;
}<div class="btn-tabs">
<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
<a class="btn" href="#">Button 4</a>
<a class="btn" href="#">Button 5</a>
<a class="btn" href="#">Button 6</a>
</div>Flexbox may be a good alternative, as it seems to work with your requirements:
.btn-tabs {
display: flex;
flex-wrap: wrap;
width: 20rem;
}
/* original demo styles */
/* notice no width defined on flex items, but they wrap anyway */
.btn {
font-family: "Arial", sans-serif;
border-bottom: 4px solid #77aaee;
color: #77aaee;
padding: .6rem;
text-decoration: none;
}<div class="btn-tabs">
<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
<a class="btn" href="#">Button 4</a>
<a class="btn" href="#">Button 5</a>
<a class="btn" href="#">Button 6</a>
</div>