How can I force this CSS grid to wrap to a new line without specifying minmax sizes?

Question

I come from a heavy div/float background to build responsive sites (e.g. Bootstrap 3, Foundation) and used Flex box briefly but have been attempting to use Grid everywhere s

Answer 1

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>