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 since it's been really great at solving a number of problems. I seem to run into "simple" problems like this all too often and feel like I'm missing some basics, and can't find the answer in docs. Anyways, to the code.

Given a grid setup like so:

display: grid;
grid-auto-columns: max-content;
grid-auto-flow: column;

the content doesn't wrap to a new row once it's filled the width of its parent element. Ideally, I'd be able to have it auto-wrap without pre-defining exact pixel measurements such as grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));. This doesn't seem to work for my needs – I'd have to define multiple grid-template-columns measurements for different viewports, and know what a good width is for the items inside the columns. I'd much rather say grid-auto-columns: max-content; and then have items simply wrap to a new line.

Is this possible with grid? What am I missing/misunderstanding?

See Codepen with a full example demonstrating the problem: https://codepen.io/csdv/pen/OrbrzJ

Solution

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>

Comments

[Charlie Schliesser]

Beautiful. I can get behind the idea of forcing a minimum width and letting the rest auto calculate. I've settled on this which does what I'm looking for – thanks Michael! grid-template-columns: repeat(auto-fit, minmax(10rem, auto));

[Michael Benjamin]

Looks good. Yeah, auto is even better because it does what you want and makes the code easier to understand.